Kap 6.2 - Optimera bilder

Mål

• Anpassa bildens dimensioner till användningen.
• Förstå komprimering och filstorlek.
• Använda loading="lazy" på bilder som inte syns direkt.
• Känna till srcset och sizes.

Rätt pixelstorlek

Ladda inte upp en bild på 4000 pixlar bred om den visas som 600 pixlar bred. Webbläsaren kan skala ned bilden visuellt, men användaren måste ändå ladda den stora filen.

Ändra bildstorlek innan publicering

Bildstorlek kan betyda två olika saker: bildens dimensioner i pixlar och filens storlek i kilobyte eller megabyte. Båda påverkar hur snabbt sidan laddas.

Om en bild bara ska visas i en artikel med ungefär 700 pixlars bredd behöver originalet oftast inte vara 3000-4000 pixlar brett. Då är det bättre att skapa en mindre version, till exempel 700 eller 1400 pixlar bred. En bredare variant kan behövas för skärmar med hög pixeltäthet, men bilden ska fortfarande vara anpassad till hur den faktiskt används på sidan.

Komprimering

Komprimering minskar filstorleken. I format som JPEG, WebP och AVIF kan du ofta välja kvalitet. Lägre kvalitet ger mindre fil, men om du sänker för mycket syns blockighet, suddighet eller konstiga färgkanter.

Målet är inte att bilden ska vara så liten som möjligt. Målet är att bilden ska vara tillräckligt tydlig samtidigt som filen inte är onödigt stor.

Verktyg för bilder

Squoosh är ett webbläsarverktyg för att minska bilders filstorlek. Du kan dra in en bild, ändra format, justera kvalitet, ändra pixelstorlek och jämföra originalet med den optimerade versionen innan du sparar. Squoosh är särskilt bra när du vill testa skillnaden mellan till exempel JPEG, WebP och AVIF.

Photopea är en bildredigerare direkt i webbläsaren. Den kan användas för att beskära bilder, ändra bildstorlek, justera färger, arbeta med lager och exportera till webbanpassade format. Photopea passar bättre när bilden först behöver redigeras, medan Squoosh passar bättre när bilden ska optimeras inför publicering.

Lazy loading

Bilder längre ner på sidan kan ofta vänta tills användaren närmar sig dem.

<img src="bild.webp" alt="..." loading="lazy">

Responsiva bildkällor

Med srcset kan webbläsaren välja en passande bildfil för skärmens bredd och pixelttäthet.

<img
    src="hero-800.webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
    sizes="(max-width: 700px) 100vw, 700px"
    alt="Exempelbild">

För en fördjupning om responsiva bilder kan du läsa How To Speed Up Page Load With Responsive Images. Artikeln visar hur srcset, sizes och rätt bildstorlekar kan göra sidan snabbare.

Demo: se hur bilder laddas

Öppna bilddemot för lazy loading och srcset. Demot visar två saker: hur webbläsaren kan välja olika bildfiler med srcset, och hur bilder längre ner på sidan kan vänta med att laddas med loading="lazy".

Öppna gärna Network-panelen i utvecklarverktygen innan du testar. Då kan du se vilka bildfiler som laddas direkt, vilka som laddas först när du scrollar, och vilken responsiv bildkälla webbläsaren väljer.

Kontrollera resultatet

Använd Network-panelen i utvecklarverktygen för att se vilka bildfiler som laddas och hur stora de är.