Effektiva bildformat

Att välja rätt bildformat är avgörande för webbprestandan. Det handlar om att balansera bildkvalitet och filstorlek.

Mindre bildfiler innebär snabbare laddningstider, vilket förbättrar användarupplevelsen och till och med kan förbättra webbplatsens placering i sökresultaten.

JPEG (Joint Photographic Experts Group) passar bäst för fotografier och komplexa bilder med många färger. Formatet använder förstörande komprimering, vilket innebär att en del bilddata tas bort permanent för att minska filstorleken.

Det ger effektiv komprimering för foton, men upprepad lagring kan försämra kvaliteten. JPEG stöder INTE transparens.

PNG (Portable Network Graphics) passar bäst för bilder som kräver skarpa linjer, enfärgade ytor och särskilt transparens, till exempel logotyper, ikoner och illustrationer.

Formatet använder förlustfri komprimering, vilket innebär att inga data går förlorade under komprimeringen. Det ger högre kvalitet, men ofta större filer jämfört med JPEG för liknande fotografiskt innehåll.

GIF (Graphics Interchange Format) är känt för sin förmåga att visa enkla animationer. Det stöder transparens men är begränsat till en palett med 256 färger.

Denna färgbegränsning gör GIF olämpligt för fotografier eller komplexa bilder. Det passar bäst för korta, enkla animationer eller mycket små bilder med få färger.

WebP är ett modernt bildformat som utvecklats av Google. Det är utformat för att ge överlägsen förstörande och förlustfri komprimering av bilder på webben, vilket ofta resulterar i betydligt mindre filstorlekar.

WebP-bilder kan vara 25–35 % mindre än jämförbara JPEG- eller PNG-filer, vilket ger snabbare sidladdningar utan någon märkbar kvalitetsförlust.

WebP kombinerar de bästa egenskaperna hos äldre format:

• Mindre filstorlekar: Minskar filstorleken avsevärt för både fotografiska bilder och grafik.
• Transparens: Stöder transparens med alfakanal, precis som PNG.
• Animation: Kan också stödja animation, ungefär som GIF, men med bättre komprimering.
• Flexibilitet: Erbjuder både förstörande komprimering för foton och förlustfri komprimering för grafik.

AVIF (AV1 Image File Format) är ett ännu nyare bildformat baserat på videokodeken AV1. Det erbjuder den högsta komprimeringseffektiviteten bland dagens bildformat.

AVIF kan ge ännu mindre filstorlekar än WebP, ofta ytterligare 10–20 %, samtidigt som bildkvaliteten förblir utmärkt. Formatet blir allt vanligare tack vare sin överlägsna prestanda.

AVIF erbjuder flera förbättringar:

• Högsta komprimering: Ger de minsta filstorlekarna för både förstörande och förlustfria bilder.
• HDR-stöd: Stöder bilder med High Dynamic Range (HDR), vilket ger rikare färger och större kontrast.
• Bredare färgomfång: Kan visa ett bredare färgomfång än äldre format.
• Transparens och animation: Stöder även transparens och animation.

Vilket format som är bäst beror på bildens innehåll och vilka webbläsare som behöver stödjas:

• Fotografier: AVIF > WebP > JPEG
• Logotyper/grafik (med transparens): AVIF > WebP > PNG
• Enkla animeringar: AVIF > WebP > GIF
• Stöd för äldre webbläsare: JPEG, PNG och GIF erbjuder fortfarande den bredaste webbläsarkompatibiliteten.

Moderna format som AVIF och WebP föredras i allmänhet av prestandaskäl.

Om du vill använda moderna format och samtidigt säkerställa kompatibilitet kan du använda HTML-elementet <picture>. Det låter dig ange flera bildkällor så att webbläsaren kan välja det format som stöds bäst.

Webbläsaren försöker läsa in den första <source> som den stöder. Taggen <img> fungerar som reservlösning för webbläsare som inte stöder <picture> eller någon av <source>-typerna.

Vi har gått igenom viktiga bildformat och deras bästa användningsområden för webbprestanda:

• JPEG: Bäst för fotografier (med förstörande komprimering).
• PNG: Bäst för grafik och transparens (förlustfri komprimering).
• GIF: För enkla animeringar med få färger.
• WebP: Modernt och effektivt, med stöd för förstörande och förlustfri komprimering, transparens och animeringar.
• AVIF: Nästa generations format med högst komprimering och stöd för HDR.
• Elementet <picture> är viktigt för att leverera moderna format med robusta reservlösningar.

Genom att välja rätt format och använda tekniker som <picture> kan du förbättra webbplatsens laddningstider avsevärt!