Optimera bilder för webben utan att tappa kvalitet

För att optimera bilder för webben utan synlig förlust gör du fem saker: exportera varje bild i den pixelstorlek den visas (ungefär dubbelt så stor för skarpa skärmar), välj ett modernt format som AVIF eller WebP, komprimera till måttlig kvalitet och jämför med blotta ögat, servera flera storlekar med srcset och ladda allt under vecket med lazy loading. De stegen löser det mesta av Lighthouses bildvarningar och minskar oftast sidans vikt rejält, eftersom originalfotot direkt från kameran eller designverktyget är många gånger större än skärmen behöver.

Steg 1: exportera i den storlek du visar

En bild som visas 800 pixlar bred behöver inte vara 4 000 pixlar bred. Lighthouse flaggar för stora bilder eftersom de extra pixlarna laddas ner, avkodas och slängs. Mät hur bred bilden är i din layout som störst och exportera sedan i ungefär dubbla bredden för telefoner och laptops med hög pixeltäthet. Mer än dubbelt blir sällan skarpare och kostar alltid byte.

Steg 2: välj rätt format

Formatet betyder mer än något kompressionsreglage. AVIF ger oftast minsta filen, WebP kommer nära och stöds överallt i aktuella webbläsare, och JPEG och PNG är de säkra reservalternativen. WebP eller PNG och PNG eller JPG går djupare in på varje par.

Steg 3: komprimera, och titta sedan

Förlustbehäftade format har en kvalitetsinställning, och rätt värde beror på bilden. Börja runt 75 till 80 för WebP och runt 50 till 60 för AVIF, exportera och jämför med originalet i 100 % zoom. Sänk tills du ser skillnad och gå sedan upp ett steg igen. Ansikten, liten text och gradienter behöver högre kvalitet än livliga landskap. Bildkomprimering förklarar vad kodaren kastar bort.

Ta bort metadata som kameradetaljer och inbäddade miniatyrer samtidigt. De flesta exportverktyg gör det med en enda ruta, och det tar bort byte som ingen ser.

Steg 4: responsiv kod med srcset och sizes

När du exporterat flera bredder låter du webbläsaren välja. srcset listar filerna och deras bredder, och sizes talar om hur bred bilden kommer att visas. Webbläsaren hämtar då den minsta fil som är tillräckligt skarp för den skärmen.

<picture>
  <source type="image/avif"
    srcset="/img/hero-960.avif 960w, /img/hero-1440.avif 1440w, /img/hero-1920.avif 1920w"
    sizes="100vw" />
  <source type="image/webp"
    srcset="/img/hero-960.webp 960w, /img/hero-1440.webp 1440w, /img/hero-1920.webp 1920w"
    sizes="100vw" />
  <img src="/img/hero-1920.jpg" alt="Morning light over the harbour"
    width="1920" height="1080" fetchpriority="high" decoding="async" />
</picture>

För en bild i en kolumn beskriver du layouten i sizes, till exempel sizes="(min-width: 1024px) 720px, 100vw". Fel sizes är den vanligaste orsaken till att en responsiv uppsättning ändå hämtar den stora filen.

Steg 5: laddningstips som spelar roll

<!-- Below the fold: let the browser wait -->
<img src="/img/team-720.webp" alt="The team at the spring workshop"
  width="720" height="480" loading="lazy" decoding="async" />

<!-- The hero: fetch first, never lazy -->
<img src="/img/hero-1920.webp" alt="Morning light over the harbour"
  width="1920" height="1080" fetchpriority="high" />

De här tipsen hör direkt ihop med Core Web Vitals. Hero-bilden är ofta elementet för Largest Contentful Paint, som web.dev menar bör renderas inom 2,5 sekunder, och saknade mått är en klassisk orsak till layoutskift. Om din hero är en video i stället för en bild gäller samma tänk i videobakgrunder för webbplatser.

En checklista före publicering

1. 1

   Mät platsen

   Ta reda på största visade bredd för varje bild i din layout.

2. 2

   Exportera i rätt storlekar

   En till två gånger platsens bredd, plus mindre versioner för telefoner.

3. 3

   Välj format

   AVIF eller WebP för foton och gradienter, SVG för logotyper, PNG bara när det vinner.

4. 4

   Komprimera med ögat

   Sänk kvaliteten tills du ser en skillnad och höj den sedan ett steg.

5. 5

   Skriv koden

   srcset, sizes, width, height, alt och lazy loading under vecket.

6. 6

   Testa

   Kör Lighthouse i ett inkognitofönster och kontrollera bildgranskningarna och LCP-elementet.

Mycket av det här blir enklare när bilden görs i slutstorleken från början. I Gradiently designar du en gång och Pro ändrar storlek till alla format i ett steg, och exporterar sedan PNG, JPG eller SVG i exakta mått upp till 4K, så att hero, banner och Open Graph-bild alla utgår från den storlek sidan visar.