Bitmappsgrafik

En bild på en webbsida består egentligen av en mängd punkter, kallade pixlar. Ett bildformat är det sätt som dessa pixlar beskrivs på i en datafil. Bitmappsgrafik har information om varje pixel som är lagrad i filen. De populäraste filformaten för webbilder är GIF, JPEG och PNG.
Fördelen med bitmappar är att de generellt är enkla att visa för webbläsaren, då den bara behöver läsa varje databit i en bildfil och rita en pixel enligt den. De är också bra för bilder med tonförändringar som fotografier eller konstverk med mjuka och otydliga kanter.
Nackdelen med bitmappar är att en stor bitmapp tar upp mer minne än en liten bitmapp som har samma antal färger. Detta innebär också att den stora bitmappen tar längre tid att ladda ned än den lilla.
Ett annat problem med bitmappar är när man försöker skala bitmappen, dvs. göra den större eller mindre, kan det som tidigare såg ut som en rak linje eller en mjuk kurva plötsligt se tandat ut eller ha sprickor. Några smarta algoritmer kan förbättra utseendet på skalade bitmappar, men eftersom bitmappen arbetar med pixlar blir linjeorienterad konst lidande.
En av de största skillnaderna mellan bildformaten är det sätt på vilket de minskar storleken på filerna, dvs. den typ av bildkompression som används.
Det finns två huvudsakliga kompressionstyper: icke-förstörande kompression och förstörande kompression. Icke-förstörande kompression innebär att även när den grafiska filen är komprimerad, förlorar den inte i kvalitet. Den förstörande kompression innebär att informationen går förlorad när den grafiska filen komprimeras.

• Icke-förstörande kompression
  • GIF
  • PNG
• Förstörande kompression
  • JPEG
• Mobila klienter
  • WBMP

Icke-förstörande kompression

GIF komprimering

GIF (Graphic Interchange Format) utvecklades av CompuServe i slutet på 1980-talet för att lagra och leverera grafik över online-nätverk. GIF använder ett kompressionsschema kallat LZWF (Lempel-Ziv & Welch). Det finns olika GIF-standarder, nämligen GIF87a och GIF89a. Dessa filformat är standard-MIME (Multimedia Internet Mail Extensions-typer) i de flesta läsarna.
Filformatet GIF stödjer 8-bitsfärg, dvs. en GIF-bild kan innehålla maximalt 2⁸ eller 256 färger. För att kunna optimera kvaliteten på GIF-bilder, måste man definera vilka färger som finns i 256-fäger-paletten.
Icke-förstörande kompression innebär att GIF-kompressionsalgoritmen inte orsakar sämre bildkvalitet när bilden komprimeras. Komprimering av en bild med 16 miljoner färger till en med 256 färger, kommer emellertid att leda till sämre bildkvalitet.
Det finns tre speciella typer av GIF-bilder:

Transparenta GIF:ar

GIF använder enkelbitsmaskning för att skapa transparens. Detta betyder att man kan ange en färg spm representerar transparens och transparensen är antingen "på" eller "av" för en pixel. Genom att välja en transparent eller genomskinlig färg kommer färgen under den transparenta att lysa igenom. Fördelen med att använda transparenta GIF:ar är att man kan skapa bilder som ser ut att flyta över webbsidan och dessutom kan man skapa bilder som inte är fyrkantiga.

GIF utan genomskinlighet	GIF med genomskinlighet

Sammanflätade (Interlaced) GIF:ar

Traditionella GIF-bilder lagrar bilder en rad i taget, från överkant till underkant. Detta innebär att webbläsaren ritar bilden en rad i taget, från överkant till underkant. Med sammanflätade GIF-bilder lagras icke angränsade linjer tillsammans. Effekten blir att bilden ser suddig ut från början men blir sedan stegvis mindre suddig tills bilden till slut är i fokus. Sammanflätade GIF:ar hjälper användaren att få en någorlunda uppfattning om bilden utan att behöva vänta på att hela bilden visas. Tyvärr gör sammanflätning ofta texten i en bild oläslig tills hela bilden har återgivits, vilket gör sammanflätade GIF:ar oanvändbara för små bilder eller bilder med mycket text (t.ex. navigationsfält och knappar). Sammanflätning lämpar sig bäst för större bilder och bilder utan text (t.ex. illustrationer och fotografier).

