Bildkompression

GIF (Graphic Image File Format)
GIF skapades av Compuserve 1987 och är det äldsta bildformatet på webben. GIF använder kompressions-algoritmen Lempel-Ziv-Welch, eller LZW. Kompressions-schemat är icke förstörande vilket innebär att komprimerade bilder ser ut exakt som originalet. Formatet är för bilder upp till 8-bitars färgdjup (256 färger). Vad betyder nu 8-bitars färgdjup? Jo, de färger du ser på din skärm är datorns förmåga att blanda de tre grundfärgernas (Röd,Grön och Blå) intensitet (styrka). För varje grundfärg kan din dator visa upp till 256 olika variationer av färgens intensitet beroende av hur många bitar den definierar i varje nivå av grundfärgerna. För att kunna visa 256 variationer av varje grundfärg måste din dator kunna visa 24-bitars färgdjup. Den visar då 256 variationer av vardera grundfärg med hjälp av 8 bitar i varje färg. Med tre färgkanaler som visar 8 bitar blir det (3x8=24) 24 bitars färgdjup, med andra ord kan du se 16 777 216 färger på din skärm. Låter det krångligt? Det hela handlar om det binära...som du kanske vet så kan ju datorns minne bara lagra en 1:a eller 0:a, och när vi pratar om färg betyder 1 svart och 0 vitt. För att kunna välja mellan flera färger på en pixel måste man lagra flera värden än 1 och 0.

Antal bitar	Möjliga färger
1	2
4	16
8	256
16	65 536
24	16,7 milj.

Vi vet att det är långt ifrån alla datorer/skärmar som kan visa miljontals färger, de flesta idag har en dator med 8-bitars färgdjup, alltså kan den bara visa 256 färger och det är ett av problemen när man gör bilder för webben idag. Normalt så innehåller en 8-bitars bild en rad av "datainformation" mellan 0 (svart) och 255 (vitt). För att spara bilden så är det också nödvändigt att tala om hur många pixlar den är bred och hög, så att den kan laddas ner när som helst, om och om igen. En bild som är 120 pixel bred och 90 pixel hög behöver 120x90=10800 bitar videominne (VRAM). Det skulle också ta 10800 bytes av din hårddisk plus lite extra för all information filen behöver för att kommunicera med systemet.
Om du sedan skulle börja studera "datainformationen" i bilden skulle du upptäcka att en mängd data var likadana. En bild med stora ytor av svart och vitt skulle ha en mängd 0:or och 255:or. Istället för att spara hundratals 0:or är det lättare att säga att de nästa 288 pixlarna har ett värde av 0 - det kostar bara några byte i minne. Detta kallas "run length encoding" och det är den som är det fundamentala för GIF och många andra bildformat.

Det finns två typer av GIF format:
GIF87a: stöder interlace och lagrar mångfaldiga filer.
GIF89a: utökar GIF87a specifikationer med transparens, text kommentarer och animationer av text och grafik.

Interlacing
Normalt så lagrar GIF pixel från toppen till botten i en bild. En Interlace bild lagrar pixel i rader. När det första blocket har laddats ner i din browser så blir det en slags "rullgardin" effekt där bildens upplösning växer fram allteftersom, tills dess hela upplösning visas. Det gör att betraktaren får en grov förhandsbild som blir bättre och bättre allteftersom bilden laddas ner.

Transparens
I en GIF 89a bild kan du göra en färg transparent. Webläsare som stöder GIF 89a formatet kommer då att göra den färg du valt transparent och bakgrunden kommer att "skina" igenom.

Tänk på att inte använda Interlacing och transparency i samma bild, då det finns webläsare som har problem att ladda ner sådana bilder. Interlace gör också filerna lite större så om du har filer som är mindre än 200x200 pixel laddar dom ner snabbare om du inte använder interlacing.

