De vanligaste bildformaten på webbsidor. Grafik på en webbsida i HTML. Placering av en grafisk bild från en fil

numrerad lista mycket lik den markerade. Den enda skillnaden är att i en numrerad lista placeras sekventiella nummer eller bokstäver automatiskt framför varje objekt istället för grafiska markörer.

Den numrerade listan anges med taggar. Som i punktlista, varje föremål får en tagg

nyckelord TEJP.

TAPE=1 - Standardnumrering (1,2,3,4,5, ...)

TAPE=A - Versaler (A, B, C, D, ...)

TAPE=a - Brådskande bokstäver(a, b, c, d, ...)

TAPE=I - romerska siffror (I, II, III, IV, ...)

TAPE=i - Gemena romerska siffror(i, ii, iii, iv, ...)

Definitionslistor ser lite annorlunda ut än andra typer av listor. I det här fallet används två taggar för att beskriva varje listobjekt, och inte en tagg

1. . Märka
   set separat element, det vill säga termen som definieras och taggen
   - resten av informationen som visas på nästa indragna rad. Den andra informationsraden kallas definition. Definitionslistan specificeras på samma sätt som övriga listor. Den enda skillnaden är att varje element kräver två taggar.

   En av de fantastiska sakerna med listor är att de kan kapslas inuti varandra. Att kapsla en lista i en lista görs på samma sätt som att bara skapa en lista. Det finns inga speciella HTML-taggar. För att undvika att förvirra webbläsaren, se till att du stänger varje intern lista med en tagg. Ni kan till och med investera i varandra olika typer listor.

   Spela alla ovanstående listor

   Listor har en nackdel - de är endimensionella. Det betyder att du endast kan placera information på rader i följd. Tabeller, å andra sidan, låter dig ordna data inte bara i rader utan också i kolumner.

   Ett antal taggar används för att definiera tabeller. taggar

   och rama in hela tabellen, och ett antal andra taggar avgör hur informationen kommer att visas. Tabellen visar Full beskrivning tabell taggar.

   
   
   

   HTML-taggar för att bygga tabeller:

   Taggar Beskrivning

   och dessa taggar täcker bordet. Märka

   berättar för webbläsare att en beskrivning av tabellen följer. Om du vill att rutnätet som separerar rader och kolumner ska vara synliga, lägg till nyckelordet BORDER.

   visas som en rubrik. Du kan också använda taggar för att ställa in titeln. och.

   Taggar visar text som rad- eller kolumnrubriker i ett lite större fetstil.

   och Taggar definierar varje tabellrad. Märka valfritt, men det gör din HTML-kod mer komplett och begriplig.

   Det här paret taggar separerar texten i varje tabellcell.

   Skapa en fil där du bygger en tabell med fem rader och fem kolumner.

   Det finns ett antal taggar som låter dig ställa in bakgrunds- och rutnätsfärgerna för tabellen. I det första fallet infogas nyckelordet BGCOLOR i taggen

   och text markerad med dessa taggar,

   och
   och

   följande bilder:

   Förutom nyckelordet BGCOLOR finns det andra sätt att styra färg:

   BORDERCOLOR Ändra färgen på tabellens rutnät

   BORDERCOLORDARK/ Används för att ändra rutnätet från

   BORDERCOLORLIGHT för en extra tredimensionell effekt

   Ändra tabellens rutnätsfärg med 3D-effekt.

   Lektion 12-13. Användning av grafik

   Bilder och grafik är mycket viktiga för WWW. Detta är det enda internetverktyget som låter dig se bilder och text på skärmen samtidigt.

   För att placera en bild på en webbsida måste du veta hur du använder taggen . Ange en tagg och nyckelordet SRC= för att ange vilken grafik som ska laddas.

   

   När du anger den här taggen, observera att filen måste finnas i samma mapp som din HTML-fil.

   Grafik och trafik

   Kraven på skönheten och uttrycksfullheten i designen av webbsidor är i ständig konflikt med de tekniska möjligheterna hos modernt webbhotell. Därför måste webbplatsdesignern bli en mellanhand mellan designern och användaren och strikt upprätthålla en balans mellan visuellt tilltalande och en rimlig hastighet för informationsleverans på webben. För att framgångsrikt lösa detta problem måste du känna till alla grafiska format som används på Internet, förstå skillnaderna mellan dem, deras användningsområden och användningsmönster.

   För att hantera det stora antalet format och protokoll som används på Internet och bygga din egen sida måste du välja det som är mest lämpligt för dina specifika syften. Vissa format kan vara specifika för endast en webbläsare, medan andra kräver en speciell plug-in. Vi har valt från alla olika format endast de som oftast används av författare till populära webbplatser och accepteras av användare.

   GIF och JPEG är två av de mest populära bildformaten och har länge varit de facto standarder för användning på WWW. Båda är ganska universella, läses av de flesta webbläsare och kräver inga speciella programvara(eller ytterligare moduler). GIF och JPEG är rasterbildsformat som bestämmer ett fast format (upplösning) vid visning av sådana bilder på skärmen. När du försöker skala (finns i vissa webbläsare) förlorar bitmappsbilder (pixel) mycket kvalitet. För 8-bitars (256-färgs) GIF-format är dessutom valet av färgpalett ett allvarligt problem.

   Vektorgrafikformat är mycket mer attraktiva att använda på webben. Till skillnad från bitmappar är vektorgrafik baserad på en matematisk (geometrisk) representation av data. Sådana bilder är mycket mindre när det gäller lagring/överföring, skalas lätt och tappar praktiskt taget inte kvalitet under några transformationer. Tyvärr är vektorformat fortfarande till liten användning på Internet, men standarderna har redan formats och borde vara av intresse för designers.

   Flera vektorstandarder har föreslagits relativt nyligen, och PGML- och VML-formaten övervägs för närvarande av World Wide Web Consortium (W3C). Macromedia, som marknadsför VML, har dock länge öppnat sitt vektorformat. Shockwave Flash till andra utvecklare och implementerade ytterligare moduler för att visa grafik i detta format för populära webbläsare.

   Men nya verktyg är inte nödvändigtvis de bästa för alla applikationer. De vanligaste bilderna som publiceras på Internet är fortfarande digitala fotografier, ritningar och skannade bilder, som är mycket mödosamma och knappast tillrådliga att konvertera till vektorformat.

   Därför beror valet av format i slutändan på dina uppgifter, och det är upp till dig att bestämma vilka bilder som är mer relevanta för din målgrupp.

   GIF - format för design

   CompuServe avsåg ursprungligen sitt GIF-format för interaktiva applikationer i den begränsade kapaciteten av standardgrafik på en persondator. Det var ursprungligen ett 4-bitars och senare ett 8-bitars färgmappat bitmappsformat som stödde maximalt 256 färger. En av de betydande fördelarna med formatet är att bilder kan indexeras till en specifik palett (en uppsättning färger), medan JPEG-bilder inte kan "länkas" till en palett och deras "korrekta" visning är inte alltid möjlig. Denna egenskap är särskilt viktig för de utvecklare som använder palettindexering för att optimera bildåtergivningen för alla plattformar utan undantag (vare sig det är PC, Mac, Web-TV eller andra), oavsett vilket färgdjup det eller det systemet fungerar med. Denna mångsidighet kan uppnås med en begränsad palett på 216 färger, som inkluderar alla vanliga färger som används både i Windows och till exempel i MacOS. Att designa en webbplats i en universell palett garanterar en konsekvent, plattformsoberoende och hårdvaruoberoende skärm. Dessutom använder GIF-formatet ett förlustfritt komprimeringsschema (med en enkel upprepningskodningsalgoritm: en sekvens av byte av samma färg ersätts av ett ord på två byte, varav en innehåller ett fyllningsmönster, och den andra bestämmer antalet av upprepningar), så att grafiska data i detta format inte förlorar information under komprimering och återställning.

   Men just på grund av dessa inbyggda färgbegränsningar kan GIF-formatet endast användas för de bilder som har ett begränsat antal färger, såsom svartvita scheman eller de som innehåller stora ytor i en färg, till exempel tecknade ramar eller digitala teckningar med en färgfyllning. Naturligtvis kan du spara vilken bild som helst i GIF-format genom att tillämpa den så kallade utjämningen av färgtoner (dithering) och på så sätt få en tillräckligt hyfsad kvalitet, men i det här fallet riskerar du att "köra på" en betydande ökning av filstorleken efter applicering de ovan beskrivna m(i det degenererade fallet, när det inte finns några intilliggande upprepningar i bilden, får du en ökning av filen exakt två gånger jämfört med det okomprimerade originalet).

   Således är de främsta fördelarna med GIF-formatet användningen av förlustfri komprimering och ekonomiskt bevarande av solida färgområden med en tydlig kant och strikta färgövergångar. JPEG-formatet skiljer sig från det som beskrivs genom att, beroende på komprimeringsnivån, solida områden förstörs där och skarpa färgövergångar jämnas ut eller tvättas ut.

   Huvudkriteriet för att välja GIF-format: om du själv ritade en bild i ett grafikpaket som Photoshop eller Painter som har stora områden med samma färg, eller bearbetade en befintlig bild och vill bibehålla hög kontrast (nödvändigt t.ex. när du visar text), spara den sedan i detta format (särskilt för svartvita eller färgfattiga teckningar).

   Använd JPEG-formatet för fotografier, videoramar eller andra fullfärgsbilder med mjuka färgövergångar (gradienter).

   Det är också viktigt att komma ihåg att om du försöker spara kontinuerliga GIF-bilder, måste du antagligen kassera så mycket information i bildförberedelseprocessen (när du konverterar den till en fast palett), och GIF:ens komprimering metod kommer att vara så ineffektiv att du också kommer att förlora ekonomiskt (både när det gäller arbetskostnader och filstorlek).

   Bland annat tillhandahåller GIF-formatet det så kallade sammanflätade utseendet (Interlaced), vilket hjälper användare med långsamma kanaler i början av mottagningen att utvärdera innehållet i bilden (effekten liknar den gradvisa ritningen av en oskarp bild) och den tid som krävs för dess fullständiga överföring, och som ett resultat acceptera beslutet om att fortsätta ta det eller om det är bättre att vägra det. Men till skillnad från progressiv JPEG är effekten här mer psykologisk än verklig (se fig.).

   Du bör också komma ihåg en viktig fördel med GIF-formatet, som i vissa fall inte kan undvaras även med alla dess brister, är stödet för transparens (förlängning GIF89a), vilket gör det möjligt att visa en siluett med icke-rektangulära konturer på en befintlig bakgrund. Transparens i GIF-formatet implementeras primitivt - en färg (vanligtvis bakgrunden) tilldelas som transparent. Denna fördel används ofta när man skapar knappar och ikoner i siddesign (JPEG erbjuder inget transparensstöd).

   Sammanfattningsvis kan vi säga följande: GIF - bästa valet för att uppnå en effektiv kompromiss mellan befintlig hårdvara och mjukvara, och möjligheten att indexera en 8-bitars GIF-bild upp till 216 universella färger är avgörande när dina bilder är avsedda att visas på flera webbläsare och okända plattformar.

   JPEG - format för fotografier och videoramar

   JPEG-formatet fick sitt namn från förkortningen av Joint Photographic Experts Group Committee (Joint Committee of Photographic Experts), som skapade denna standard i slutet av 80-talet och början av 90-talet. JPEG-formatet är baserat på en förlustkompressionsalgoritm (diskret cosinustransformering), med hjälp av vilken din bild delas in i regioner (vanligtvis 8x8 pixelrutor), inom vilka färgfördelningen ersätts av en matematisk funktion och endast koefficienterna för denna funktion lagras så att du kan återställa dess form. Naturligtvis kommer du att stöta på en viss kvalitetsförlust (beroende på komplexiteten hos den funktion som används för att ersätta bilden) och efter restaurering kommer du inte längre att få en riktig bild, utan dess matematiska "surrogat". Men beroende på kvaliteten på ditt original och graden av komprimering kan kvalitetsförlusten vara helt osynlig för tittaren. Men viktigast av allt jpeg fördel-format jämfört med GIF är att medan GIF bara är 8-bitars (256-färger), är JPEG 24-bitars och kan visa upp till 16,7 miljoner färger.

   Av denna anledning återger JPEG i fullfärg naturligtvis mycket mer videoinformation än GIF. Det här formatet är bäst lämpat för verkliga bilder - skannade bilder eller digitala fotografier, såväl som digitaliserade videoramar eller renderade 3D-datorgrafikscener.

   En annan fördel med JPEG är att den, till skillnad från GIF, låter dig ställa in mängden komprimering som tillämpas på originalbilden, vilket gör det möjligt att upprätthålla den nödvändiga balansen mellan storlek och kvalitet.

   Kompressionsförhållandena varierar kraftigt för JPEG, beroende på vilket bildredigeringsprogram som används, men webbsidor använder vanligtvis förhållanden på 10:1 eller 20:1 (uttryckt som volymförhållande till originalbilden), vilket vanligtvis ger acceptabel kvalitet. . Ändå är det möjligt att komprimera bilden upp till extrema värden på 100:1 (naturligtvis med en betydande kvalitetsförlust).

   Så när du arbetar med ett foto i JPEG-format har du möjlighet att spara en 24-bitars bild med 16,7 miljoner färger, och trots kvalitetsförlusten under komprimeringen matchar den fortfarande originalet mycket mer än en 256-färgs GIF. prestanda. I det här fallet är den oundvikliga kvalitetsförlusten mycket beroende av originalbildens storlek, kvalitet och typ.

   Dessutom låter JPEG dig definiera den så kallade progressiva visningen, det vill säga när, vid laddning, en "grov" representation av bilden omedelbart visas på skärmen, som, när mer information tas emot, gradvis förbättras (vid samtidigt kan du få den nödvändiga uppfattningen om essensen av materialet som matas redan innan nedladdningen är klar och avbryta processen i vilket skede som helst, vilket avsevärt sparar tid på att surfa på nätverksinnehåll).

   Du kan använda dessa verktyg efter behag och en sådan stegvis manifestation kan vara till god hjälp i kampen mot trängseln i kanalerna. Det enda problemet med progressiv JPEG (i motsats till interlaced GIF) är att äldre webbläsare kanske inte stöder det.

   PNG - universell rasternyhet

   Nästa generation rasterformat, PNG, har tagit de bästa egenskaperna från både JPEG och GIF och lagt till sin egen unika metod för bildpresentation, vilket gör det möjligt att bädda in i en enda fil. olika versioner samma bild för låg, medium och hög upplösning.

   PNG-formatet (Portable Network Graphics) är ett relativt nytt rastergrafikformat som har godkänts som standard av W3C-konsortiet och som gradvis bör ersätta båda "föråldrade" formaten: både GIF och JPEG. PNG erbjuder både färgindexering (upp till 256 färger), stöd för både 24- och 48-bitars färg (True-Color) och arbete med en transparenskanal (alfakanal), dessutom är det mycket effektivare än traditionell bitmappslagring format.

   Komprimeringsalgoritmen för en fullfärgsbild överträffar JPEG i kvalitet, och med stöd av en begränsad indexerad palett (upp till 256 färger) presterar det nya formatet förlustfri komprimering 10-30 % bättre än den som implementeras i GIF-formatet, vilket gör den optimal för användning i alla fall. Tyvärr tillåter det nya formatet inte att offra bildkvalitet i utbyte mot ett högre komprimeringsförhållande, som i JPEG-formatet.

   PNG-transparensstöd, till skillnad från GIF, är fullfjädrad, det vill säga du kan bygga genomskinliga bilder eller gränser, så problemet med "rena" gränser, som är så svårt att lösa när du använder transparens i en GIF-fil, är lätt att övervinna här .

   Men trots alla förbättringar som erbjuds av PNG kommer det nya formatet bara att ta fart när det används av webbdesigners och mjukvarutillverkare både för att rendera bilder i det nya formatet och för att förbereda dem för publicering. Under tiden är det ganska svårt att hitta PNG-bilder var som helst på Internet, trots att det nyligen inkluderats stöd för detta format i både Netscape Navigator och Microsoft Internet Explorer.

   Och även om de senaste versionerna och stöder PNG, de gör det på ett mycket begränsat sätt. För närvarande är den enda lösningen för användare som vill se en fullständig PNG-fil att installera ett plugin-program (som PNG Live) själva.

   Tydligen saktar utvecklarna av och väntar på att användarna ska gå över till nya format. Tja, hälsosam konservatism skadar aldrig, men vi rekommenderar ändå starkt att du gradvis går över till PNG och ersätter åtminstone alla befintliga användningar av GIF-formatet.

   Vektor representation

   Både JPEG, GIF och PNG är rasterformat baserade på en diskret (pixel eller punkt) representation av en bild, medan vektorformat är baserade på matematiska formler (geometrisk representation av former). Vektorgrafik ger betydande fördelar jämfört med raster, särskilt när det gäller diagram, text och industriell grafik (och kostnadseffektiviteten hos format är av stor betydelse för Internet).

   Så den första fördelen är den betydligt mindre storleken på vektorbilder jämfört med bitmappar, eftersom inte varje enskild pixel i bilden beskrivs, utan hela figuren (till exempel för att ställa in en cirkel måste du överföra 3-4 nummer: radie, centrumkoordinater och, kanske, typ eller tjocklek på linjen och dess attribut). De matematiska formlerna som beskriver vektorrepresentationen tar mycket mindre plats än de enskilda pixlarna och deras attribut.

   En annan viktig fördel med vektorrepresentation är möjligheten till praktiskt taget obegränsad skalning av en bild (eller detaljering av dess delar) utan någon förlust i bildupplösning eller klarhet. Ingen ansträngning krävs för att anpassa en vektorrepresentation till en viss palett, plattform, hårdvara eller design; och komprimeringsschemat och bildkvaliteten matchade utan problem.

   Men inte alla rasterbilder kan konverteras till en vektorform (till exempel fotografier, skannade bilder eller rasterteckningar är svåra att vektorisera). Men speciellt framställda vektorritningar (som streckteckningar, piktogram, tekniska illustrationer, kartor, informationsgrafik och annat som är historiskt vektorritningar) är helt enkelt dumt att rastrera för publicering på Internet, vilket är fallet idag.

   Problem med att visa vektorgrafik på World Wide Web uppstod eftersom det inte fanns någon annan visningsmetod än raster, och plugin-programmet för att visa filer i PDF-format som dök upp gav inte ordentlig arbetsflexibilitet och krävde att allt innehåll lagrades i en form - PDF.

   För att säkerställa att vektorgrafik sömlöst kan bäddas in i traditionellt HTML-format utan ytterligare programvara, övervägs för närvarande två nya vektorstandarder av W3C Standards Committee: PGML (Precision Graphics Mark-up Language) och VML (Vector Mark-up Language) . PGML stöds av Adobe Systems, IBM, Netscape och Sun Microsystems, medan VML stöds av Microsoft, Hewlett-Packard, Autodesk, Macromedia och Visio. Båda standarderna är baserade på tillägg av XML-markeringsspråket, marknadsfört för användning på webben som en efterföljare till HTML och rekommenderat av W3C för framtida användning.

   Men för närvarande stöder ingen av webbläsarna några vektorgrafikstandarder, även om plugin-program redan finns tillgängliga. Bland de mest populära sätten att visa statiska vektorbilder på webben idag är Macromedias SWF (Shockwave Flash)-format och det fortfarande underskattade Xara Flare-formatet.

   Blossa- bra beslut, som tillåter inkludering av vektorbilder som gör att du kan öka detaljnivån på en sida nästan obegränsat, medan deras storlekar är jämförbara med Shockwave Flash. Därmed inte sagt att användningen av ytterligare moduler för att visa bilder är så obekväm, men när du använder sådana verktyg på dina sidor, se till att varna användaren om detta och ge honom möjlighet att ladda ner lämplig modul innan han går till sidan som kommer att innehålla dessa element. På kort sikt kommer detta naturligtvis att bromsa surfprocessen för nya användare, men gradvis kommer du att få fler och fler anhängare, tills de lämpliga medlen äntligen ingår i nästa version En webbläsare och en extra modul kommer inte längre att behövas för nybörjare.

   Animation, interaktivitet och interaktion

   Generellt sett kan GIF-bilder ordnas som en speciell stack i en fil, och den resulterande "filmen" (blädderbok) kan spelas upp genom att skapa en enkel bitmappsanimering. Både Netscape och Microsoft har stött det "animerade" GIF-formatet sedan den tredje versionen av deras webbläsare, så deras närvaro på webben är nu svår att undvika. Många GIF-animatorer som låter dig skapa sådana GIF-stackar används ofta (både kommersiella och offentliga). Men "revitalisering" av GIF-formatet kan leda till ohanterliga filstorlekar, eftersom varje "nivå" i en sådan stack är en individuell GIF-bild, så typiska 15 bilder per sekund för datoranimering kan "producera" ett oräkneligt antal kilobyte.

   I kombination med Java eller JavaScript kan du också skapa interaktiva animationer som svarar på användaren.

   Och låt oss nu titta på andra lösningar för webbanimation och interaktiv användarinteraktion, och huvudrollen här fortsätter att spelas av Macromedia, som kom in på marknaden för länge sedan med sina Shockwave- och Flash-program och kontinuerligt förbättrar sina produkter, vilket ökar deras effektivitet i enlighet med behoven hos användare och designers. .

   Shockwave, som ursprungligen skapades som ett format för Macromedia Director, är en familj av protokoll som främst syftar till att producera interaktivt och grafiskt innehåll skapat specifikt för användning på Internet. Och Shockwave Flash är i allmänhet ett unikt verktyg och ett av de mest bättre sätt för att skapa en animation och publicera den på en webbsida. Shockwave Flash genererar mycket små filer (eftersom det använder ett övervägande vektorrepresentationsformat) och är, jämfört med andra format, det mest praktiska när det gäller förberedelser.

   När du publicerar en sådan animation på dina sidor, glöm inte att meddela användaren om detta så att han fyller på med en extra modul i förväg och förbereder sig för den tråkiga väntan på nedladdningen. Men de senaste versionerna av både Netscape Navigator och Internet Explorer ha tittare för Flash-animationer även i grundpaketet. Netscape har bekräftat att framtida versioner av Navigator kommer att ha detta stöd för Flash, även på kodnivå.

   Det slutliga beslutet är ditt

   Så attityden till presentationen av webbinnehåll förändras, nya dataformat och utvecklingsverktyg som stöder dem dyker upp. Men de gamla formaten (för att representera grafik är GIF och JPEG) är fortfarande ganska populära. De stöds av nästan alla webbläsare, och de flesta utvecklare har lång erfarenhet av att arbeta med dem. Det är viktigt att använda rätt format för din specifika applikation för att säkerställa en balans mellan bildkvalitet och filstorlekar. Till exempel kan en GIF-bild ta mer utrymme och ge ett resultat av lägre kvalitet än en JPEG-bild, medan en annan kommer att vara motsatsen.

   Men när du representerar bitmappsbilder blir PNG mer att föredra, och om du går ännu längre och försöker använda en vektorbild så står Macromedias Shockwave Flash-format till din tjänst idag.

   SWF-formatet (Shockwave Flash) är inte ett vanligt förekommande, utan ett internt vektorformat i Macromedia Flash-programmet (se "Lektioner" Macromedia Flash” på CD-ROM), så för att få din egen bild eller animation måste du köpa lämpligt multimediapaket från Macromedia, och användaren måste installera en extra modul för att visualisera resultatet. För att helt enkelt placera en vektorritning på din webbsida måste du alltså övervinna ett antal olägenheter.

   Ändå är andra vektorformat på väg, som snart kommer att bli standard.

   ComputerPress 5 "1999

   Att lägga till en bild sker i två steg: först förbereds en grafisk fil i önskat format och storlek, sedan visas filen på sidan med hjälp av elementet .

   Filformat

   Två format används ofta för webbgrafik - PNG och JPEG. Deras mångsidighet, mångsidighet, små mängder källfiler med tillräcklig kvalitet för webbplatsen, tjänade dem väl, i själva verket definierade dem som standarden för webbbilder. Utöver dem används GIF- och SVG-format på sajter.

   PNG-8-format

   PNG-8 (Portable Network Graphics, portable network graphics) är ett gratis format skapat för att ersätta GIF, där under en lång tid proprietära algoritmer användes.

   Egenheter

   • Den använder en 8-bitars palett (256 färger) i bilden, för vilken den fick siffran åtta i sitt namn. I det här fallet kan du välja hur många färger som ska sparas i filen - från 2 till 256.
   • Till skillnad från GIF visar den ingen animering.

   Applikationsområde

   PNG-24-format

   PNG-24 är ett format som liknar PNG-8, men använder ett 24-bitars färgomfång. I likhet med JPEG bevarar ljusstyrkan och färgtonen i fotografier. Liksom GIF och PNG-8 bevaras bilddetaljer som streckteckningar, logotyper eller illustrationer.

   

   Egenheter

   • Använder cirka 16,7 miljoner färger per fil, vilket är anledningen till att detta format används för fullfärgsbilder.
   • Stöder transparens på flera nivåer, detta låter dig skapa en mjuk övergång från det genomskinliga området i bilden till färgen.
   • På grund av det faktum att den använda komprimeringsalgoritmen håller alla färger och pixlar i bilden oförändrade, jämfört med andra format, har PNG-24 den största slutliga storleken på grafikfilen.

   Applikationsområde

   Foton, ritningar som innehåller genomskinliga och genomskinliga områden, ritningar med mycket färger och skarpa bildkanter.

   JPEG-format

   JPEG (Joint Photographic Experts Group) är ett populärt bildfilformat som används ofta för att skapa webbplatser och lagra foton. JPEG stöder 24-bitars färg och behåller ljusstyrkan och färgtonen i foton oförändrad. Detta format kallas förlustkomprimering eftersom JPEG-algoritmen selektivt avvisar data. Komprimeringsmetoden kan introducera förvrängning i bilden, särskilt om den innehåller text, fina detaljer eller skarpa kanter. JPEG-formatet stöder inte transparens. När du sparar ett foto i det här formatet fylls genomskinliga pixlar med den angivna färgen.

   

   Egenheter

   • Antalet färger i bilden är cirka 16,7 miljoner, vilket är tillräckligt för att bibehålla bildens fotografiska kvalitet.
   • Det huvudsakliga kännetecknet för formatet är "kvalitet", vilket låter dig kontrollera den slutliga filstorleken. Kvalitet mäts från 0 till 100, ju högre värde, desto bättre är bilden, men filstorleken ökar också.
   • Stöder en teknik som kallas progressiv JPEG, där en lågupplöst version av en bild visas i visningsporten innan själva bilden är helt laddad.

   Applikationsområde

   Används främst för fotografier. Inte särskilt lämplig för ritningar som innehåller genomskinliga ytor, små detaljer eller text.

   GIF-format

   GIF (Graphics Interchange Format) är ett grafiskt filformat som används ofta för att skapa animerade bilder. GIF använder 8-bitars färg och komprimerar effektivt enfärgade områden med bibehållen bilddetaljer.

   

   Egenheter

   • Antalet färger i en bild kan vara från 2 till 256, men det kan vara vilken färg som helst från 24-bitarspaletten. GIF-filen kan innehålla genomskinliga områden. Om en annan bakgrund än vit används kommer den att synas genom "hål" i bilden.
   • Stöder bildruta för bildändring, vilket gör formatet populärt för att skapa enkla animationer.
   • Använder en förlustfri komprimeringsmetod

   Applikationsområde

   Text, logotyper, illustrationer med skarpa kanter, animerad grafik, bilder med genomskinliga ytor, banderoller.

   SVG-format

   SVG (Scalable Vector Graphics, skalbar vektorgrafik) är ett vektorformat där bilden inte består av pixlar, utan av objekt och kurvor. Av denna anledning är den inte lämplig för rasterfotografier som består av prickar, men den är utmärkt för illustrationer som innehåller distinkta konturer.

   Egenheter

   • Bilder i SVG-format kan skalas så mycket du vill utan att förlora bildkvalitet.
   • Filstorleken är vanligtvis liten.
   • Stöder animation och interaktivitet.

   Applikationsområde

   Text, logotyper, illustrationer med skarpa kanter.

   Lägger till en bild

   Ett element används för att lägga till en bild på en webbsida. , vars src-attribut anger adressen till grafikfilen. Den allmänna syntaxen för att lägga till en bild är följande.

   "alt="(!LANG:<альтернативный текст>!}">

   Både src- och alt-attributen krävs.

   Attributet src anger sökvägen till grafisk fil, antingen en absolut eller en relativ adress kan användas för att ange den. Överväg sedan några olika sätt, hur man bestämmer sökvägen till en bild för att placera den på en webbsida. Som ett exempel, låt oss ta en fil som heter target.png , som lagras i mappen bilder på webbplatsens rot.

   http://example.ru/images/target.png
   Om adressen börjar med ett protokoll (http:// eller https://), så är det en absolut adress. Bilden kommer alltid att laddas ner från den angivna internetadressen, även om webbsidan är sparad på den lokala datorn.

   //example.ru/images/target.png
   Detta är bildens absoluta adress utan att ange protokollet. Webbläsaren kommer självständigt att ersätta det nödvändiga protokollet som webbplatsen körs på (http:// eller https://). Observera att dessa typer av adresser inte fungerar på lokala webbsidor, utan endast på Internet under kontroll av en webbserver.

   /images/target.png
   Om det finns ett snedstreck (/) i början av adressen betyder det att mappen bilder finns i roten på webbplatsen. En mapp kan vara kapslad i en annan, så sökvägen kan öka. Till exempel betyder /assets/images/target.png att assets-mappen är placerad i roten av webbplatsen, den innehåller images-mappen, i vilken target.png-filen finns.

   ../images/target.png
   De två snedstrecket framåt (../) indikerar att bildmappen är en nivå högre i mappstrukturen än HTML-dokumentet. På fig. Figur 1 visar filen source.html där target.png-bilden måste infogas.

   

   Ris. 1. Filplacering

   images/target.png
   Mappnamnet utan några punkter i början av adressen indikerar att HTML-dokumentet och mappen med bilden är på samma nivå (fig. 2).

   

   Ris. 2. Filplacering

   target.png
   Det enda filnamnet anger att bilden och webbsidan finns på samma plats (Figur 3).

   

   Ris. 3. Filplacering

   Exempel 1 visar flera sätt att lägga till en bild på en webbsida.

   Exempel 1: Lägga till bilder

   

   

   

   

   Alternativ text

   Alternativ text är en viktig del av bilderna och är avsedd för synskadade som inte kan se bilderna och få information från sajten med hjälp av sin hörsel. Särskilda skärmläsare läser text från sajten, och istället för bilder uttalar de texten skriven i alt-attributet. I vanliga webbläsare visas alt-innehållet endast när bilder av någon anledning inte visas på webbsidan.

   Alt-attributet ska beskriva bildens innehåll, och om bilden har en dekorativ funktion och inte har någon meningsfull betydelse, lämna då alt tomt (exempel 2).

   Exempel 2: Använda alt

   

   

   Om bilder kräver en synlig cue, bör du använda attributet global title, som kan läggas till alla element, inte bara bilder. När du håller muspekaren över bilden visas text som innehåller värdet för title-attributet (exempel 3).

   Exempel 3: Använda titel

   

   Utseendet på verktygstipset beror på den specifika webbläsaren och kan inte ändras. På fig. 2 visar ett verktygstips i webbläsaren Firefox.

   

   Ris. 2. Typ av verktygstips

   Ändra storlek på en bild

   För att ändra storlek på ett elements bild attributen bredd (bredd) och höjd (höjd) tillhandahålls. Pixlar eller procentsatser används som värde. Exempel 4 visar hur man lägger till dessa attribut till .

   Exempel 4. Ritningsmått

   

   
   

   Bredd- och höjdattributen är valfria, efter att bilden har laddats ställer webbläsaren automatiskt in sin ursprungliga storlek. I grund och botten används dessa attribut för följande ändamål:

   • reservera en plats för en bild;
   • minska storleken på stora foton;
   • förbättra bildkvaliteten för Retina-skärmar.

   Om bildmåtten är explicit specificerade använder webbläsaren dem för att visa det tomma område som motsvarar bilden under inläsningen av dokumentet. Annars väntar webbläsaren på att bilden ska laddas helt och ändrar sedan bildens bredd och höjd. I det här fallet kan textomformatering förekomma, eftersom bildens storlek från början inte är känd och den automatiskt ställs in på liten.

   Bildens bredd och höjd kan ändras både uppåt och nedåt. Webbläsaren kommer automatiskt att ta bort de extra pixlarna, eller vice versa, komplettera de saknade för att få en bild i lämplig storlek. Kvaliteten på den resulterande bilden beror mycket på dess innehåll, i alla fall måste vi komma ihåg att det bara är möjligt att förstora en bild utan förlust av detaljer i en film.

   Retina-skärmar har en hög pixeltäthet och bilddetaljer, så vanliga bilder ser lite urtvättade ut. För att förbättra kvaliteten har bilderna fördubblats i storlek. Till exempel, om en webbsida kräver ett foto med en bredd på 400 pixlar, tar vi ett foto med en bredd på 800 pixlar, men lämnar en bredd på 400 pixlar i värdet för width-attributet.

   Bredd- och höjdattributen behöver inte gå ihop. Om något av dessa attribut inte anges, kommer webbläsaren automatiskt att ersätta det önskade värdet baserat på bildens bildförhållande.

   

   På grund av det faktum att vi oberoende ersätter bildens bredd och höjd, kan vi avsiktligt förvränga dess proportioner genom att sträcka bilden vertikalt eller horisontellt.

   

   Förutom pixlar kan procentsatser användas som storlekar. I det här fallet är bredden i förhållande till det överordnade elementet.

   

   Det finns svårigheter med höjden i sådana fall, eftersom bildens höjd i procent endast beaktas när höjden på dess förälder är explicit definierad. Om höjden på det överordnade elementet inte anges på något sätt, ignoreras posten som height="100%".

   Det finns hundratals bildformat, men endast ett fåtal stöds av webbläsare. I den här artikeln kommer vi att beskriva de olika grafiska filformaten som är tillgängliga för webbdesigners och i vilket fall de ska användas.

   Grafiska filformat som stöds av de flesta populära webbläsare är: Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) och vektorgrafik. Några egenskaper hos grafikfiler:

   • Transparens – den här egenskapen gör att bilden kan vara i varierande grad av transparens från solid state till helt transparent.
   • Komprimering - Den här egenskapen gör att en bild kan lagras i en mycket mindre fil, med hjälp av matematiska algoritmer för att behandla en grupp pixlar som ett enda element.
   • Vävning - gör att bilden laddas först på udda linjer och sedan på jämna linjer. Detta gör att besökaren kan se bilden tidigare.
   • Animation - skapar rörelser genom en serie av på varandra följande bilder. Animerad GIF kräver inget webbläsarplugin och kan fungera på nästan alla enheter.
   • Progressiv laddning liknar vävning genom att den endast laddar en del av bilden initialt, men inte baserat på alternerande linjer.

   GIF grundades 1980 och antogs av webbdesigners i början av 1990-talet som den viktigaste grafiskt format för webbsidor. GIF-filer använder en komprimeringsalgoritm som håller filstorleken liten för snabb laddning. GIF är begränsat till 256 färger (8 bitar), stöder transparens och sammanflätad grafik. Det är också möjligt att skapa animerad grafik med detta format. Alla webbläsare kan visa GIF-filer utan problem.

   Fördelar med GIF:er:

   • Det mest stödda grafikformatet
   • Diagram ser bättre ut i detta format
   • Transparensstöd

   Filerna är komprimerade men stöder "true colors" (24 bitar) och är det föredragna formatet för fotografier där kvaliteten är mycket viktig. JPEG stöder det progressiva formatet, vilket gör att du nästan direkt kan se bilden, vilket kommer att förbättras i kvalitet när nedladdningen är klar.

   Till skillnad från GIF-filer kan webbdesigners hantera komprimerade filer JPEG, som möjliggör olika nivåer av bildkvalitet och filstorlekar.

   Fördelar med JPEG:

   • Större komprimering innebär snabbare nedladdningshastigheter.
   • Ger utmärkt kvalitet för fotografier och intrikata teckningar.
   • Stöd för 24-bitars färg.

   PNG är ett relativt nytt format som har introducerats som ett alternativ för GIF-filer. PNG stöder upp till 24-bitars färg, transparens, väv och kan innehålla en kort textbeskrivning bild som används i sökmotorer.

   Fördelar med PNG:

   • Övervinner GIF:s 8-bitars färgbegränsningar
   • Tillåter textbeskrivning av bilder för sökmotorer
   • Stöder transparens
   • Schemat ser bättre ut än JPEG

   Vektorgrafik

   De flesta webbgrafik är bitmappar eller ritningar som består av ett rutnät av färgade pixlar. Illustrationer ska skapas i vektorgrafik, som består av en matematisk beskrivning av varje element som utgör bildens linjeformer och färger. Vektorgrafik skapas genom att använda program som t.ex Adobe Illustrator eller CorelDRAW. Vektorgrafik måste konverteras till valfritt GIF-, JPEG- eller PNG-format för användning på webbsidor.

   Vilket format ska användas?

   En webbdesigner kan välja antingen GIF- eller JPEG-format för de flesta användningsområden. Men eftersom GIF-filer tenderar att vara små jämfört med JPEG-filstorlekar, kommer de flesta webbdesigners att använda GIF-formatet för bakgrunder, rutor, ramar och all annan grafik som ser bra ut med 8-bitars färg.

   De flesta designers kommer att välja JPEG-format för fotografier och illustrationer där komprimeringen inte äventyrar bildens visuella kvalitet.