PNG, JPEG eller WebP: vilket bildformat ska du använda?

De flesta val av bildformat handlar om två frågor. Behöver bilden transparenta ytor? Och skulle en liten kvalitetsförlust synas? Svara på de två så väljer formatet nästan sig självt. Den tredje frågan, vart filen ska, avgör om de nyare formaten alls är tillåtna, eftersom marknadsplatser och många appar fortfarande bara tar emot JPEG och PNG.

Den här guiden jämför de fyra format du oftast stöter på för foton och grafik på webben: JPEG, PNG, WebP och AVIF. Den avslutas med ett snabbt val för de vanligaste uppgifterna: logotyper, produktbilder, vanliga foton och friläggningar med transparent bakgrund.

Jämförelsetabellen

Formatdetaljerna kommer från MDN:s guide till bildformat. Raden om stöd spelar mindre roll för webbläsare än förr: alla aktuella stora webbläsare visar WebP, och AVIF stöds i nya versioner av alla. Där den fortfarande spelar roll är överallt annars, som uppladdningsformulär, marknadsplatser, e-postprogram och äldre skrivbordsprogram.

Med förlust eller förlustfri, enkelt förklarat

Förlustfri komprimering krymper en fil utan att ändra en enda pixel. Avkodar du en PNG får du tillbaka exakt det som sparades. Det gör den idealisk för allt med skarpa kanter och enfärgade ytor, som text, logotyper, linjeteckningar, gränssnitt och skärmbilder, där minsta oskärpa eller färgfrans syns direkt.

Komprimering med förlust slänger detaljer som ögat sannolikt inte märker. Fotografier tål det bra eftersom de är fulla av brus och mjuka toner. JPEG fungerar så, och med rimliga kvalitetsinställningar kan ett foto krympa till en bråkdel av sin PNG-storlek utan synlig skillnad.

Två praktiska regler följer:

• Varje sparning med förlust tappar lite mer. Behåll ett förlustfritt original (kamerans fil, en PNG eller bildredigerarens egen fil) och exportera kopior med förlust från det, i stället för att redigera och spara om samma JPEG.
• Komprimering med förlust är sämst på skarpa kanter. En logotyp sparad som JPEG får kladdigt ”myggbrus” runt bokstäverna, och en skärmbild får suddig text.

Transparens: den avgörande egenskapen för friläggningar

JPEG har ingen alfakanal. Det går inte att lagra att en pixel är genomskinlig i en JPEG, så när du tar bort en bakgrund och sparar som JPEG fylls den tomma ytan med en enfärgad bakgrund, oftast vit eller svart. Vill du att friläggningen ska ligga ovanpå annat innehåll behöver du PNG, WebP eller AVIF.

PNG lagrar en full alfakanal: varje pixel kan vara allt från helt ogenomskinlig till helt transparent, och det är det som gör att mjuka kanter som hår, päls och skuggor ser naturliga ut. Formatet har också ett enklare läge där en färg i paletten markeras som transparent, vilket räcker för enkel grafik men ger hackiga kanter på foton. Vill du veta mer, läs vad en alfakanal är.

WebP stöder transparens i både förlustfritt läge och med förlust. Enligt Googles WebP-dokumentation kostar transparens i förlustfri WebP bara cirka 22 % fler byte, och WebP med förlust och transparens är normalt cirka 3 gånger mindre än en motsvarande PNG. Det gör WebP med förlust till det effektivaste sättet att visa en transparent produktbild på din egen webbplats.

Filstorlek

För samma bild är den ungefärliga ordningen från störst till minst PNG, JPEG, WebP, AVIF, med en viktig reservation: PNG är bara ”stor” för foton. För enkel grafik med få färger är PNG ofta mindre än JPEG och alltid skarpare.

Googles publicerade siffror för WebP är ett bra riktmärke:

• Förlustfria WebP-filer är 26 % mindre än PNG.
• WebP-filer med förlust är 25 till 34 % mindre än jämförbara JPEG vid samma SSIM-kvalitetsvärde.

MDN råder dig att för rasterbilder på webben välja WebP eller AVIF, som i regel komprimerar bättre än PNG, JPEG och GIF. AVIF stöder också 10 och 12 bitars färg, vilket hjälper med mjuka övergångar. Dess svaga punkt är stödet utanför webbläsare: många appar och uppladdningsformulär avvisar det fortfarande.

