Welk afbeeldingsformaat moet ik kiezen?

Afbeeldingen zijn een belangrijk onderdeel van veel websites en hebben ook het grootste aandeel op de grootte van een website. Op 1 april 2018 was het aandeel afbeeldingen maar liefst ~50% van de totale paginagrootte[^1]. Afbeeldingen hebben daarmee een grote invloed op de snelheid van je website. We willen allemaal onze site er mooi en scherp uit laten zien, maar welk formaat kun je het beste gebruiken om je site toch zo klein mogelijk te houden?

Afbeeldingsformaten

Veel zullen wel de afbeeldingsformaten JPEG, PNG en GIF kennen. Elk van deze types heeft zo zijn sterke en zwakke kanten. Het is daarom belangrijk om het juiste type te kiezen voor jouw afbeelding en toepassing.

JPEG

JPEG afbeeldingen zijn het meest geschikt voor complexe afbeeldingen, meestal foto’s. Het is de industriestandaard geworden voor fotografie door een goede verhouding tussen compressie (grootte) en kwaliteit. De compressie die JPEG gebruikt heet lossy, dit betekent dat informatie uit een afbeelding verloren gaat wanneer deze wordt opgeslagen. Het is daarom geen ideaal formaat om je afbeeldingen in te bewaren, elke keer dat je de afbeelding opslaat kan er meer informatie verloren gaan.

De compressie (mocht je het interessant vinden: discrete cosinustransformatie) in JPEG afbeeldingen wordt bereikt door bij elke pixel te kijken naar de omringende pixels en vergelijkbare pixels te groeperen in een enkele kleur^2.

PNG

PNG afbeeldingen zijn lossless en hebben geen gegevensverlies. PNG heeft wel de mogelijkheid tot compressie, maar in tegenstelling tot JPEG wordt een algoritme (LZW, LZ77, Huffman) gebruikt wat omkeerbaar is. In plaats van pixels samen te voegen wordt er gekeken naar hoe de pixel informatie kleiner kan worden opgeslagen — dit wordt gedaan door herhalende stukken te vervangen met ‘shortcodes’.

PNG afbeeldingen hebben weinig tot geen verlies aan kwaliteit en dat maakt ze beter voor bijvoorbeeld illustraties met scherpe lijnen. Bij JPG kunnen deze mogelijk vaag worden. Ze zijn ook geschikt voor afbeeldingen met weinig kleuren, zoals logo’s. Deze kunnen door het algoritme efficiënt worden opgeslagen zonder gegevensverlies.

Op het web worden PNG afbeeldingen ook gebruikt door de mogelijkheid van transparantie in afbeeldingen. Dit is bij JPEG niet mogelijk.

PNG is in de basis een lossless formaat zonder gegevensverlies, maar het is mogelijk om lossy PNG’s te maken (met bijvoorbeeld pngquant). Die zijn kleiner, maar kunnen dus gegevensverlies hebben.

GIF

In het verleden werd GIF vaker gebruikt voor het opslaan van afbeeldingen. Het is er alleen een minder geschikt formaat voor. Een GIF is vaak groter dan een JPEG, of het heeft een veel hoger gegevensverlies. GIF heeft wel een heel belangrijk pluspunt, namelijk de mogelijkheid om animaties te kunnen maken door de mogelijkheid van frames in een afbeelding.

SVG

SVG is een recenter formaat en wordt sinds een paar jaar ondersteund door alle gangbare browsers. In tegenstelling tot bovenstaande formaten wordt SVG niet opgeslagen als pixels, maar als code. Bijvoorbeeld:

<svg width="1920" height="1280"> <circle fill="#000" cx="960" cy="640" r="250"/> </svg>

Dit maakt een 1920 x 1280px canvas met een zwarte cirkel in het midden die een radius heeft van 250px.

SVG is ideaal voor afbeeldingen met weinig complexiteit zoals illustraties en logo’s. Zodra de afbeelding complexer wordt is SVG niet efficiënt, omdat er veel code nodig is om het te tekenen.

SVG’s worden veel gebruikt op het web, omdat ze altijd scherp blijven. Met de opkomst van hoge resolutie schermen op telefoons en laptops kunnen afbeeldingen altijd haarscherp worden weergeven.

JPEG vs. PNG (en WebP)

Over het algemeen zijn er twee formaten die gebruikt kunnen worden op je website — PNG en JPEG. Deze twee zijn in de meeste gevallen het meest efficiënte formaat voor afbeeldingen die 'overal' ondersteund worden. WebP is een nieuwer formaat dat vaak nog betere resultaten weet te behalen ten opzichte van zowel PNG als JPG, maar die wordt tot op heden nog niet door alle browsers ondersteund. Voor nu betekent het dat we een 'oud' formaat als JPG/PNG moeten hebben naast WebP.

Kan je WebP gebruiken, dan raad ik aan om dit ook te doen.

Complexe afbeeldingen (lees: veel kleuren)

Heb je een afbeelding met veel kleuren zoals een foto en heb je geen transparantie nodig — gebruik dan een JPEG afbeelding. Kijk bijvoorbeeld naar de volgende foto:

• JPEG - 85% kwaliteit (1920 x 1280px): 1.54MB

• PNG (1920 x 1280px): 4.85MB

• Webp - 85% kwaliteit (1920 x 1280px): 732KB

Het algoritme van PNG kan voor zulke afbeelding niet efficiënt omgaan met de vele kleuren. Het verschil in kwaliteit is ondanks het verschil in grootte niet met het blote oog waarneembaar.

Simpele afbeeldingen

Bij een afbeelding met weinig kleuren is het omgekeerd:

• JPEG - 85% kwaliteit (1920 x 1280px): 21.2KB

• PNG (1920 x 1280px): 10.7KB

• WebP - 85% kwaliteit (1920 x 1280px): 4KB

PNG is in dit geval zo klein, omdat de afbeelding minder kleuren gebruikt, het kan veel efficiënter worden opgeslagen. Het voordeel van PNG is ook dat de kwaliteit beter wordt behouden.

Kortom

Het ene afbeelding formaat is niet beter dan het andere. Ze hebben allemaal hun eigen doeleinde:

• JPEG: Afbeeldingen met veel kleuren

• PNG: Afbeelding met weinig kleuren of benodigde transparantie

• GIF: Voor animaties

• SVG: Voor illustraties en simpele figuren

• WebP: Als vervanging van JPEG en PNG, maar vooral voor het web.

• AVIF: Kan ook als vervanging van JPEG en PNG dienen, ook vooral voor het web. AVIF ondersteuning is nog net iets minder dan WebP, maar voldoende voor 99% van de gebruikers.

We hebben het hier alleen over afbeelding gebruik voor het web. Voor bijvoorbeeld het opslaan van fotografie zijn andere formaten geschikter.

[^1]: State of the Web & State of Images