Eerst een lesje geschiedenis.

Onze afbeeldingsformaten zijn oud: GIF's werden bedacht in 1987. De eerste JPEG-standaard werd uitgegeven in 1992 en PNG's kwamen tot leven via een W3C Recommendation in oktober 1996. Ik weet dat de jaren '90 nog niet zo heel ver in het verleden liggen, maar we zijn ondertussen al meer dan 30 jaar verder en we gebruiken nog steeds dezelfde formaten.

Is het dan misschien niet eens tijd voor een upgrade?

Next-gen image formats

Er is een nieuwe generatie van afbeeldingsformaten die gelukkig heel wat innovatie meebrengen. Types zoals JPEG 2000, JPEG XR en WebP zijn moderne formaten met superieure compressietechnieken, met als resultaat een uitstekende kwaliteit voor de moderne webgebruiker. Als uitkomst krijg je dus kleinere bestanden van dezelfde of een betere kwaliteit, wat de snelheid van je site ten goede komt. Van deze 3 types is WebP het meest performant, waarbij er vaak tot 30% meer gecomprimeerd kan worden in vergelijking met JPEG XR en JPEG 2000.

JPEG XR

Het standaardformaat voor HDR-afbeeldingen. JPEG XR gebruikt meer geavanceerde compressietechnieken in vergelijking met het originele JPEG-formaat. 

JPEG 2000

Dit is de nieuwste iteratie van het JPEG-formaat. Het maakt gebruik van lossless compression met minimale opofferingen betreft de visuele kwaliteit.

WebP

Dit formaat ondersteunt zowel lossy als lossless compression. WebP lossless afbeeldingen zijn tot 30% kleiner dan afbeeldingen in het PNG- of JPEG-formaat.

Voordelen van Next-gen image formaten

Deze afbeeldingsformaten zijn nieuwer en dus beschikken ze ook over nieuwere en/of meer geoptimaliseerde technieken. Laten we enkele aspecten uitlichten:

  • Performantie
    JPEG 2000, JPEG XR en WebP zijn afbeeldingsformaten die beschikken over superieure compressie en kwaliteitskarakteristieken in vergelijking met de oudere JPEG en PNG tegenhangers. Je afbeeldingen encoderen in deze nieuwe formaten geeft kleinere bestanden. Dat wil dus zeggen dat de bezoeker minder data moet downloaden en sneller de afbeelding te zien krijgt. 
  • SEO score
    SEO scores hangen af van ingewikkelde algoritmes, waarbij enorm veel parameters in rekening worden gebracht om je website te scoren. Eén van die parameters is de snelheid van je website, waarbij laadtijd en gebruikte bandbreedte belangrijk zijn. Hoe kleiner je website bestanden, hoe sneller die laadt. En dat telt in een concurrentiële online wereld zwaar mee. Je hebt er dus baat bij om niet te blijven plakken bij PNG en JPG.
  • Minder artefacten

    JPEG-afbeeldingen hebben vaak blokkige artefacten naarmate je de afbeelding meer comprimeert. Dit is te wijten aan een aantal beperkingen van het compressie-algoritme dat hiervoor gebruikt wordt. WebP, JPEG 2000 en JPEG XR gebruiken een ander algoritme dat (in het algemeen) betere resultaten geeft. Bekijk bijvoorbeeld eens deze demo hieronder. In deze screenshots kan je ook het verschil zien tussen de verschillende types:


    Kleinere afbeeldingen, met een betere kwaliteit? Klinkt als een must-have, niet?

Zijn er nadelen?

Hou er alvast rekening mee dat het genereren van WebP-, JPEG XR- en JPEG 2000-afbeeldingen een impact heeft op de performantie van je server. Deze technieken hebben namelijk meer processing power nodig tegenover JPG of PNG. Echter is dit in de meeste gevallen verwaarloosbaar. Enkel voor sites met heel beperkte resources kan dit mogelijk problemen geven. 

Weinig gebruikt

Laten we eens gaan kijken naar enkele druk bezochte mediasites:

  • Humo.be: enkel WebP;
  • Tijd.be: geen ondersteuning; 
  • Demorgen.be: enkel WebP; 
  • Hln.be: geen ondersteuning; 
  • Vrtnws.be: geen ondersteuning; 
  • Vtm.be: geen ondersteuning. 

Hier blijkt dat het gebruik van Next-Gen maar beperkt blijft. Enkel humo.be en demorgen.be hebben ingezet op het WebP-formaat. JPEG 2000 of JPEG XR lijken nergens beschikbaar.

Als we echter eens gaan kijken naar de statistieken (via W3Techs), dan merken we dat WebP slechts door 0.3% van alle websites gebruikt wordt. Voor JPEG XR en JPEG 2000 zijn er zelfs geen statistieken beschikbaar.

Er is dus werk aan de winkel.

Te weinig ondersteuning

Er is dus voorlopig weinig adoptie van de nieuwe image formats. Hoe komt dat? Hiervoor kijken we naar de ondersteuning van deze formaten over de verschillende browsers heen. We gebruiken daarvoor caniuse.com.

Zoals je kan zien ondersteunt geen enkele browser alle formaten. Voor elke browser is er wel minstens één type voorzien:

  • WebP heeft de breedste ondersteuning: Edge, Firefox, Chrome;
  • JPEG XR werkt enkel in IE11 (en die is binnenkort End Of Life)
  • JPEG2000 heeft enkel ondersteuning door Safari. 

In principe kan je momenteel wel voor alle bezoekers een gepaste oplossing aanreiken. Echter maakt het gebruik van zoveel verschillende types het technisch ingewikkelders om voor elke browser het gepast formaat.

Webp, de winnaar?

In de release notes van Safari 14 vinden we een klein zinnetje terug dat de situatie zal veranderen: "Added WebP image support." Safari 14 zal deel uit maken van macOS 11 en iOS 14 en wordt in de herfst van 2020 uitgebracht.

Dat zal er voor zorgen dat alle browsers met een behoorlijk marktaandeel Webp ondersteunen, wat dan weer webontwikkelaars zal stimuleren om dit op te nemen in hun oplossingen.

Conclusie

Next-Gen image formats zorgen voor kleinere afbeeldingen met dezelfde of betere kwaliteit. Je site zal dus sneller en performanter zijn doordat de gebruiker minder data hoeft te downloaden. Aangezien de laadtijd van je website meestal de bepalende factor is of een bezoeker al dan niet je content zal lezen, telt elke milliseconde.

WebP lijkt de grote koploper en heeft vrij goede ondersteuning betreft browsers. 

Wil je naar de toekomst kijken en profiteren van het voordeel van next-gen image formats, dan raden we je aan om het WebP type te implementeren. Daarmee ondersteun je alvast de meest gebruikte browsers.

Contacteer ons

Kies voor een kwaliteitsvolle website.