Optimér billeder til nettet uden at miste kvalitet

Hvis du vil optimere billeder til web uden synligt tab, skal du gøre fem ting: eksportere hvert billede i den pixelstørrelse, det vises i (cirka det dobbelte til skarpe skærme), vælge et moderne format som AVIF eller WebP, komprimere til en moderat kvalitet og sammenligne med øjet, levere flere størrelser med srcset og lazy loade alt under folden. De trin fjerner det meste af billedadvarslerne i Lighthouse og skærer ofte sidens vægt kraftigt ned, for originalen direkte fra et kamera eller et designprogram er mange gange større, end skærmen har brug for.

Trin 1: eksportér i den størrelse, du viser

Et billede, der vises 800 pixels bredt, behøver ikke være 4.000 pixels bredt. Lighthouse markerer for store billeder, fordi de overskydende pixels bliver hentet, afkodet og smidt væk. Mål, hvor bredt billedet højst fylder i dit layout, og eksportér så cirka dobbelt så bredt til telefoner og bærbare med høj tæthed. Mere end det dobbelte ser sjældent skarpere ud og koster altid bytes.

Trin 2: vælg det rette format

Formatet betyder mere end noget komprimeringsreglage. AVIF giver som regel den mindste fil, WebP kommer tæt på og understøttes overalt i dag, og JPEG og PNG er stadig de sikre reserver. WebP eller PNG og PNG eller JPG går i dybden med hvert par.

Trin 3: komprimér, og kig så

Formater med tab har en kvalitetsindstilling, og den rette værdi afhænger af billedet. Start omkring 75 til 80 for WebP og omkring 50 til 60 for AVIF, eksportér, og sammenlign med originalen ved 100 % zoom. Sænk værdien, indtil du kan se en forskel, og gå så ét trin op igen. Ansigter, fin tekst og farveforløb kræver mere kvalitet end travle landskaber. Billedkomprimering forklarer, hvad koderen smider væk.

Fjern også metadata som kameraoplysninger og indlejrede miniaturer, mens du er i gang. De fleste eksportværktøjer gør det med ét afkrydsningsfelt, og det sparer bytes, ingen ser.

Trin 4: responsiv markup med srcset og sizes

Når du har eksporteret flere bredder, lader du browseren vælge. srcset opregner filerne og deres bredder; sizes fortæller browseren, hvor bredt billedet kommer til at fylde. Browseren henter så den mindste fil, der er skarp nok til den skærm.

<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 billede inde i en kolonne beskriver du layoutet i sizes, for eksempel sizes="(min-width: 1024px) 720px, 100vw". Forkert sizes er den hyppigste grund til, at en responsiv opsætning stadig henter den store fil.

Trin 5: de indlæsningstip, der tæller

<!-- 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 tip hænger direkte sammen med Core Web Vitals. Heltebilledet er ofte det element, der udgør Largest Contentful Paint, som web.dev foreslår bør tegnes inden for 2,5 sekunder, og manglende mål er en klassisk årsag til layoutskift. Hvis dit heltebillede er en video i stedet for et billede, gælder den samme tankegang i videobaggrunde til hjemmesider.

En tjekliste før du udgiver

1. 1

   Mål pladsen

   Find den største viste bredde for hvert billede i dit layout.

2. 2

   Eksportér i de rette størrelser

   En til to gange pladsens bredde, plus mindre versioner til telefoner.

3. 3

   Vælg formatet

   AVIF eller WebP til fotos og farveforløb, SVG til logoer, PNG kun når det vinder.

4. 4

   Komprimér med øjet

   Sænk kvaliteten, til du ser en ændring, og hæv den så ét trin.

5. 5

   Skriv markup

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

6. 6

   Test det

   Kør Lighthouse i et inkognitovindue, og tjek billedrevisionerne og LCP-elementet.

Meget af det her bliver lettere, når billedet allerede er lavet i sin endelige størrelse. I Gradiently designer du én gang, og Pro ændrer størrelsen til alle formater i ét trin og eksporterer derefter PNG, JPG eller SVG i præcise mål op til 4K, så heltebilledet, banneret og Open Graph-billedet hver især starter i den størrelse, siden viser.