WebP vs PNG og JPG: moderne billedformater til nettet

I spørgsmålet om WebP vs PNG og JPG vinder WebP på dit eget website: det kan komprimere som en JPG eller tabsfrit som en PNG, understøtter gennemsigtighed og giver mindre filer ved samme visuelle kvalitet. Alle nye browsere understøtter det. Der, hvor PNG og JPG stadig vinder, er alle steder uden for dit website: uploads til Instagram og LinkedIn, vedhæftede filer i e-mails, filer til kunder og trykkerier. Så den praktiske regel er enkel. Lav og gem masterfiler i PNG, og vis WebP (eller AVIF) til besøgende.

Hvad WebP er

WebP er et billedformat udviklet af Google og dokumenteret på web.dev. Ét format dækker det, der før krævede tre: fotos med tab som JPG, tabsfri grafik med gennemsigtighed som PNG og korte animationer som GIF. Besparelsen kommer fra smartere komprimering, der forudsiger hver blok af pixels ud fra naboerne og kun gemmer forskellen.

WebP vs PNG til grafik og gennemsigtighed

Til logoer, billeder i brugerflader og fritlagte motiver bevarer tabsfri WebP hver pixel ligesom PNG og er som regel mindre. Den store gevinst er WebP med tab og gennemsigtighed: et fritlagt produkt, der skal have en blød, gennemsigtig kant, kan fylde en brøkdel af PNG-størrelsen uden synlig forskel.

Gradienter er undtagelsen, der kræver omhu. En glat, mørk overgang kan få striber i WebP med tab, præcis som i JPG. Er dit hero-billede mest gradient, så sammenlign tab ved høj kvalitet med tabsfrit, og overvej, om det overhovedet skal være et billede: en CSS-gradient kræver ingen download.

WebP vs JPG til fotos

Til fotografier matcher WebP med tab ved en kvalitet omkring 75 til 80 som regel en JPG ved 85 og er samtidig mindre. Forskellen løber op på sider med mange billeder: produktgitre, porteføljer, blogs. På et enkelt hero-foto er gevinsten reel, men mindre dramatisk, og de rigtige pixelmål betyder mere end formatet.

1. 1

   Størrelse først

   Eksportér fotoet i den største størrelse, det faktisk vises i. Et hero-billede på et website i 1920×1080 har aldrig brug for en original på 6000 pixels.

2. 2

   Vælg en kvalitet

   Start med WebP med tab på 80. Se på hud, himmel og mørke hjørner ved 100 % zoom, gå så ned, til noget ændrer sig, og gå et trin tilbage.

3. 3

   Lav mindre versioner

   Eksportér i bredderne 640, 1280 og 1920 pixels, så telefoner henter den lille.

4. 4

   Vis med srcset

   Lad browseren vælge den rigtige bredde med srcset og sizes, som i koden nedenfor.

AVIF vs WebP

AVIF er nyere og komprimerer som regel mere end WebP, især på fotografier og bløde toner. Det understøttes i alle nye større browsere. Prisen er langsommere kodning, som betyder noget, hvis du konverterer billeder løbende, og færre værktøjer, der kan åbne det. Mange websites viser AVIF først, WebP som nummer to og JPG til sidst og lader browseren tage 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>

Bruger du et framework eller et billed-CDN, gør det måske alt dette automatisk ud fra én uploadet original. Tjek, hvad det leverer, før du konverterer noget i hånden.

Hvor PNG og JPG stadig vinder

Sociale platforme konverterer selv uploads, og nogle afviser eller fejlbehandler WebP. Crawlere til linkforhåndsvisninger varierer også, så behold dit Open Graph-billede som PNG eller JPG i 1200×630. Og en WebP sendt til en kunde åbner ofte i det forkerte program eller slet ikke.

Sådan konverterer du PNG til WebP

Googles gratis kommandolinjeværktøj cwebp konverterer én fil eller en hel mappe, og de fleste billedredigerings- og designværktøjer eksporterer nu 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

Dine masterfiler kan blive i PNG: Gradiently eksporterer design som PNG og JPG, som er de rigtige filer til dette trin og til alle uploads på sociale medier. Baggrunden for kvalitetsindstillingerne finder du i billedkomprimering uden at ødelægge gradienter; det ældre par i PNG vs JPG; og hele tjeklisten for hastighed i optimering af billeder til nettet.