Kort fortalt: WebP er et billedformat der ofte kan give mindre filer end JPEG/PNG, uden at kvaliteten nødvendigvis falder synligt.
Hvad er WebP?
WebP er et moderne billedformat, der kan komprimere både fotos og grafik mere effektivt end mange klassiske formater. I praksis betyder det ofte:
- mindre filstørrelse ved samme oplevede kvalitet
- hurtigere download og hurtigere visuel rendering
- bedre performance på mobilnetværk
WebP kan bruges til både “lossy” (foto) og “lossless” (grafik) komprimering, og formatet understøtter også transparens. Det gør WebP relevant i langt flere situationer end “kun fotos”.
Hvorfor bruge WebP?
- Mindre filer end JPEG/PNG
- God browser-support
Når WebP reducerer filstørrelse, kan det især hjælpe:
- LCP (hvis LCP er et billede)
- speed index (hurtigere visuel udfyldning)
- dataforbrug på mobil
Hvilken indflydelse har WebP på SEO og Core Web Vitals?
WebP er ikke et SEO-signal i sig selv, men det påvirker de ting, der påvirker oplevelsen:
- LCP: hvis dit hero-/artikelbillede bliver mindre, kan det blive hentet tidligere og blive dit LCP-element hurtigere
- Speed Index: siden udfyldes visuelt hurtigere, hvis billeder er lettere
- Stabilitet: mindre risiko for at store downloads “kvæler” andre kritiske ressourcer
På et videnssite med mange artikelbilleder kan WebP derfor være en af de mest effektive grundforbedringer, fordi det skalerer: hver sidevisning får lidt mindre data.
Hvornår blev WebP indført?
WebP har været i brug i mange år og blev populært fordi:
- det gav tydelig komprimeringsgevinst
- tooling blev bedre
- browser-support blev bred (især i moderne browsers)
I dag er WebP ofte det sikre “moderne baseline”-valg, især når du vil have god kompatibilitet og stadig få mindre billeder.
Hvornår bør du bruge WebP?
WebP passer især godt til:
- artikelbilleder (fotos) hvor du gerne vil spare størrelser
- thumbnails og kort (cards) med billeder
- hero-billeder, hvis du bruger responsive størrelser og god kvalitet
WebP er mindre ideelt til:
- screenshots med meget tekst og skarpe linjer (kan give artefakter ved for hård kompression)
- grafik der allerede er ekstremt optimeret som SVG (SVG er ofte bedre)
WebP vs AVIF (hvad skal du vælge?)
En enkel tommelfingerregel:
- AVIF kan ofte give endnu mindre filer (især fotos), men kræver en god pipeline og fallback
- WebP er en stabil standard med god komprimering og bred support
Mange sites bruger:
- AVIF som førstevalg
- WebP som fallback
- JPEG/PNG som sidste fallback
Kvalitet og faldgruber
WebP kan også komprimeres for hårdt. Kig efter:
- “mudret” look i fotos
- ring artifacts omkring kanter
- dårlig tekstskarphed i screenshots
Praktisk: vælg en konservativ kvalitet til hero-billeder, og mål på rigtige skærme.
En praktisk billedstrategi (som næsten altid virker)
Hvis du vil gøre det enkelt og robust:
- Brug AVIF som førstevalg, når du kan
- Brug WebP som fallback
- Brug JPEG/PNG som sidste fallback
- Brug responsive størrelser (srcset/sizes) til alle større billeder
Det gør at moderne browsere får de letteste filer, mens ældre browsere stadig får en kompatibel version.
Praktiske tips
- Servér responsive varianter
- Overvej AVIF som førstevalg med WebP fallback
Udvidet praksis:
1) Brug picture med fallback
source type="image/avif"source type="image/webp"imgmed JPEG/PNG fallback
2) Brug responsive billeder
Det er ofte vigtigere end format:
srcset+sizes- rigtige dimensioner (send ikke 2000px til en 400px container)
3) Prioritér LCP-billedet korrekt
- hero/LCP-billeder bør ikke lazy-loades
- overvej preload hvis det konsekvent er LCP
Sådan tester du om WebP hjælper (hurtigt)
- Find en side hvor LCP-elementet er et billede (PSI/Lighthouse).
- Sammenlign “transferred size” og download-start i waterfall før/efter.
- Test på mobilnetværk, hvor forskellen typisk er tydeligere.
Hvis billedet stadig er stort, selv som WebP, er næste skridt typisk bedre dimensioner og flere responsive varianter.
Konkrete optimeringer (hvad man gør i praksis)
1) Brug rigtige dimensioner
Den mest almindelige fejl er at servere en alt for stor fil, som browseren skalerer ned.
2) Brug srcset og sizes
Det gør at browseren kan vælge den rigtige variant til skærmen.
3) Cache billeder længe
Hvis dine billeder ikke ændrer sig uden filnavnsskift, kan lang cache give store gevinster på gentagne besøg.
4) Undgå at lazy-loade hero-billedet
Hero-billedet er ofte LCP. Lazy loading her kan gøre LCP dårligere.
FAQ
Er WebP godt nok, hvis jeg ikke vil bruge AVIF?
Ja. Du kan komme meget langt med WebP, især hvis du kombinerer det med responsive størrelser (`srcset`/`sizes`) og korrekt caching.
AVIF kan give ekstra komprimering i nogle cases, men WebP alene er ofte et stort skridt væk fra JPEG/PNG.
Skal jeg konvertere alle mine gamle billeder?
Start med de største og mest synlige: hero, artikelbilleder og gallerier. De giver størst effekt.
Når du har et godt workflow, kan du udvide gradvist. I praksis er det vigtigere at få de vigtigste billeder rigtige end at “konvertere alt” på én gang.
Hvad med “art direction” (forskellige crops til mobil/desktop)?
WebP løser primært komprimering – art direction handler om at sende *det rigtige udsnit* til den rigtige skærm.
Hvis din hero på desktop er et bredt banner, kan mobil have brug for et andet crop. Praktisk kan du: - bruge forskellige billedvarianter til forskellige breakpoints (stadig i WebP/AVIF) - sørge for at `sizes` matcher din layout-bredde
Start typisk med de 1–3 vigtigste billeder, fordi det er her gevinsten (og risikoen) er størst.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Sådan fejlsøger du LCP fra start til slut
Følg en praktisk arbejdsgang til at finde årsagen til høj LCP, fra serverrespons og render blocking til billeder, prioritering og netværksrækkefølge.
Brug fetchpriority og preload rigtigt på de vigtigste ressourcer
Få en praktisk guide til hvordan du bruger fetchpriority og preload på billeder, fonts og CSS uden at overstyre browseren forkert.
Forbedr LCP med billeder: hero, formater, preload og responsive størrelser
Lær hvordan du forbedrer LCP ved at optimere hero-billedet med rigtige dimensioner, AVIF eller WebP, preload og korrekt responsive opsætning.
Fetchpriority, preload og preconnect: hvornår de hjælper og hvornår de gør skade
Lær hvornår fetchpriority, preload og preconnect faktisk forbedrer load, og hvornår de bare skaber mere støj og dårlig prioritering i browseren.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
Hvordan du spotter render delay (uden at stirre på score)
Render delay er ofte grunden til at LCP bliver 1–2 sekunder for sent, selv når TTFB ser fin ud. Her er metoden til at finde årsagen hurtigt – og vælge den rigtige type fix.
