Komprimera bilder

Filernas storlek spelar stor roll för sajters prestanda. Den typer av filer som oftast blir störst är bilder.

Den första frågan du bör ställa dig är om bilden över huvud taget behövs och tillför något för besökaren. Idag kan mycket av det som historiskt krävt bilder lösa med CSS och SVG. Exempel är rundade hörn, tonade bakgrunder, skuggor.

SVG är ett vektorbaserat format som är perfekt för bilder som ikoner och logotyper. SVG-filer ser dessutom lika bra ut oavsett hur stor eller liten du gör den. Ytterligare en fördel med SVG är att du kan använda samma bild på olika typer av skärmar, t ex mobila skärmar som ofta har väldigt hög pixeltäthet.

När du väl bestämt dig för att bilden är relevant behöver du tänka på i vilket mått den ska presenteras. Bilder ska alltid sparas i det mått de visas, både för att minska nedladdningstiden och för att det är lättare och blir snyggare för webbläsaren att inte behöva skala bilden själv.

Upplösning och format

Bilder från moderna kameror är ofta flera tusen pixlar breda och höga, men på webbsidor visar du som sällan större än 1000 pixlars bredd. Ett foto från kameran är också ofta flera megabyte stor, medan en nedskalad bild oftast 40-100 kb.

I bildprogram som t ex Photoshop finns ofta ett val för att ”Spara till webben”. Där kan du välja bildens mått och format och se filstorleken för dina val. För illustrationer, logotyper och sådant som kräver genomskinlighet är ofta PNG-formatet bäst. För foton brukar JPG-format vara bäst.

Kvalitet

När du sparar JPG-filer kan du också välja kvalitet. Ofta kan du sänka kvaliteten ganska mycket utan att du ser någon skillnad med ögat, men filstorleken kan påverkas rejält. Du får testa dig fram, men ofta fungerar det bra med 30 – 60 % kvalitet. Att använda oskärpa (blur) kan också förminska filstorleken utan att ögat kan uppfatta att bilden blir mer suddig.

Slutligen är det bra att komprimera bilderna för att ta bort onödig extra-information. Ofta sparas en liten tumnagel med i bilden, information om kamerainställningar och mycket mer som är helt ointressant för webben. Det finns en uppsjö av program och webbtjänster som kan komprimera bilderna helt gratis. Ett exempel är tjänsten TinyPNG som körs direkt i webbläsaren.