Bildformat jämförda: JPG vs PNG vs WebP vs AVIF (2026)

Bildformatet du väljer påverkar sidladdningstid, SEO-rankning (Core Web Vitals), bandbreddskostnader, visuell kvalitet, webbläsarkompatibilitet och tillgänglighet. 2026 är svaret inte längre “bara använd JPG”, moderna format sparar 50-70 % på filstorlek vid likvärdig kvalitet.

Denna guide jämför de fyra format som spelar roll idag: JPG, PNG, WebP, AVIF. Plus en notering om HEIC (Apple), TIFF (utskrift) och SVG (vektor).

Snabbreferenstabell

Format	Komprimering	Transparens	Animation	Webbläsarstöd (2026)	Bäst för
JPG	Förlustfyllt	❌	❌	100 %	Foton, e-post, max kompatibilitet
PNG	Förlustfritt	✅	❌	100 %	Logotyper, ikoner, skärmdumpar
WebP	Förlustfyllt eller förlustfritt	✅	✅	96 %	Modern webb (standard 2026)
AVIF	Förlustfyllt eller förlustfritt	✅	✅	92 %	Prestandakritisk webb
HEIC	Förlustfyllt	✅	✅	Endast iOS/macOS	Apple-enhetslagring
GIF	Förlustfritt	Endast 1-bit	✅	100 %	Endast äldre animationer
SVG	Förlustfri vektor	✅	✅	100 %	Logotyper, ikoner, illustrationer (vilken storlek som helst)

JPG (JPEG)

Född 1992. Universellt stödd. Förlustfylld komprimering med kvalitetsreglage (1-100). Vid kvalitet 75-85, omöjlig att skilja från originalet med blotta ögat samtidigt som den är 5-10× mindre än källans RAW.

Styrkor:

• Universell kompatibilitet (bokstavligen överallt).
• Små filer för foton.
• Mogen, välförståd komprimering.

Svagheter:

• Ingen transparens (måste använda solid bakgrund).
• Komprimeringsartefakter vid låg kvalitet (blockighet, halos).
• Ingen animation.
• Äldre standard, ersatt för modern webb.

Använd det när: e-postar foton, skickar till gamla system, max kompatibilitet spelar roll, ingen transparens behövs.

PNG (Portable Network Graphics)

Född 1996. Förlustfri komprimering. Två varianter: PNG-8 (256 färger, GIF-ersättning) och PNG-24 (16 miljoner färger, fotokvalitet). Båda stöder transparens (8-bitars alfakanal), den dödande funktionen.

Styrkor:

• Förlustfritt: bit-perfekt kopia av originalet, inga artefakter någonsin.
• Transparensstöd (alfakanal).
• Skarpt vid vilken zoomnivå som helst (ingen komprimeringsblockighet).
• Universell kompatibilitet.

Svagheter:

• Mycket större än JPG för fotografier (2-5× större).
• Ingen animation (använd APNG, men stödet är blandat).
• Mindre effektiv komprimering än moderna format.

Använd det när: logotyper, ikoner, skärmdumpar, linjekonst, illustrationer, varhelst du behöver skarpa linjer eller transparens.

WebP

Skapad av Google 2010. Förlustfyllt läge rivaliserar JPG med ~25-35 % bättre komprimering vid samma kvalitet. Förlustfritt läge rivaliserar PNG med ~25 % bättre komprimering. Animationsläge rivaliserar GIF med massivt bättre kvalitet och komprimering.

2026 är WebP-stödet 96 % globalt, varje modern webbläsare (Chrome, Firefox, Safari 14+, Edge) stöder det inhemskt. Endast uråldriga webbläsare och vissa e-postklienter saknar stöd.

Styrkor:

• Bästa balansen mellan komprimeringseffektivitet, kompatibilitet och funktionsuppsättning.
• Ett format täcker förlustfyllda, förlustfria och animerade behov.
• Stöds av alla moderna bild-CDN:er (Cloudinary, Imgix, Cloudflare Images).
• Gratis och öppet (royalty-free).

Svagheter:

• Något långsammare avkodning än JPG (försumbar på modern hårdvara).
• Vissa äldre programvaror (Photoshop CS5 och äldre) kräver plugin.
• Kodning marginellt långsammare än JPG.

Använd det när: var som helst på modern webb. WebP bör vara din standard 2026 om inte en specifik anledning argumenterar annorlunda.

AVIF (AV1 Image File Format)

Släppt 2019, baserat på AV1-videocodecen. Det mest komprimeringseffektiva brett stödda formatet 2026, vanligtvis 25-35 % mindre än WebP vid samma kvalitet.

Stöd 2026: ~92 % globalt. Alla större webbläsare stöder det (Chrome 85+, Firefox 93+, Safari 16.4+, Edge). Vissa specifika miljöer (e-postklienter, mycket gammal företagsprogramvara) gör det inte.

Styrkor:

• Bästa komprimeringen av något brett stött format.
• Stöder HDR (high dynamic range, 10/12-bitars färgdjup).
• Stöder transparens, animation.
• Öppet och royalty-free.
• Utmärkt kvalitet även vid mycket låga bitfrekvenser.

