# WebP mot PNG och JPG: moderna bildformat för webben [Canonical HTML page](https://gradiently.design/sv/guide/webp-images) Din webbplats behöver inte servera samma filer som du postar på Instagram. WebP och AVIF gör samma jobb som PNG och JPG med färre byte, om du ställer in dem rätt. ## The short version - WebP är ett bildformat som kan vara förlustbehäftad som JPG eller förlustfritt som PNG, och som stöder transparens och animation. - Vid liknande visuell kvalitet är WebP-filer oftast märkbart mindre än motsvarande JPG- och PNG-filer. - Alla nuvarande versioner av Chrome, Safari, Firefox och Edge stöder WebP, så en reservlösning behövs bara för mycket gamla webbläsare. - AVIF komprimerar mer än WebP och stöds numera brett, men tar längre tid att koda. - Behåll PNG och JPG för uppladdningar till sociala plattformar och för filer du skickar till andra; använd WebP eller AVIF på din egen webbplats. 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](https://web.dev/articles/serve-images-webp). 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. | Egenskap | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Förlustbehäftad | Ja | Nej | Ja | Ja | | Förlustfri | Nej | Ja | Ja | Ja | | Transparens | Nej | Ja | Ja | Ja | | Animation | Nej | Begränsad (APNG) | Ja | Ja | | Stöd i webbläsare | Universellt | Universellt | Alla nuvarande webbläsare | Alla nuvarande webbläsare | | Accepteras av sociala plattformar | Ja | Ja | Inkonsekvent | Sällan | Kontrollera aktuellt stöd på [caniuse.com](https://caniuse.com/webp) om din publik använder gamla enheter. ## 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](https://gradiently.design/sv/guide/css-linear-gradient) kostar ingen nedladdning. - Mörk marinblå: testa förlustfri: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Blekrosa: förlustbehäftad, hög kvalitet: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Klar trefärgad: förlustbehäftad går bra: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Mörka, subtila gradienter visar komprimeringen först; klara, livliga döljer den. Välj WebP-inställningar efter innehållet, inte av vana. ## 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. **Storleken först** Exportera fotot i den största storlek det faktiskt visas i. En [hero på webbplats](https://gradiently.design/sv/guide/website-hero-background) i 1920×1080 behöver aldrig ett original på 6000 pixlar. 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. **Gör mindre versioner** Exportera bredderna 640, 1280 och 1920 pixlar så att telefoner laddar ner den lilla. 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. ```html Evening light over the harbour ``` Webbläsaren använder den första `source` den stöder och faller tillbaka på `img`. Bredden och höjden hindrar layouten från att hoppa medan den laddas. 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. > **Animerad WebP och GIF** Animerad WebP är mycket lättare än GIF och behåller full färg, så den passar små loopande grafiker på en sida. För allt längre än några sekunder är en ljudlös MP4- eller WebM-video ännu lättare. [GIF mot MP4](https://gradiently.design/sv/guide/gif-vs-mp4) jämför dem i detalj. ## Där PNG och JPG fortfarande vinner ### Använd WebP eller AVIF - Bilder på din egen webbplats - Produktrutnät och gallerier - Blogg- och artikelbilder - Transparenta urklipp på webben ### Använd PNG eller JPG - Uppladdningar till Instagram, LinkedIn, X och Facebook - Open Graph-bilder för länkförhandsvisningar - Filer du mejlar eller skickar till kunder - Original som du ska redigera igen 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](https://gradiently.design/sv/guide/open-graph-image-size) som en PNG eller JPG i 1200×630. Och en WebP som skickas till en kund öppnas ofta i fel app eller inte alls. En bred bild för länkförhandsvisning som tillkännager en vårkollektion på en gradientbakgrund En länkförhandsvisning i 1200×630. Behåll den här som PNG så att varje plattforms sökrobot kan läsa den. ## 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. ```bash # 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 ``` Behåll PNG-originalen. Att konvertera WebP tillbaka till PNG återställer inte detaljer som gått förlorade vid förlustbehäftad komprimering. 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](https://gradiently.design/sv/guide/image-compression); för det äldre paret, [PNG mot JPG](https://gradiently.design/sv/guide/png-vs-jpeg); och för hela hastighetschecklistan, [optimera bilder för webben](https://gradiently.design/sv/guide/lighthouse-image-performance). ## FAQ ### Är WebP bättre än PNG? På en webbplats oftast ja: förlustfri WebP behåller samma pixlar i en mindre fil och stöder transparens. För uppladdningar till sociala medier och filer du skickar till andra är PNG säkrare eftersom det öppnas överallt. ### Stöder alla webbläsare WebP? Alla nuvarande versioner av Chrome, Safari, Firefox och Edge stöder WebP. Använd ett `picture`-element med en JPG- eller PNG-reserv om du behöver nå mycket gamla webbläsare. ### Ska jag använda AVIF eller WebP? AVIF är oftast mindre, WebP kodas snabbare och stöds av fler verktyg. Att servera AVIF först med WebP som reserv ger de flesta besökare den minsta filen. ### Kan jag ladda upp WebP till Instagram? Stödet är inkonsekvent, så ladda i stället upp PNG eller JPG i exakt storlek, som 1080×1350 för ett stående inlägg. ### Stöder WebP transparens? Ja, i både förlustbehäftad och förlustfritt läge, vilket gör det till en bra ersättning för transparenta PNG:er på webben.