1. Hjem
2. Bildeformater

Bildeformater sammenlignet: JPEG, PNG, WebP og AVIF

Fire formater dekker mer enn 99 % av bildene på moderne web. De gjør svært ulike avveininger mellom komprimering, gjennomsiktighet, animasjon og nettleserstøtte. Her er en praktisk guide for å velge riktig.

Sammenligning side ved side

Rask oversikt først, full gjennomgang av hvert format nedenfor.

JPEG — det universelle førstevalget

Slik fungerer det

JPEG (Joint Photographic Experts Group) ble standardisert i 1992 og er det eldste av de fire formatene. Det bruker diskret cosinus-transform på 8×8-blokker, etterfulgt av kvantisering og entropikoding. Kvalitet styres av et tall 1–100. Moderne kodere som MozJPEG utnytter 10–20 % mer av formatet uten å endre bitstrømmen, så alle dekodere kan lese resultatet.

Passer best til

Fotomateriale med myke toneoverganger og mye detalj — portretter, landskap, produktfoto, store headerbilder.

Fordeler

• Støttes i praksis alle bildevisere.
• Maskinvareakselerert dekoding nesten overalt.
• Modent økosystem av optimalisører (MozJPEG, jpegli).

Ulemper

• Ingen alfa — bakgrunner må flates ut.
• Blokkartefakter på tekst, linjegrafikk og skarpe kanter.
• Kun 8 bit per kanal.

PNG — tapsfritt og gjennomsiktig

Slik fungerer det

PNG (Portable Network Graphics) ble laget på 1990-tallet som fri erstatning for GIF. Det er strengt tapsfritt: DEFLATE oppå radfiltrering. Optimalisører som oxipng (Rust-port av optipng) tester filter/kombinasjoner for minste fil uten å endre én piksel.

Passer best til

UI, ikoner, skjermbilder, diagrammer, strektegning, logoer med flate farger og alt som trenger ekte alfa.

Fordeler

• Tapsfritt — piksler overlever rundturen uendret.
• 8-bit alfa, opptil 16 bit per kanal.
• Bred støtte.

Ulemper

• Store foto — ofte flere ganger større enn JPEG/WebP/AVIF.
• Ingen animasjon i originalspesifikasjonen (APNG kom senere).

WebP — web først fra Google

Slik fungerer det

WebP ble lansert av Google i 2010, bygget på VP8 og senere med eget tapsfritt modus. Både lossy og lossless i samme beholder, med alfa og animasjon. I lossy-modus slår det ofte JPEG med 25–35 % ved samme kvalitet. I lossless slår det PNG med 20–30 %.

Passer best til

Generell webbruk når AVIF ikke er trygt — foto, sprites med gjennomsiktighet, erstatning for animert GIF, reservelag under AVIF.

Fordeler

• Ett format for foto, grafikk, alfa og animasjon.
• Betydelig mindre enn JPEG og PNG ved samme kvalitet.
• Bred støtte: aktuelle nettlesere siden 2020.

Ulemper

• 8 bit per kanal — ikke HDR.
• Tregere å dekode enn JPEG på enkle enheter.

AVIF — ledende i komprimering

Slik fungerer det

AVIF (AV1 Image File Format) er stillbildeprofil for AV1-videokodeken, lansert 2019 av Alliance for Open Media. Opptil 12-bit farge, full alfa, HDR, bredt fargeomfang og filmkorn. Referansekoderen (aom-av1 i libavif) er treg men gir best komprimering for ekte foto i dag.

Passer best til

Store headerbilder, gallerier og overalt der båndbredde veier tyngre enn CPU-tid. Passer som toppnivå i <picture>.

Fordeler

• Toppkomprimering — ofte 40–60 % mindre enn JPEG.
• Støtte for alfa, animasjon, HDR, bredt fargeomfang, 10/12-bit.
• Åpen og avgiftsfri.

Ulemper

• Treg å kode — planlegg byggetid eller asynkron koding.
• Safari fikk støtte først i versjon 16 (2022).
• Dårligere på syntetisk grafikk enn lossless WebP eller PNG.

Hvilket format bør jeg velge?

• Foto, store liggende headerbilder: AVIF primært, WebP og JPEG som reserve via <picture>.
• UI med gjennomsiktighet (ikoner, logoer): PNG for eldre miljøer, lossless WebP for mindre filer.
• Linjegrafikk, skjermbilder, diagrammer: PNG (eller lossless WebP) — JPEG/AVIF straffer skarpe kanter.
• Bytt ut animert GIF: WebP eller AVIF — mye mindre filer med ekte alfa.
• Ett format til alle i dag: JPEG for foto, PNG for grafikk. Ikke minst filstørrelse, men uten kompatibilitetsproblemer.

Du trenger sjelden bare ett. Server AVIF først, WebP som nummer to og JPEG eller PNG sist i <picture> — hver nettleser får minste variant den kan dekode.