Effektive billedformater

Det er afgørende for nettets ydeevne at vælge det rigtige billedformat. Det handler om at finde balancen mellem billedkvalitet og filstørrelse.

Mindre billedfiler betyder hurtigere indlæsning, hvilket forbedrer brugeroplevelsen og endda kan forbedre din placering i søgemaskiner.

JPEG (Joint Photographic Experts Group) er ideelt til fotografier og komplekse billeder med mange farver. Det bruger komprimering med tab, hvilket betyder, at nogle billeddata fjernes permanent for at reducere filstørrelsen.

Det giver en god komprimering af fotos, men gentagen lagring kan forringe kvaliteten. JPEG understøtter IKKE gennemsigtighed.

PNG (Portable Network Graphics) er bedst til billeder, der kræver skarpe linjer, ensfarvede områder og især gennemsigtighed, f.eks. logoer, ikoner og illustrationer.

Det bruger tabsfri komprimering, hvilket betyder, at ingen data går tabt under komprimeringen. Det giver højere kvalitet, men ofte større filer end JPEG-filer med tilsvarende fotografisk indhold.

GIF (Graphics Interchange Format) er kendt for at kunne vise enkle animationer. Det understøtter gennemsigtighed, men er begrænset til en palet på 256 farver.

Denne farvebegrænsning gør GIF uegnet til fotografier eller komplekse billeder. Det egner sig bedst til korte, enkle animationer eller meget små grafikker med få farver.

WebP er et moderne billedformat udviklet af Google. Det er udviklet til at give bedre komprimering med og uden tab af billeder på nettet, hvilket ofte resulterer i betydeligt mindre filer.

WebP-billeder kan være 25-35 % mindre end tilsvarende JPEG- eller PNG-filer, hvilket giver hurtigere sideindlæsninger uden et mærkbart kvalitetstab.

WebP kombinerer de bedste funktioner fra ældre formater:

• Mindre filstørrelser: Reducerer filstørrelsen betydeligt for både fotografiske billeder og grafik.
• Gennemsigtighed: Understøtter gennemsigtighed via alfakanal ligesom PNG.
• Animation: Kan også understøtte animation ligesom GIF, men med bedre komprimering.
• Fleksibilitet: Tilbyder både komprimering med tab (til fotos) og tabsfri komprimering (til grafik).

AVIF (AV1 Image File Format) er et endnu nyere billedformat baseret på videocodec'et AV1. Det har den højeste komprimeringseffektivitet blandt de aktuelle billedformater.

AVIF kan skabe endnu mindre filer end WebP, ofte yderligere 10-20 % mindre, samtidig med at billedkvaliteten forbliver fremragende. Det vinder frem på grund af sin bedre ydeevne.

AVIF byder på flere forbedringer:

• Højeste komprimering: Giver de mindste filer for både billeder med tab og tabsfri billeder.
• HDR-understøttelse: Understøtter billeder med High Dynamic Range (HDR), hvilket giver rigere farver og større kontrast.
• Bredere farvespektrum: Kan vise et bredere farveområde end ældre formater.
• Gennemsigtighed og animation: Understøtter også gennemsigtighed og animation.

Valget af det bedste format afhænger af billedets indhold og dine krav til browserunderstøttelse:

• Fotografier: AVIF > WebP > JPEG
• Logoer/grafik (med gennemsigtighed): AVIF > WebP > PNG
• Simple animationer: AVIF > WebP > GIF
• Understøttelse af ældre browsere: JPEG, PNG og GIF giver stadig den bredeste browserkompatibilitet.

Moderne formater som AVIF og WebP foretrækkes generelt af hensyn til ydeevnen.

Hvis du vil udnytte moderne formater og samtidig sikre kompatibilitet, skal du bruge HTML-elementet <picture>. Det giver dig mulighed for at angive flere billedkilder, så browseren kan vælge det bedst understøttede format.

Browseren forsøger at indlæse det første <source>-element, den understøtter. Tagget <img> fungerer som fallback for browsere, der ikke understøtter <picture> eller nogen af <source>-typerne.

Vi har gennemgået vigtige billedformater og deres bedste anvendelser til webydeevne:

• JPEG: Bedst til fotografier (med tab).
• PNG: Bedst til grafik og gennemsigtighed (tabsfrit).
• GIF: Til simple animationer med få farver.
• WebP: Moderne og effektivt format, der understøtter komprimering med og uden tab, gennemsigtighed og animation.
• AVIF: Næste generations format med den højeste komprimering og understøttelse af HDR.
• Elementet <picture> er vigtigt, når du skal levere moderne formater med robuste fallbacks.

Ved at vælge det rigtige format og bruge teknikker som <picture> kan du forbedre dit websteds indlæsningstider betydeligt!