Filstorleken spelar störst roll när du visar många bilder för många besökare. För en enstaka uppladdning till en marknadsplats som ändå komprimerar om allt är det formatet marknadsplatsen godkänner som räknas, inte byten du sparar.

Var varje format godkänns

Webbläsarna är den enkla delen. Det är på marknadsplatser och i appar som format avvisas. Det här är de godkända formaten enligt varje plattforms egen dokumentation, kontrollerade i oktober 2026:

Två saker sticker ut. För det första godkänner inte Amazon, Walmart eller Meta-kataloger WebP och AVIF, så håll dig till JPEG eller PNG för uppladdningar till marknadsplatser. För det andra skriver Etsy att transparenta PNG:er inte stöds och att transparenta ytor kan bli svarta, så lägg friläggningar på en färg innan du laddar upp där. För exakta pixelstorlekar per plattform, se översikten över storlekar på produktbilder.

Vilket format för vanliga uppgifter

Logotyper

Använd SVG när du har ett vektororiginal; MDN rekommenderar det för logotyper och ikoner. När du behöver en rasterfil, använd PNG med transparent bakgrund, eller förlustfri WebP på din egen webbplats. Aldrig JPEG: det ger ludd runt kanterna och kan inte vara transparent.

Produktbilder

För huvudbilder på marknadsplatser, använd JPEG på helvit bakgrund. Amazons säljarblogg kallar JPEG det föredragna formatet, och alla marknadsplatser i tabellen ovan godkänner det. Exportera med hög kvalitetsinställning (cirka 85 till 92 i de flesta verktyg) från ett förlustfritt original.

I din egen butik, ladda upp en JPEG eller PNG av hög kvalitet och låt plattformen konvertera. Shopify skriver till exempel att dess bildtjänst automatiskt ger varje besökare det bästa format som deras webbläsare stöder.

Vanliga foton

JPEG är det säkra standardvalet för delning och uppladdning. På en webbplats du själv styr ger WebP eller AVIF med JPEG som reserv samma utseende med färre byte. Om din mobil sparar HEIC-filer, konvertera dem till JPEG innan du laddar upp någonstans som inte anger HEIC.

Friläggningar och transparenta bilder

Använd PNG när filen måste fungera överallt: i presentationer, dokument, designverktyg och de flesta uppladdningsformulär. Använd WebP när du placerar bilden på din egen webbsida och vill att den ska vara liten. Använd JPEG bara om du medvetet har fyllt bakgrunden med en enfärgad bakgrund, till exempel vitt för en marknadsplats.

Skärmbilder och diagram

PNG, eller förlustfri WebP. Format med förlust gör text suddig.

Visa moderna format med en reserv

Har du en egen webbplats behöver du inte välja ett enda format. HTML-elementet picture låter webbläsaren välja det första format den förstår:

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.png" alt="Leather wallet, front view" width="1200" height="1200">
</picture>

Webbläsare som stöder AVIF tar den första källan, andra faller tillbaka på WebP, och allt äldre använder PNG:n. Många webbhotell och bild-CDN:er gör konverteringen åt dig utifrån webbläsarens Accept-header, vilket ofta är enklare än att skapa varje format själv.

Konvertera mellan format utan överraskningar

• PNG eller WebP till JPEG: transparenta ytor plattas till. Välj fyllnadsfärgen själv (oftast vitt) i stället för att låta verktyget välja, eftersom vissa verktyg använder svart som standard.
• JPEG till PNG: filen blir större men inte bättre. Kvaliteten som förlorades i JPEG:en kommer inte tillbaka.
• Valfritt format till WebP eller AVIF: kontrollera att transparensen överlevde och att färgerna ser rätt ut; konvertera först till färgprofilen sRGB om bilden ska visas på webben.
• Spara om JPEG: varje sparning med lägre kvalitet förvärrar förlusten. Exportera en gång från originalet.

Ett snabbare alternativ för friläggningar

Om du tar bort bakgrunder i stora mängder exporterar removebackground.dev friläggningen som transparent PNG eller WebP, eller som JPG på valfri enfärgad bakgrund, så att du kan ta fram en JPEG på vitt för marknadsplatsen och en transparent PNG för din webbplats från samma uppladdning.