Ga naar content

Hoe kan ik afbeeldingen het beste opslaan?

Afbeeldingen zijn een belangrijk onderdeel van veel websites en daarbij ook de meeste voorkomende bron van websites. Op 1 april 2018 was het aandeel afbeeldingen maar liefst ~50% van de totale pagina grootte[1]. Afbeeldingen hebben daarmee ook een grote invloed op de snelheid van een website. Hoe kunnen we afbeeldingen zo klein mogelijk houden, en er goed uit laten zien.

Afbeelding formaten

Veel zullen wel de afbeelding formaten 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 gaat er meer informatie verloren.

De compressie (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 daarmee geen gegevensverlies. Dat betekent niet dat het niet gecomprimeerd wordt. Maar in plaats van JPEG wordt een algoritme (LZW) 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 short codes.

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 vervagen. Ze zijn ook zeer geschikt voor afbeeldingen met weinig kleuren, zoals logo’s. Deze kunnen door het algoritme heel efficient worden opgeslagen zonder gegevens verlies.

Op het web worden PNG afbeelding ook veel gebruikt door de mogelijkheid om transparante vlakken te hebben in de afbeelding. Dit is bij JPEG niet mogelijk.

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 vele malen groter als een JPEG, of het heeft een veel hoger gegevensverlies. Het pluspunt van GIF is dat het de mogelijkheid geeft om animaties op te slaan in frames.

SVG

SVG is een nieuwer 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 xmlns="http://www.w3.org/2000/svg" width="1920" height="1280" viewBox="0 0 1920 1280">
  <circle fill="#000" cx="960" cy="640" r="250"/>
</svg>

Dit maakt een 1920px 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 efficient 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 kunnen afbeeldingen altijd haarscherp worden weergeven.

JPEG vs. PNG

Over het algemeen zijn er twee formaten die gebruikt kunnen worden op je website — PNG en JPEG.

Complexe afbeeldingen

Heb je een complexe 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 - 90% kwaliteit (1920x1280): 1MB
  • PNG (1920x1280): 4,7MB

Het algoritme van PNG kan voor zulke afbeelding niet efficient 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 - 90% kwaliteit (1920x1280): 74KB
  • PNG (1920x1280): 21KB

PNG is in dit geval zo klein omdat de afbeelding maar 6 kleuren gebruikt, het kan veel efficiënter worden opgeslagen. Het bijkomende 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

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

Toekomstige formaten op het web

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

Ten eerste WebP, 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 landschap die hierboven is gebruikt als voorbeeld is in WebP 452KB ten opzichte van 1MB voor de JPG en 4,7MB voor de PNG. Het enige (en grote) nadeel is dat de ondersteuning nog niet zo ver is, op het moment ondersteund alleen Google Chrome het formaat.

Ten tweede JPEG XR, dit is een verbetering van het JPEG formaat ontwikkeld door Microsoft. JPEG XR heeft een betere compressie, en ondersteuning voor lossless compressie en transparantie. Het nadeel van JPEG XR is dat het alleen beschikbaar is in Microsoft Internet Explorer van 9 t/m 11 en Microsoft Edge[4].

En als laatste APNG, een formaat met ondersteuning voor animatie, meer kleuren dan GIF en transparantie. APNG wordt ondersteund door Firefox, Chrome en Safari — maar niet door Internet Explorer en 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 ↩︎

  2. http://www-math.mit.edu/~gs/papers/dct.pdf ↩︎

  3. https://developers.google.com/speed/webp/ ↩︎

  4. https://caniuse.com/#search=jpeg%20xr ↩︎

  5. https://caniuse.com/#search=apng ↩︎

Terug naar boven