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 wacht nog op voldoende browser support.

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

Toekomstige formaten op het web

JPEG en PNG gaan al jaren mee en er zijn inmiddels een aantal initiatieven om een beter afbeelding formaat te ontwikkelen.

Ten eerste WebP. We hebben het er al kort over gehad. Dit formaat is ontwikkeld door Google en ondersteund zowel lossy (net als JPEG) en lossless (zoals PNG) compressie. WebP is gemiddeld 26% kleiner dan PNG en 25-34% kleiner dan JPEG^3. Het heeft daarnaast ondersteuning voor transparantie en animaties. Het nadeel is dat de ondersteuning nog niet zo ver is. Tot op heden blijft het daarom noodzakelijk om zowel een JPG/PNG als WebP (als fallback) te gebruiken.

Ten tweede hebben we APNG, een formaat met ondersteuning voor animatie, meer kleuren dan GIF en transparantie. APNG wordt ondersteund door Firefox, Chrome, Safari en de nieuwste versie van Edge (op basis van Chromium) — maar niet door Internet Explorer en eerdere versies van Edge^5.

Het komt er op neer dat er alternatieven zijn, maar dat niet elke browser maker het er over eens is wat het alternatief gaat worden, of dat er factoren zijn die de implementatie lastig maken (licenties en patenten).

[^1]: State of the Web https://httparchive.org/reports/state-of-the-web & State of Images https://httparchive.org/reports/state-of-images