ModerskeppetArtiklar

Välj rätt filformat för webben

När du sparar dina bilder för webben finns det några enkla saker som avgör vilket filformat du ska välja. Idag väljer du mellan JPEG och PNG.

Anders Sejdeborn

Förr sa man att det finns tre möjliga filformat för bilder som ska laddas upp på webben – JPEG, PNG och GIF. Men en rackare har trillat bort med tiden. GIF har blivit utdaterat.

Var inte orolig, GIF funkar fortfarande bra. Men idag finns inget 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 när det gäller animationer håller GIF på att förpassas till minnens allé tack vare HTML5-kod och liknande tekniker.

JPEG är i allmänhet det bästa alternativet

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 dock 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) i bilden.

PNG finns i två varianter

8-bitars PNG

Välj Mindre fil när du exporterar i Photoshop. Då får du 8-bitars PNG istället för 24.

När du sparar som PNG, exempelvis via Photoshops Exportera som-alternativ, kan du välja att spara som PNG-8 istället för det förinställda PNG-24.

Den viktigaste skillnaden är antalet färger. PNG-8 klarar bara 256 färger medan PNG-24 klarar 16,7 miljoner, vilket är lika många som JPEG.

Använd PNG-8 för enkel grafik

Har du grafik med ett fåtal färger ska du använda PNG-8. Du får riktigt små filer och kvaliteten blir helt perfekt. Till skillnad från JPEG använder nämligen PNG en komprimering som inte påverkar kvaliteten negativt.

Moderskeppets raket i filformatet PNG

PNG-8 klarar inte många färger

Har du grafik med färger som tonar in i varandra kan PNG-8 ge problem. Med en palett av endast 256 färger blir det ofta synliga skarvar mellan färgfälten.

PNG klarar inte många färger

I bildens faktiska storlek är det dock inte alltid supersynligt. Kika i bilden nedan för att jämföra.

PNG-8 jämfört mot PNG-24

Behöver 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 transparens (genomskinlig bakgrund) har du inget val. PNG-8, liksom gamlingen GIF, saknar nämligen stöd för det*.

GIF, PNG-8 och PNG-24 i en jämförelse

Sammanfattning

  • JPEG. Fotografiska bilder utan transparens.
  • PNG-8. Enkel grafik med få färger.
  • PNG-24. Fotografiska bilder med transparens. Grafik med mycket övertoningar (JPEG i hög kvalitet funkar också).

* 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. 

Var trygg i att du har rätt inställningar

Att förbereda och spara bilder på rätt sätt kan kännas svårt, oavsett om de ska laddas upp på din egna blogg eller skickas till tryck på en tidning.

I kursen Bildleverans lär du dig hantera färgrymd, skärpa, metadata, filformat och upplösning för att hitta de optimala inställningarna i olika fall.

Senast uppdaterad: 3 maj 2024