Länk till en sida med en sammanflätad GIF.

Animerade GIF:ar

Man kan kombinera en samling GIF-bilder i en fil och spela upp varje bild i sekvens, en i taget, för att skapa enkla bildspel. Varje bildruta (frame) kan ha sina speciella GIF-funktioner. Animationen kan spelas upp en gång, spelas kontinuerligt eller repeteras ett specifikt antal gånger.

Testa olika animationer genom att klicka på knapparna.

Filformatet är mest lämpligt för komprimering av logotyper, illustrationer eller teckningar (såväl enstaka bilder som animeringar). Själva komprimeringsalgoritmen letar efter ändringar utefter en horisontell axel och när den hittar en ny färg läggs denna till filstorleken. Med bitmappsgrafik blir filstorleken större ju större bilden är.

Bildstorlek: 54x75	Bildstorlek: 72x100	Bildstorlek: 90x125	Bildstorlek: 108x150
Förändring: -25%	Originalstorlek	Förändring: +25%	Förändring: +50%
Filstorlek: 2,00 kB	Filstorlek: 2,34 kB	Filstorlek: 4,59 kB	Filstorlek: 6,02 kB
Förändring: -15%	Originalstorlek	Förändring: +96%	Förändring: +157%

Eftersom filformatet GIF stödjer upp till 8 bitars färgdjup, kan en GIF-bild ha mellan 2 och 256 färger. Genom att reducera antalet möjliga färger för varje pixel, reducerar man även den totala storleken på filen.

256 färger	128 färger	64 färger	32 färger
Filstorlek: 12,85 kB	Filstorlek: 10,36 kB	Filstorlek: 7,94 kB	Filstorlek: 6,23 kB
Original	Förändring: -19%	Förändring: -32%	Förändring: -52%
16 färger	8 färger	4 färger	2 färger
Filstorlek: 4,71 kB	Filstorlek: 3,65 kB	Filstorlek: 2,61 kB	Filstorlek: 1,53 kB
Förändring: -63%	Förändring: -72%	Förändring: -80%	Förändring: -88%

När korrekt återgivning av färg är viktig, kan man använda sig av gitter (dithering). Denna metod innebär att olikafärgare pixlar används i en bild för att simulera en färg som inte existerar i bildens färgpalett. Detta innebär också att filstorleken kommer alltid att bli större än originalbildens.

Originalbild	GIF-bild	GIF-bild med gitter
Filstorlek: 2,45 kB	Filstorlek: 6,40 kB	Filstorlek: 8,65 kB

Kantutjämning är ett sätt för att mjuka upp kantiga linjer genom att lägga till pixlar av olika färger. Detta medför dock att filstorleken ökar.

PNG komprimering

PNG (Portable Network Graphics) har utvecklats som ett patentfritt alternativ till filformatet GIF. PNG erbjuder många av de möjligheter som man hittar i lite äldre grafiska filformat, t.ex. true color, indexerad färg och gråskaligt bildstöd, alfakanaltransparens samt gamma-korrigering. Liksom GIF, använder filformatet PNG ett icke-förstörande komprimeringsschema.

Bildstorlek: 200x160	Bildstorlek: 150x120	Bildstorlek: 100x80
Filstorlek: 17,73 kB	Filstorlek: 11,97 kB	Filstorlek: 6,66 kB
Original	Förändring: -32%	Förändring: -62%

Till skillnad från GIF och JPEG, kan PNG lagras på olika bitdjup. Med filformatet PNG kan man välja mellan tre olika bitdjup: 8-bitars färg, 24-bitars färg eller 32-bitars färg. Ju högre bitdjup, desto högre färgöverensstämmelse och desto större filstorlek. PNG-filerna blir oftast större än motsvarande JPEG-filerna för samma bild.

