Förr sa man att det finns tre möjliga filformat för bilder som ska till webben – JPEG, PNG och GIF. Men en rackare har trillat bort. GIF har blivit utdaterat.
Var inte orolig, GIF funkar fortfarande bra. Men idag finns inga bra skäl att spara vanliga webb-bilder i GIF-format. PNG klarar samma sak som GIF och ger i regel något mindre filer.
(Även för animationer håller GIF på att förpassas till minnens allé av HTML5 och liknande).
JPEG är i allmänhet det bästa
För vanliga fotografiska bilder är JPEG det givna valet. JPEG-komprimeringen håller effektivt ned filstorleken och lyckas samtidigt bibehålla rimlig kvalitet.
Det finns två situationer där PNG är ett bättre val:
- När du har enkel grafik med få färger (exempelvis logotyper).
- När du har transparens (genomskinlig bakgrund).
PNG kommer i två varianter
Photoshop ”Spara för webben”
När du sparar som PNG, exempelvis från Photoshops ”Spara för webben” kan du välja mellan PNG-8 respektive PNG-24. Den viktigaste skillnaden är antalet färger. PNG-8 klarar bara 256 färger medan PNG-24 klarar 16,7 miljoner (lika många som JPEG).
PNG-8 för enkel grafik
Har du grafik med ett fåtal färger kör du PNG-8. Det ger riktigt små filer och kvaliteten blir helt perfekt. Till skillnad från JPEG använder nämligen PNG med en komprimering som inte påverkar kvaliteten negativt.
En annan fördel med PNG jämfört med JPEG är att formatet har stöd för transparens. Så har du exempelvis en logotyp med genomskinlig bakgrund funkar PNG-8 också finemang.
PNG-8 klarar inte många färger
Har du grafik med färger som tonar in i varandra (eller fotografiska bilder med transparens) kan PNG-8 ge problem. Med endast 256 färger blir det ofta synliga skarvar mellan färgfälten.
I bildens faktiska storlek är det dock inte alltid supersynligt:
Jagar du små filer kan skarvarna vara ett pris du är beredd att betala. Annars får du ta till PNG-24.
PNG-24 ger stora filer
Nackdelen med PNG-24 är att du kan få stora filer vilket ju inte är optimalt för webbsidans laddningshastighet.
Har du däremot varierande transparens har du inget val. PNG-8, liksom gamlingen GIF, saknar nämligen stöd för det*. Där är något antingen helt genomskinligt eller helt ogenomskinligt.
Sammanfattningsvis
- JPEG Fotografiska bilder utan transparens.
- PNG-8 Enkel grafik, få färger (med eller utan transparent bakgrund).
- PNG-24 Fotografiska bilder med transparens. Grafik med mycket övertoningar (JPEG i hög kvalitet funkar också). Alla bilder med varierande transparens.
*Faktum är att PNG-8 under vissa förutsättningar har stöd för semitransparens. Men inte i den variant som finns implementerad i exempelvis Photoshop.