WebP er et billedformat til web, der kan komprimere fotografier, illustrationer og grafik mere effektivt end mange ældre formater. Det understøtter både tabsgivende og tabsfri komprimering, animation og transparens. Formålet er enkelt: færre bytes skal hentes, uden at billedet ser mærkbart dårligere ud.
Hvornår WebP er et godt valg
WebP passer ofte til almindelige indholdsbilleder, produktfotos og billeder med transparent baggrund. Et foto, der ellers ville være JPEG, kan ofte blive mindre som WebP. En grafisk fil, der ellers ville være PNG, kan ofte beholde sin transparens i en mindre fil. Det betyder hurtigere overførsel, særligt på mobilnet, og kan understøtte en bedre LCP.
Formatet er bredt understøttet i moderne browsere. Det er dog stadig fornuftigt at have en fallback, når du selv skriver markup eller skal understøtte særlige ældre klienter. Brug <picture> med WebP som kilde og JPEG eller PNG som fallback, eller lad et billed-CDN vælge format ud fra browserens Accept-header.
WebP, JPEG og AVIF
JPEG er stadig et kompatibelt og praktisk fotoformat, men WebP er ofte mindre ved samme oplevede kvalitet. WebP har desuden alpha-transparens, som JPEG ikke har. AVIF kan i mange tilfælde komprimere endnu mere, men kan være langsommere at kode og afkode. Der findes derfor ikke ét rigtigt format: sammenlign filstørrelse og udseende for de faktiske billeder.
Vælg ikke format alene. Et WebP på 2.400 pixel er stadig for stort, hvis det kun vises i 600 pixel. Kombinér formatvalget med korrekt billedstørrelse, responsive varianter og passende komprimeringskvalitet.
WordPress i praksis
Nyere WordPress-installationer kan håndtere WebP-medier, men generering og levering afhænger af hosting, billedplugin og tema. Et optimeringsplugin eller CDN kan lave WebP-varianter af uploadede JPEG- og PNG-filer. Kontrollér, at det også dækker eksisterende mediebibliotek og de størrelser WordPress genererer til temaet.
- Gem en original fil lokalt eller i mediebiblioteket til senere redigering.
- Generér WebP i de størrelser, som layoutet faktisk bruger.
- Lad ikke hero- eller LCP-billedet blive forsinket af lazy loading.
- Test på en rigtig side, ikke kun i mediebiblioteket.
Sådan måler du effekten
Brug browserens Network-panel til at kontrollere den leverede filtype, dimensioner og antal overførte bytes. Sammenlign med den gamle JPEG eller PNG ved samme visningsstørrelse. Gennemgå derefter siden i PageSpeed Insights eller Lighthouse, men prioriter også visuel kontrol: komprimeringsartefakter i hudtoner, teksturer og logoer kan være mere synlige end et gennemsnitstal fortæller. WebP er en leveringsoptimering, ikke en erstatning for gode kildebilleder og en fornuftig billedstrategi.