WebP mot PNG och JPG: moderna bildformat för webben

I frågan WebP mot PNG och JPG vinner WebP på din egen webbplats: det kan komprimera som en JPG eller förlustfritt som en PNG, stöder transparens och ger mindre filer vid samma visuella kvalitet. Alla nuvarande webbläsare stöder det. Där PNG och JPG fortfarande vinner är överallt utanför din webbplats: uppladdningar till Instagram och LinkedIn, e-postbilagor, filer till kunder och tryckerier. Den praktiska regeln är alltså enkel. Gör och behåll originalen som PNG, servera WebP (eller AVIF) till besökarna.

Vad WebP är

WebP är ett bildformat utvecklat av Google och dokumenterat på web.dev. Ett format täcker det som förr krävde tre: förlustbehäftad foton som JPG, förlustfri grafik med transparens som PNG och korta animationer som GIF. Besparingen kommer från smartare komprimering, som förutsäger varje block av pixlar utifrån grannarna och bara lagrar skillnaden.

WebP mot PNG för grafik och transparens

För logotyper, gränssnittsbilder och urklipp behåller förlustfri WebP varje pixel som PNG och är oftast mindre. Förlustbehäftad WebP med transparens är den större vinsten: ett produktutklipp som behöver en mjuk, genomskinlig kant kan bli en bråkdel av PNG-storleken utan synlig skillnad.

Gradienter är undantaget som kräver omsorg. En jämn mörk gradient kan få band i förlustbehäftad WebP, precis som i JPG. Om din hjältebild mest är gradient, jämför förlustbehäftad med hög kvalitet mot förlustfri och fundera på om det över huvud taget ska vara en bild: en CSS-gradient kostar ingen nedladdning.

WebP mot JPG för foton

För fotografier matchar förlustbehäftad WebP med en kvalitet kring 75 till 80 oftast en JPG på 85 och är samtidigt mindre. Skillnaden växer på sidor med många bilder: produktrutnät, portföljer, bloggar. På ett enda hero-foto är vinsten verklig men mindre dramatisk, och att få pixelmåtten rätt betyder mer än formatet.

1. 1

   Storleken först

   Exportera fotot i den största storlek det faktiskt visas i. En hero på webbplats i 1920×1080 behöver aldrig ett original på 6000 pixlar.

2. 2

   Välj en kvalitet

   Börja med förlustbehäftad WebP på 80. Titta på hud, himmel och mörka hörn i 100 % zoom, sänk sedan steg för steg tills något ändras och gå tillbaka ett steg.

3. 3

   Gör mindre versioner

   Exportera bredderna 640, 1280 och 1920 pixlar så att telefoner laddar ner den lilla.

4. 4

   Servera med srcset

   Låt webbläsaren välja rätt bredd med srcset och sizes, som i koden nedan.

AVIF mot WebP

AVIF är nyare och komprimerar oftast mer än WebP, särskilt på fotografier och mjuka toner. Det stöds i alla nuvarande större webbläsare. Priset är långsammare kodning, vilket spelar roll om du konverterar bilder i farten, och färre verktyg som öppnar det. Många webbplatser serverar AVIF först, WebP sedan och JPG sist, och låter webbläsaren ta den första den förstå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>

Om du använder ett ramverk eller ett bild-CDN kan det göra allt det här automatiskt från ett uppladdat original. Kontrollera vad det ger innan du konverterar något för hand.

Där PNG och JPG fortfarande vinner

Sociala plattformar konverterar uppladdningar själva, och vissa avvisar eller hanterar WebP dåligt. Även sökrobotar för länkförhandsvisning varierar, så behåll din Open Graph-bild som en PNG eller JPG i 1200×630. Och en WebP som skickas till en kund öppnas ofta i fel app eller inte alls.

Så konverterar du PNG till WebP

Googles kostnadsfria kommandoradsverktyg cwebp konverterar en fil eller en hel mapp, och de flesta bildredigerare och designverktyg exporterar numera WebP direkt.

# 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

Dina originalfiler kan förbli PNG: Gradiently exporterar designer som PNG och JPG, vilket är rätt indata för det här steget och rätt filer för varje uppladdning till sociala medier. För resonemanget bakom kvalitetsinställningar, läs bildkomprimering utan att förstöra gradienter; för det äldre paret, PNG mot JPG; och för hela hastighetschecklistan, optimera bilder för webben.