Optimaliser bilder for nettet uten å miste kvalitet

For å optimalisere bilder for nettet uten synlig tap gjør du fem ting: eksporter hvert bilde i pikselstørrelsen det vises i (omtrent det dobbelte for skarpe skjermer), velg et moderne format som AVIF eller WebP, komprimer til en moderat kvalitet og sammenlign med øynene, server flere størrelser med srcset, og bruk lazy loading på alt under bretten. Disse stegene fjerner de fleste bildeadvarslene i Lighthouse og kutter som regel sidevekten kraftig, fordi originalbildet rett fra kameraet eller designverktøyet er mange ganger større enn skjermen trenger.

Steg 1: eksporter i visningsstørrelsen

Et bilde som vises 800 piksler bredt, trenger ikke være 4000 piksler bredt. Lighthouse flagger for store bilder fordi de ekstra pikslene lastes ned, dekodes og kastes. Mål hvor bredt bildet vises i oppsettet ditt når det er på sitt største, og eksporter i omtrent dobbel bredde for telefoner og bærbare med høy tetthet. Mer enn det dobbelte ser sjelden skarpere ut og koster alltid byte.

Steg 2: velg riktig format

Formatet betyr mer enn noen komprimeringsglidebryter. AVIF gir som regel den minste filen, WebP kommer nær og støttes av alle dagens nettlesere, og JPEG og PNG er fortsatt de trygge reserveløsningene. WebP eller PNG og PNG eller JPG går dypere inn i hvert par.

Steg 3: komprimer, og se etter

Formater med tap har en kvalitetsinnstilling, og riktig verdi avhenger av bildet. Start rundt 75 til 80 for WebP og rundt 50 til 60 for AVIF, eksporter og sammenlign med originalen i 100 % zoom. Senk til du ser en forskjell, og gå så ett hakk opp igjen. Ansikter, liten tekst og gradienter trenger høyere kvalitet enn travle landskap. Bildekomprimering forklarer hva koderen kaster.

Fjern metadata som kameradetaljer og innebygde miniatyrer mens du er i gang. De fleste eksportverktøy gjør det med én avkrysningsboks, og det fjerner byte ingen ser.

Steg 4: responsiv markup med srcset og sizes

Når du har eksportert flere bredder, lar du nettleseren velge. srcset lister filene og breddene deres; sizes forteller nettleseren hvor bredt bildet vil vises. Nettleseren laster da ned den minste filen som er skarp nok for den skjermen.

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

For et bilde i en kolonne beskriver du oppsettet i sizes, for eksempel sizes="(min-width: 1024px) 720px, 100vw". Feil sizes er den vanligste grunnen til at et responsivt oppsett likevel laster ned den store filen.

Steg 5: lastehint som betyr noe

<!-- 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" />

Disse hintene henger direkte sammen med Core Web Vitals. Toppbildet er ofte Largest Contentful Paint-elementet, som ifølge web.dev bør vises innen 2,5 sekunder, og manglende dimensjoner er en klassisk årsak til layoutforskyvning. Er toppen din en video i stedet for et bilde, gjelder samme tankegang i videobakgrunner på nettsider.

En sjekkliste før du publiserer

1. 1

   Mål plassen

   Finn den største viste bredden for hvert bilde i oppsettet ditt.

2. 2

   Eksporter i riktige størrelser

   En til to ganger plassens bredde, pluss mindre versjoner for telefoner.

3. 3

   Velg format

   AVIF eller WebP for foto og gradienter, SVG for logoer, PNG bare når det vinner.

4. 4

   Komprimer med øynene

   Senk kvaliteten til du ser en endring, og hev den så ett hakk.

5. 5

   Skriv markup

   srcset, sizes, width, height, alt og lazy loading under bretten.

6. 6

   Test

   Kjør Lighthouse i et inkognitovindu og sjekk bilderevisjonene og LCP-elementet.

Mye av dette blir enklere når bildet lages i endelig størrelse fra starten. I Gradiently designer du én gang, og Pro endrer størrelsen til alle formater i ett steg og eksporterer PNG, JPG eller SVG i nøyaktige mål opptil 4K, så toppbildet, banneret og Open Graph-bildet alle starter i størrelsen siden vil vise.