Svagheter:

• Kodning är långsam (10-30× långsammare än JPG). Inte bra för kodning vid begäran.
• Långsammare avkodning än WebP (fortfarande millisekunder, men mätbar).
• Något mindre kompatibel än WebP.
• Inte ännu allestädes närvarande i bildredigeringsprogramvara.

Använd det när: prestandakritiska sajter där varje KB spelar roll. För-koda vid byggtid, leverera med WebP- och JPG-fallbacks.

Bästa praxis 2026: <picture> med fallbacks

Välj inte ett format, leverera det bästa varje webbläsare stöder:

<picture>
  <source srcset="/photo.avif" type="image/avif">
  <source srcset="/photo.webp" type="image/webp">
  <img src="/photo.jpg" alt="Beskrivning" width="1200" height="800" loading="lazy" decoding="async">
</picture>

Moderna webbläsare väljer AVIF, något äldre webbläsare faller tillbaka till WebP, mycket gamla webbläsare får JPG. Allt samtidigt som de delar samma <img>-semantik och alt-text.

Ramverk automatiserar detta:

• Next.js: <Image>-komponenten hanterar AVIF/WebP/JPG automatiskt.
• Astro: <Image> från astro:assets gör samma sak.
• Cloudinary / Imgix: leverera baserat på Accept: image/avif request-header.

Vad gäller HEIC?

HEIC (High Efficiency Image Container) är vad din iPhone sparar. Samma komprimeringsfamilj som AVIF (HEVC-videocodec). Utmärkt komprimering, stöder transparens och HDR.

Problem: endast Apple-enheter stöder HEIC inhemskt. Windows, Android-webbläsare, webbservrar, bildprogramvara behöver alla plugins eller konvertering.

Bästa praxis: konvertera HEIC till JPG eller WebP innan delning eller webbpublicering. HEIC till JPG gör detta i din webbläsare.

Vad gäller TIFF, BMP, GIF?

• TIFF: pre-press / professionell utskriftsarkivering. Massiva filer, ingen komprimering som standard. Använd inte på webben.
• BMP: äldre Windows-format. Ingen komprimering. Använd inte någonstans 2026.
• GIF: 1-bit transparens, 256 färger, förlustfritt. Animation fungerar men ineffektivt, varje modernt alternativ (WebP, AVIF, även MP4-video) är bättre. Använd endast för bakåtkompatibilitet.

Vad gäller SVG?

SVG är vektor, inte ett konkurrerande format för fotografier, men oslagbar för logotyper, ikoner, illustrationer, diagram. Upplösningsoberoende (skalas oändligt utan kvalitetsförlust), liten filstorlek för enkel grafik, stöder CSS-styling och JS-interaktion.

Använd SVG för: logotyper, ikoner (faviconer), datavisualiseringar, enkla illustrationer, vilken grafik som helst som ritas snarare än fotograferas.

Favicon-generator matar ut SVG-varianter för moderna webbläsare.

Beslutsträd för att välja format

1. Är det en logotyp, ikon eller enkel grafik? → SVG.
2. Fotografiskt innehåll utan transparens behov? → AVIF (byggtid) → WebP-fallback → JPG-fallback.
3. Fotografiskt innehåll med transparens? → AVIF eller WebP (båda stöder alfa) → PNG-fallback.
4. Logotyp, skärmdump eller grafik med transparens? → PNG (eller WebP-förlustfri för storlek).
5. Maximal e-post/äldre kompatibilitet? → JPG (ingen transparens) eller PNG (med transparens).
6. Animation? → WebP (eller AVIF om nyare webbläsare är okej) → GIF endast som sista utväg.

Verkliga konverteringsvägar

Fotograf som levererar till klient: behåll RAW-master, leverera JPG kvalitet 95 (webb) eller TIFF (utskrift).

Webmaster optimerar befintlig sajt: bulkkonvertera alla PNG/JPG till AVIF + WebP vid byggtid. Leverera via <picture>.

E-handelsproduktfoton: WebP kvalitet 80 är sweet spot. AVIF om din trafikprofil motiverar kodningstiden.

Blogg-hjältebilder: AVIF (med WebP- och JPG-fallback), Core Web Vitals belönar dig för det.

Sociala medier-omslagsbild: JPG eller PNG. De flesta plattformar omkodar ändå, så bry dig inte om WebP/AVIF vid uppladdning.

E-postsignatur: PNG (max kompatibilitet, transparensstöd) eller JPG (mindre).

Sammanfattning

2026 är den moderna webbbildstacken AVIF → WebP → JPG, levererad via <picture> med fallbacks, med PNG och SVG som behåller sina roller för grafik och logotyper.

För engångskonverteringar hanterar Konvertera bild hela matrisen lokalt, din bild når aldrig en server, stöder JPG, PNG, WebP och AVIF som både indata och utdata. Använd det vid behov, men förstå vad varje format optimerar för så att dina val är medvetna.