- Startsida
- Kunskapsbank
- Optimera bilder för webben
Optimera bilder för webben
Redaktörstips
På webben finns tre dominerande filformat för pixelbaserad grafik (jpeg, gif och png). Den här artikeln hjälper dig att välja rätt format vid rätt tillfälle. Gör du det kan du få riktigt bra kvalitet trots liten filstorlek och därmed ge besökarna en mer optimerad upplevelse!
Fördjupning och mer information
- “Spara för webben” i Photoshop ger i de flesta fall en väldigt duglig komprimering bara man väljer rätt format och kvalitet.
- Vill man jaga de sista procenten så finns det program (Jpegoptim, OptiPNG med flera) och webbtjänster (Smushit och Kraken är de mest kända) som komprimerar ytterligare lite grann. Dessa verktyg kan i vissa fall minska storleken på en bildfil med 80% - utan kvalitetsförlust. I andra fall handlar det om ett fåtal procent.
- Om man kör Googles Pagespeed-plugin komprimerar det om grafiken på din webbplats automatiskt. Bara att ladda den upp på nytt så har du en optimerad variant av din mallgrafik.
- Bilder som skalas om eller redigeras i Sitevision sparas automatiskt som png24 - troligtvis för att det är ett så mångsidigt format samtidigt som det inte är destruktivt. Vill du optimera foton bör du alltså spara dem för webben i jpeg-format via Photoshop och inte skala om dem i systemet.
Logotyp i jpeg-format, kvalitet 40 (5,90 kb) - hårt komprimerad för att bli lika liten som png8-varianten och kvalitén blir lidande
Logotyp i png24-format (10,9 kb) - mycket bra kvalitet och klarar dessutom transparens ifall den ska ligga mot en bakgrund som inte är enfärgad. Större filstorlek än png8-diton.
Logotyp i png8-format (5,89 kb) - mycket bra kvalitet och liten filstorlek
Logotyp - Använd png8 ifall det är en logotyp med färre än 256 färger som inte kräver genomskinlighet, annars png24.
Fotografi i png24-format (130 kb) - perfekt kvalitet men väldigt stor fil
Samma fotografi i jpg-format, kvalitet 60 (24,7 kb) - bra kvalitet och liten filstorlek
De olika formaten
Av de tre dominerande formaten så är det två stycken du behöver använda och ha koll på för att komprimera bra bilder för webben - jpeg och png. Gif är i princip likvärdigt med png8 och därför utelämnar vi det. Det enda som gif-formet kan tillföra är möjligheten att skapa animationer, men det lämnar vi till en annan artikel.
Jpeg
Jpeg är till skillnad från de två nedanstående formaten ett destruktivt format. Det innebär att varje gång man sparar om bilden försämras kvalitén. Man kan säga att jpeg är ett slutformat, där man gärna arbetar i ett original i t ex psd-format och sparar den som .Jpeg-format när all redigering är klar. Man ska åtminstone inte redigera och spara om en jpeg-bild många gånger.
Jpeg är det självklara valet för fotografiska bilder och ibland även lite mer komplicerad, datorgenererad grafik som till exempel illustrationer med många olika färger och övertoningar. Jpeg har en kvalitetsskala mellan 1-100 där 1 ger lägst kvalitet (minst filstorlek) och 100 högst kvalitet (störst filstorlek).
Lite grovt kan man säga att vid 75-80 i kvalitetsgrad är det svårt att se att bilden är komprimerad med blotta ögat, mellan 60-70 får man anstränga sig för att upptäcka “komprimeringsskador” och vid 50 och neråt syns det lite tydligare. Datorgenererad grafik (skapad i dator) brukar behöva ett högre värde (runt 80) och foton klarar sig ofta med lite lägre. Man bör dock göra en egen bedömning från bild till bild om man vill vi ha optimalt resultat.
Png
Png är ett väldigt mångsidigt format som klarar det mesta. Det finns två varianter; png8 är i princip likvärdigt med gif-formatet och klarar maximalt 256 färger samt png24 som klarar 16 miljoner färger och genomskinlighet. I den här artikeln utgår jag från png24 eftersom det har egenskaper som skiljer sig mer från de andra formaten.
Png är förlustfritt, vilket gör att bilden inte förstörs mer och mer för varje gång den sparas (till skillnad från jpeg). Största styrkan kontra de andra formaten är att png24 klarar genomskinlighet och kantutjämning. Man kan alltså använda det för en bild som inte är fyrkantig och som ska ligga ovanpå en bakgrund som innehåller en övertoning eller ett foto. Använder man png för foton eller datorgenererad grafik som inte behöver vara genomskinlig brukar brukar png ge likartat resultat men filstorlekarna blir betydligt större.
Korta grundregler
- Använd png för logotyper, ikoner och när genomskinlighet krävs
- Använd alltid jpeg för foton
- Prova dig fram med olika komprimeringsgrad på jpeg-foton, vanligtvis mellan 50 och 70.
Exempel på hur de olika formaten klarar olika typer av grafik
Foto - här är jpeg det självklara valet och ger i princip alltid bäst kvalitet kontra bildstorlek. I exemplet här nedan blir filstorleken på jpeg-bilden bara en femtedel jämfört med png-versionen.