JPEG-bild	GIF128-färger	GIF256-färger
Filstorlek: 2,61 kB	Filstorlek: 6,03 kB	Filstorlek: 7,35 kB
PNG8-bild	PNG24-bild	PNG32-bild
Filstorlek: 4,33 kB	Filstorlek: 20,68 kB	Filstorlek: 24,03 kB

Filformatet PNG är mera flexibelt än GIF på grund av att det använder en 8-bits alfakanal för transparens. Det betyder att man kan använda upp till 256 färger för att representera olika nivåer av partiell transparens: från dunkel till genomskinlig. PNG-filformatet är mycket kraftfullt och flexibelt, men har fortfarande begränsad stöd i webbläsare.

PNG utan genomskinlighet	PNG med genomskinlighet

Förstörande kompression

JPEG komprimering med 24 bitars färgdjup

JPEG (Joint Photographic Expert Group) är utvecklat speciellt för att lagra fotografier och fotografiliknande bilder med gradvis färgövergång. Filformatet JPEG lagrar färginformation med hjälp av 24 bitar per pixel. Det innebär att en JPEG-bild kan innehålla mer än 16,7 miljoner färger.

Bildstorlek: 150x120	Bildstorlek: 100x80	Bildstorlek: 50x40
Filstorlek: 5,45 kB	Filstorlek: 3,00 kB	Filstorlek: 1,22 kB
Original	Förändring: -45%	Förändring: -78%

JPEG-komprimeringsschemat använder perceptuella kodningstekniker. Detta innebär att JPEG- komprimeringsschemat tenderar att ta bort information i de högre färgfrekvenserna, färger som är svårare för det mänskliga ögat att upptäcka skillnaden mellan.
JPEG använder ett förstörande komprimeringsschema, vilket innebär att en del information går förlorad för att kunna minska bildfilens storlek. En matematisk teknik kallad "discrete cosine transformation" används, som gör att man kan välja hur mycket komprimering man vill använda för bilden. Denna flexibilitet är vanligtvis inbygd i grafikverktyg och tillåter en kompromis mellan filstorleken och den slutliga bildkvaliteten.

Kvalitet 100%	Kvalitet 80%	Kvalitet 60%
Filstorlek: 44,63 kB	Filstorlek: 11,60 kB	Filstorlek: 7,17 kB
Kvalitet 40%	Kvalitet 20%	Kvalitet 5%
Filstorlek: 4,62 kB	Filstorlek: 1,78 kB	Filstorlek: 1,36 kB

p-JPEG (progressiv JPEG) är en nyare filformat som gör det möjligt att skapa fotografiska bilder som i början är suddiga och sedan progressivt blir klarare. En p-JPEG-bild lagras på ungefär samma sätt som sammanflätade GIF-bilder, dvs. bilden lagras som en rad läsningar som tillsammans utgör hela bilden.

JPEG är fortfarande det bästa vanliga komprimeringsschemat för fotografier. Genom att försiktigt balansera bildstorleken och bildkvaliteten, kan man hitta den punkt där filstorleken minskar betydligt, men med obetydligt försämring av kvaliteten.

Mobila klienter

WBMP

WBMP (Wireless BitMaP) är ett bildformat för mobila klienter. WBMP stödjer för närvarande endast monokroma bilder, dvs. svart-vita, där vit=1 och svart=0.
Eftersom vanlig webbläsare klarar inte att visa bilder i WBMP-format så visas samma bild också i BMP-format.

GIF-bild	PNG-bild	WBMP-bild	BMP-bild
Filstorlek: 633 B	Filstorlek: 753 B	Filstorlek: 1,28 kB	Filstorlek: 9,92 kB

De mobila eheter som kan visa grafik måste stödja formatet WBMP typ 0. Detta format är optimerat för att ha minimal filstorlek och fungerar bra på mobila klienter som är anknutna till Internet via en långsam uppkoppling.