1. Forside
2. Billedformater

Billedformater sammenlignet: JPEG, PNG, WebP og AVIF

Fire formater dækker mere end 99 % af billederne på det moderne web. De har meget forskellige afvejninger mellem komprimering, gennemsigtighed, animation og browserunderstøttelse. Her er en praktisk guide til at vælge det rigtige.

Sammenligning side om side

Kort overblik først, fuld gennemgang af hvert format nedenfor.

JPEG — det universelle udgangspunkt

Sådan virker det

JPEG (Joint Photographic Experts Group) blev standardiseret i 1992 og er det ældste af de fire formater. Det bruger en tabsgivende diskret cosinus- transform på 8×8-pixelblokke, efterfulgt af kvantisering og entropikodning. Kvalitet styres af ét tal fra 1 til 100. Moderne encodere som MozJPEG presser 10–20 % mere ud af formatet uden at ændre bitstrømmen, så enhver JPEG-afkoder kan læse dem.

Bedst til

Fotografisk indhold med bløde toneovergange og masser af detalje — portrætter, landskaber, produktfotos, hero-billeder.

Fordele

• Understøttes af stort set alle billedfremvisere.
• Hardwareaccelereret afkodning næsten overalt.
• Modent økosystem af optimeringsværktøjer (MozJPEG, jpegli).

Ulemper

• Ingen alfakanal — baggrunde skal flades ud.
• Blokartefakter ved tekst, linjetegning og skarpe kanter.
• Kun 8 bit pr. kanal.

PNG — tabsfri og gennemsigtig

Sådan virker det

PNG (Portable Network Graphics) blev skabt i 1990’erne som fri, patentfri erstatning for GIF. Det er strengt tabsfrit: DEFLATE oven på per-række pixelfiltrering. Optimeringsværktøjer som oxipng (Rust-port af optipng) prøver filter-/komprimeringskombinationer for den mindste repræsentation uden at ændre én pixel.

Bedst til

UI-grafik, ikoner, skærmbilleder, diagrammer, linjetegning, logoer med flade farver og alt der kræver en rigtig alfakanal.

Fordele

• Tabsfrit — pixels overlever rundturen uændret.
• Fuld 8-bit alfa, op til 16 bit pr. kanal.
• Universelt understøttet.

Ulemper

• Stort ved fotos — ofte mange gange større end JPEG/WebP/AVIF.
• Ingen animation i originalspec (APNG er en senere udvidelse).

WebP — Googles webformat

Sådan virker det

WebP blev udgivet af Google i 2010, baseret på VP8-videocodec og senere udvidet med et separat tabsfrit tilstand. Det understøtter både tabsgivende og tabsfri komprimering i én beholder, med valgfri alfa og animation. I tabsgivende tilstand slår det typisk JPEG med 25–35 % ved samme kvalitet. I tabsfri tilstand slår det PNG med 20–30 %.

Bedst til

Generel weblevering når AVIF end ikke er sikkert — fotos, sprites med gennemsigtighed, erstatning for animeret GIF, og som reservelag under AVIF.

Fordele

• Ét format til fotos, grafik, alfa og animation.
• Betydeligt mindre end JPEG og PNG ved sammenlignelig kvalitet.
• Bred understøttelse: aktuelle browsere siden 2020.

Ulemper

• 8 bit pr. kanal — intet HDR.
• Langsommere at afkode end JPEG på nogle enkle enheder.

AVIF — førende i komprimering

Sådan virker det

AVIF (AV1 Image File Format) er en stillbilledeprofil af AV1-video- codecen, udgivet i 2019 af Alliance for Open Media. Op til 12-bit farve, fuld alfa, HDR, vidt farverum og filmkorn. Referenceencoderen (aom-av1 i libavif) er langsom men opnår den bedste komprimering til rigtige fotos i dag.

Bedst til

Store hero-billeder, gallerier og overalt hvor båndbredde vejer tungere end CPU- tid. Fungerer godt som øverste lag i et <picture>-element.

Fordele

• Bedste komprimering i klassen — typisk 40–60 % mindre end JPEG.
• Understøtter alfa, animation, HDR, vidt farverum og 10/12-bit dybde.
• Royaltyfri og åben.

Ulemper

• Langsom at kode — planlæg build-tid eller asynkron kodning.
• Safari fik først understøttelse i version 16 (2022).
• Mindre velegnet til syntetisk grafik end tabsfri WebP eller PNG.

Hvilket format skal jeg bruge?

• Fotos, fuldbredde hero-billeder: AVIF som primært format, WebP og JPEG som reserve via <picture>.
• UI med gennemsigtighed (ikoner, logoer): PNG til ældre miljøer, tabsfri WebP til mindre filer.
• Linjetegning, skærmbilleder, diagrammer: PNG (eller tabsfri WebP) — JPEG/AVIF straffer skarpe kanter.
• Erstatning for animeret GIF: WebP eller AVIF — begge meget mindre med rigtig alfa.
• Ét format til alle browsere i dag: JPEG til fotos, PNG til grafik. Ikke mindst filstørrelse, men nul kompatibilitetsgæld.

I praksis behøver du sjældent vælge kun ét. Server AVIF først, WebP som to og JPEG eller PNG sidst i <picture> — hver browser får den mindste version, den kan afkode.