1. Startsida
2. Bildformat

Bildformat jämförda: JPEG, PNG, WebP och AVIF

Fyra format täcker mer än 99 % av bilderna på moderna webben. De gör mycket olika avvägningar mellan kompression, transparens, animation och webbläsarstöd. Här är en praktisk guide för att välja rätt.

Jämförelse sida vid sida

Snabb överblick först, full genomgång av varje format nedan.

JPEG — det universella grundvalet

Så fungerar det

JPEG (Joint Photographic Experts Group) standardiserades 1992 och är det äldsta av de fyra formaten. Det använder en diskret cosinus-transform på 8×8-block, följt av kvantisering och entropikodning. Kvalitet styrs av ett tal 1–100. Moderna encoders som MozJPEG får ut 10–20 % mer ur formatet utan att ändra bitströmmen, så alla avkodare kan läsa resultatet.

Passar bäst till

Fotomaterial med mjuka tonövergångar och mycket detalj — porträtt, landskap, produktfoto, stora rubrikbilder.

Fördelar

• Stöds i i princip alla bildvisare.
• Maskinvaruaccelererad avkodning nästan överallt.
• Moget ekosystem av optimerare (MozJPEG, jpegli).

Nackdelar

• Ingen alfa — bakgrunder måste plattas ut.
• Blockartefakter på text, linjegrafik och skarpa kanter.
• Endast 8 bitar per kanal.

PNG — förlustfritt och transparent

Så fungerar det

PNG (Portable Network Graphics) skapades på 1990-talet som fritt ersättare för GIF. Det är strikt förlustfritt: DEFLATE ovanpå rad-filtrering. Optimerare som oxipng (Rust-port av optipng) testar filter/kombinationer för minsta fil utan att ändra en pixel.

Passar bäst till

UI, ikoner, skärmdumpar, diagram, linjeteckning, logotyper med platta färger och allt som behöver riktig alfa.

Fördelar

• Förlustfritt — pixlar överlever rundresan oförändrade.
• 8-bit alfa, upp till 16 bitar per kanal.
• Brett stöd.

Nackdelar

• Stora foton — ofta flera ggr större än JPEG/WebP/AVIF.
• Ingen animation i originalspecen (APNG kom senare).

WebP — webbförst från Google

Så fungerar det

WebP släpptes av Google 2010, byggd på VP8 och senare med separat förlustfritt läge. Både lossy och lossless i samma behållare, med alfa och animation. I lossy-läge slår det ofta JPEG med 25–35 % vid samma kvalitet. I lossless slår det PNG med 20–30 %.

Passar bäst till

Generell webbutskick när AVIF inte är säkert — foton, sprajtar med transparens, ersättare för animerad GIF, reservlager under AVIF.

Fördelar

• Ett format för foton, grafik, alfa och animation.
• Betydligt mindre än JPEG och PNG vid samma kvalitet.
• Brett stöd: aktuella webbläsare sedan 2020.

Nackdelar

• 8 bitar per kanal — inget HDR.
• Långsammare att avkoda än JPEG på vissa enkla enheter.

AVIF — ledande i kompression

Så fungerar det

AVIF (AV1 Image File Format) är stillbildsprofil för AV1-videokodeken, släppt 2019 av Alliance for Open Media. Upp till 12-bit färg, full alfa, HDR, vitt färgomfång och filmkorn. Referensencodern (aom-av1 i libavif) är långsam men ger bäst kompression för verkliga foton idag.

Passar bäst till

Stora rubrikbilder, gallerier och överallt där bandbredd väger tyngre än CPU-tid. Passar som toppnivå i <picture>.

Fördelar

• Toppkompression — ofta 40–60 % mindre än JPEG.
• Stöd för alfa, animation, HDR, vitt färgomfång, 10/12-bit.
• Öppen och avgiftsfri.

Nackdelar

• Långsam att koda — planera byggtid eller asynk kodning.
• Safari fick stöd först i version 16 (2022).
• Sämre på syntetisk grafik än lossless WebP eller PNG.

Vilket format ska jag välja?

• Foton, stora liggande rubrikbilder: AVIF primärt, WebP och JPEG som reserv via <picture>.
• UI med transparens (ikoner, loggor): PNG för äldre miljöer, lossless WebP för mindre filer.
• Linjegrafik, skärmdumpar, diagram: PNG (eller lossless WebP) — JPEG/AVIF straffar skarpa kanter.
• Byt ut animerad GIF: WebP eller AVIF — mycket mindre filer med riktig alfa.
• Ett format till alla idag: JPEG för foton, PNG för grafik. Inte minst filstorlek, men utan kompatibilitetsproblem.

Du måste sällan välja bara ett. Servera AVIF först, WebP som tvåa och JPEG eller PNG sist i <picture> — varje webbläsare får minsta variant den kan avkoda.