Effektive bildeformater

Det er avgjørende for nett-ytelsen å velge riktig bildeformat. Det handler om å finne en balanse mellom bildekvalitet og filstørrelse.

Mindre bildefiler gir raskere innlasting, noe som forbedrer brukeropplevelsen og til og med kan gi bedre rangering i søkemotorer.

JPEG (Joint Photographic Experts Group) egner seg godt for fotografier og komplekse bilder med mange farger. Det bruker komprimering med datatap, noe som betyr at deler av bildedataene fjernes permanent for å redusere filstørrelsen.

Formatet gir svært god komprimering for fotografier, men gjentatt lagring kan forringe kvaliteten. JPEG støtter IKKE gjennomsiktighet.

PNG (Portable Network Graphics) egner seg best for bilder som krever skarpe linjer, ensfargede flater og særlig gjennomsiktighet, for eksempel logoer, ikoner og illustrasjoner.

Det bruker tapsfri komprimering, noe som betyr at ingen data går tapt under komprimeringen. Resultatet er høyere kvalitet, men ofte større filer enn JPEG for tilsvarende fotografisk innhold.

GIF (Graphics Interchange Format) er kjent for å kunne vise enkle animasjoner. Det støtter gjennomsiktighet, men er begrenset til en palett på 256 farger.

Denne fargebegrensningen gjør GIF uegnet for fotografier eller komplekse bilder. Formatet egner seg best for korte, enkle animasjoner eller svært liten grafikk med få farger.

WebP er et moderne bildeformat utviklet av Google. Målet er å gi bedre komprimering med og uten datatap for bilder på nettet, noe som ofte gir betydelig mindre filer.

WebP-bilder kan være 25–35 % mindre enn tilsvarende JPEG- eller PNG-filer, noe som gir raskere sideinnlasting uten merkbart kvalitetsfall.

WebP kombinerer de beste egenskapene fra eldre formater:

• Mindre filstørrelser: Reduserer filstørrelsen betydelig for både fotografiske bilder og grafikk.
• Gjennomsiktighet: Støtter gjennomsiktighet med alfakanal, akkurat som PNG.
• Animasjon: Kan også støtte animasjon, på samme måte som GIF, men med bedre komprimering.
• Fleksibilitet: Tilbyr både komprimering med datatap (for fotografier) og tapsfri komprimering (for grafikk).

AVIF (AV1 Image File Format) er et enda nyere bildeformat basert på videokodeken AV1. Det gir den høyeste komprimeringseffektiviteten blant dagens bildeformater.

AVIF kan gi enda mindre filer enn WebP, ofte ytterligere 10–20 % mindre, samtidig som bildekvaliteten holder seg svært god. Formatet blir stadig mer utbredt på grunn av den gode ytelsen.

AVIF byr på flere forbedringer:

• Høyest komprimering: Gir de minste filstørrelsene for både bilder med og uten datatap.
• HDR-støtte: Støtter bilder med High Dynamic Range (HDR), som gir rikere farger og større kontrast.
• Bredere fargespekter: Kan vise et bredere utvalg av farger enn eldre formater.
• Gjennomsiktighet og animasjon: Støtter også gjennomsiktighet og animasjon.

Valg av det beste formatet avhenger av bildeinnholdet og behovet for nettleserstøtte:

• Fotografier: AVIF > WebP > JPEG
• Logoer/grafikk (med gjennomsiktighet): AVIF > WebP > PNG
• Enkle animasjoner: AVIF > WebP > GIF
• Støtte for eldre nettlesere: JPEG, PNG og GIF gir fortsatt den bredeste nettleserkompatibiliteten.

Moderne formater som AVIF og WebP foretrekkes vanligvis av hensyn til ytelsen.

For å dra nytte av moderne formater og samtidig sikre kompatibilitet kan De bruke HTML-elementet <picture>. Det lar Dem angi flere bildekilder, slik at nettleseren kan velge formatet den støtter best.

Nettleseren prøver å laste inn den første <source>-kilden den støtter. <img>-taggen fungerer som en reserve for nettlesere som ikke støtter <picture> eller noen av <source>-typene.

Vi har sett på viktige bildeformater og når de egner seg best for bedre nettytelse:

• JPEG: Best for fotografier (med kvalitetstap).
• PNG: Best for grafikk og gjennomsiktighet (uten kvalitetstap).
• GIF: For enkle animasjoner med få farger.
• WebP: Moderne og effektivt, med støtte for komprimering med og uten kvalitetstap, gjennomsiktighet og animasjon.
• AVIF: Neste generasjonsformat med høyest komprimering og støtte for HDR.
• Elementet <picture> er avgjørende for å levere moderne formater med robuste reservemekanismer.

Ved å velge riktig format og bruke teknikker som <picture> kan De redusere nettstedets innlastingstid betydelig!