WebP, PNG og JPG: moderne bildeformater til nettet

I valget WebP eller PNG og JPG vinner WebP på ditt eget nettsted: Det kan komprimere med tap som JPG eller tapsfritt som PNG, støtter gjennomsiktighet og gir mindre filer ved samme visuelle kvalitet. Alle dagens nettlesere støtter det. PNG og JPG vinner fortsatt utenfor nettstedet: opplasting til Instagram og LinkedIn, e-postvedlegg og filer til kunder og trykkerier. Den praktiske regelen er derfor enkel. Lag og behold originaler i PNG, og lever WebP eller AVIF til besøkende.

Hva WebP er

WebP er et bildeformat utviklet av Google og dokumentert på web.dev. Ett format dekker det som tidligere krevde tre: fotografier med tap som JPG, tapsfri grafikk med gjennomsiktighet som PNG og korte animasjoner som GIF. Besparelsen kommer fra smartere komprimering som forutsier hver pikselblokk fra naboene og bare lagrer forskjellen.

WebP eller PNG til grafikk og gjennomsiktighet

Til logoer, grensesnittbilder og frilagte bilder bevarer tapsfri WebP hver piksel som PNG og er vanligvis mindre. WebP med tap og gjennomsiktighet gir den større gevinsten: Et frilagt produkt som trenger en myk, gjennomskinnelig kant, kan være en brøkdel av PNG-størrelsen uten synlig forskjell.

Gradienter er unntaket som krever omtanke. En jevn, mørk blanding kan få fargebånd i WebP med tap, akkurat som i JPG. Består toppbildet mest av gradient, sammenlign høy kvalitet med tap mot tapsfritt. Vurder også om det bør være et bilde i det hele tatt: En CSS-gradient krever ingen nedlasting.

WebP eller JPG til fotografier

Til fotografier tilsvarer WebP med tap ved kvalitet rundt 75 til 80 vanligvis JPG ved 85, med mindre fil. Forskjellen summerer seg på sider med mange bilder: produktoversikter, porteføljer og blogger. På ett toppfoto er gevinsten reell, men mindre dramatisk, og riktige pikseldimensjoner betyr mer enn formatet.

1. 1

   Størrelse først

   Eksporter bildet i den største størrelsen det faktisk vises. Et toppbilde i 1920×1080 trenger aldri en original på 6000 piksler.

2. 2

   Velg kvalitet

   Start WebP med tap på 80. Se på hud, himmel og mørke hjørner ved 100% zoom, og senk til noe endres. Gå så ett trinn tilbake.

3. 3

   Lag mindre versjoner

   Eksporter bredder på 640, 1280 og 1920 piksler, slik at telefoner laster den lille.

4. 4

   Lever med srcset

   La nettleseren velge riktig bredde med srcset og sizes, som i koden under.

AVIF eller WebP

AVIF er nyere og komprimerer vanligvis mer enn WebP, særlig fotografier og jevne toner. Det støttes i alle dagens store nettlesere. Ulempene er langsommere koding, som betyr noe ved løpende konvertering, og færre verktøy som åpner formatet. Mange nettsteder leverer AVIF først, WebP deretter og JPG sist, og lar nettleseren ta det første den forstår.

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

Bruker du et rammeverk eller bilde-CDN, kan det gjøre alt dette automatisk fra én opplastet original. Sjekk hva det leverer før du konverterer for hånd.

Hvor PNG og JPG fortsatt vinner

Sosiale plattformer konverterer opplastinger selv, og noen avviser eller håndterer WebP feil. Roboter som henter lenkeforhåndsvisninger, varierer også. Behold derfor Open Graph-bildet som PNG eller JPG i 1200×630. En WebP sendt til en kunde åpnes dessuten ofte i feil app eller ikke i det hele tatt.

Slik konverterer du PNG til WebP

Googles gratis kommandolinjeverktøy cwebp konverterer én fil eller en hel mappe, og de fleste bilde- og designverktøy eksporterer nå WebP direkte.

# lossy, good for photos
cwebp -q 80 photo.png -o photo.webp

# lossless, good for logos and interface graphics
cwebp -lossless logo.png -o logo.webp

# a whole folder
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

Designoriginalene kan fortsatt være PNG: Gradiently eksporterer design som PNG og JPG, som er riktige utgangsfiler for dette trinnet og for alle sosiale opplastinger. Les bildekomprimering uten å ødelegge gradienter for tankene bak kvalitetsinnstillinger, PNG eller JPG for de eldre formatene og optimalisere bilder for nettet for hele sjekklisten for fart.