PhotoGIF tar bort alla oanvända färger som inte används från vald färgpalett. Om du använder Adobes GIF89a Export, gå tillbaka till RGB läge (efter att du gjort om bilden till dekorfärg ) och gör bilden till dekorfärg igen men använd alternativet "Exakt palett". Då finns ingen onödig färginformation lagrad.

Animerad GIF
GIF formatet har också en funktion som gör att man kan göra flera filer till en enda animation. Animerade GIF är lätta att göra, gör alla bilder i PICT eller BMP och kör dom i ett GIF-builder program. Programmet kommer att reducera färger till en palett som passar alla bilderna och packa dom som GIF för att skapa en enda animerad GIF fil. Om du använder GIF istället för PICT, var säker på att alla bilder har samma färgpalett. Du kan använda transparens i dina bilder och specificera hur dom ska uppträda allt eftersom dom laddas in. Ett problem med animerade GIF är att även om det bara skiljer en liten pixel mellan bildrutorna så går det inte att komprimera så att bara pixel-skillnaden märks, varje bild i filmen lagras i sin hela storlek. Tänk på att filstorleken kan rusa iväg när du gör en animerad GIF.

PNG(ping)
PNG är ett bildformat som står för Portable Network Graphics och har nu officiellt blivit en rekommendation från W3C. GIF-formatet blev inte så populärt runt nyårsafton 1995 när Unisys och CompuServe plötsligt annonserade att "verktyg" som använde GIF skulle belastas med royalties, eftersom Unisys' patent på LZW kompression metoden användes i GIF formatet.
PNG skapades och har samma funktioner som GIF med undantag av en, "multipla" bilder, som används för att kunna göra flera bilder till en fil. PNG har många kvalitŽr som är förbättringar jämfört med GIF, såsom tvådiminsionell interlacing och vertikal kompression, gammakorrigering plus full alfakanal, true color support och feldetektor (för "läsfel" vid överföring på nätet).

Idag är det inte många webläsare som klarar av att läsa PNG, men det kommer. Bl.a Netscape 4.0 kommer att stödja PNG. Idag finns det plug-ins att hämta till Netscape och Explorer.

Bättre Kompression och Interlacing
PNG använder deflate/inflate kompression som också används av pkzip (till alla tekniska vänner som vet vad det innebär). PNG beter sig som GIF när den komprimerar i horisontella mönster men PNG hittar även vertikala mönster vilket resulterar i ytterligare komprimering. PNG använder 7-pass interlacing schema som visar en igenkänlig bild mycket snabbare än en interlace GIF-bild. Du som användare ser nästan på en gång en 1/64 bildkvalitŽ bild följande av en 1/32, 1/16, och så vidare. Resultatet bli en fullt skönjbar bild åtta gånger snabbare jämfört med en interlaced GIF. Detta förbättrade interlace schema adderar ca 7 procent till filstorleken. PNG passar utmärkt till imagemaps eftersom man kan se vad som är "klickbart" efter den första 1/64 nerladdningen.

True Color och Transparens
PNG stödjer upp till 16 bitar (gråskala), paletter , 48 bitar(true color) per pixel och upp till 16 bitars alfakanalsdata. Och vad är nu alfakanaler? Jo, alfakanalen är kanske mest känd som "mask-kanalen" i tex. Photoshop. I praktiken så är det alfakanalen som gör det möjligt att välja transparens i en bild. Istället för att spara tre bitar för varje pixel (röd,grön och blå) är nu fyra sparade: röd, grön, blå och alfa, (RGBA). Variabel transparens ger dig möjlighet att skapa "specialeffekter" som ser bra ut mot alla bakgrunder. En fotovinjett kan skapas genom att göra delar av den ogenomskinlig och dom yttre områdena fullt genomskinliga, och en mjuk övergång mellan de olika områdena. När du tittar på bilden med en webläsare som stödjer PNG kommer du att se en bild med mjuk övergång till vitt när den visas mot vit bakgrund, eller en mjuk övergång till svart mot en svart bakgrund. Borta är "spök-kanterna" som är alltför vanliga på dagens websidor.

Gamma korrigering
De flesta webdesigners är förmodligen medvetna om att bilder gjorda på en Mac ser mörkare ut på en PC, och att bilder gjorda på en PC ser för ljusa ut på en Mac. En bild som ser bra ut på en SGI arbetstation ser inte bra ut på varken en Mac eller PC, till och med en bild som är gjord på en PC ser inte ut likadan på alla PC's. Vad som behövs är en bildfil som innehåller "maskin-läsbara" detaljer om att en gammakorrektion har tillförts.

TIFF filer kan innehålla mycket exakta överflyttnings kurvor även om de flesta i praktiken inte gör det.. PNG har också möjligheten att "spela in" varje tillförd gammakorrektion. Gamma mäter kontrasten som påverkar mellantonerna i en bild. Om du justerar gamma kan du ändra intensitetsvärdena i det mittersta omfånget av gråtoner utan att du dramatiskt ändrar skuggor och högdagrar (de jusa partierna i en bild). Om en bild är under- eller över gammakorrigerad så påverkar det också färgbalansen. Överkorrektion (med syftet att göra mellantoner ljusare) ändrar färger mot neutralt grått, medan underkorrektion (med syftet att göra mellantoner mörkare) ändrar färger mot att visa primärfärgerna. PNG låter dig välja och bestämma gammainformationen, den informationen kommer att automatiskt justeras på besökarens skärmar. PNG uppför sig liknande GIF, därför gäller det här att också försöka ha enfärgade ytor för att förhindra gitter, som även gör PNG's kompression mindre effektiv.

JPEG
JPEG är faktiskt en kompressions algoritm och inte ett filformat, filer som kallas JPEG på nätet är egentligen JFIF (JPEG File Interchange Format). JPEG fungerar med 24 bitars bilder och tar inte hänsyn till om din skärm kan visa korrekta färger eller inte. Om du har ett grafik kort eller inbyggt videominne som hanterar 24-bitar (True Color) kan du se bilder med alla dess fina färgnyanser. Om skärmen bara visar 8-bitar gittrar (krackelerar) bilden men försöker att återge bilden i 256 färger så bra som möjligt. Där en GIF-bild ser exakt likadan ut på en 8 eller 24 bitars skärm, ser en JPEG bild fantastisk ut på 24-bitars men mindre bra på en 8-bitars, därför att komprimeringstekniken är optimerad för snabbhet, inte för kvalité.

JPEG komprimerar bilder med ett intelligent "ta bort bitar" av information för att reducera filstorlek. Denna process kallas "förstörande" därför att man förlorar bildens återgivning genom att förenkla bildinformationen. Du kan välja hur mycket information du vill kasta bort med JPEG kompressionen, det är ett val mellan kvalité och filstorlek och måste bedömas utifrån bilden. Förslagsvis, välj en kompression av graden 10:1, den visar en liten försämring av bildkvalitén medan 100:1 gör att du förlorar alla fina detaljer och färger, kvar finns bara stora block av färg. Annan mystisk information på bilden kan dyka upp om du komprimerar en bild kraftigt, svarta prickar etc. Det är möjligt att göra mindre filer med JPEG än med GIF om du är beredd att acceptera en kvalitéförlust. Som en generell regel är det bäst att använda GIF för grafiska bilder, ikoner, knappar, logotyper och mindre fotografier. JPEG är bäst för fotografier. På en 8-bitars skärm tenderar GIF bilder att se bättre ut än JPEG men på en 16 eller 24-bitars sämre. Kom ihåg att de flesta använder 8-bitars skärmar!

Liknande GIF's intelacing så laddar progressive JPEG's ner i omgångar för att slutligen nå den bästa upplösningen. Det är inte alla webläsare som stöder progressive JPEG, Netscape 2.02 och nyare, Explorer 3.0 gör det också.