Pieter Mathys
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?
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.
Het standaardformaat voor HDR-afbeeldingen. JPEG XR gebruikt meer geavanceerde compressietechnieken in vergelijking met het originele JPEG-formaat.
Dit is de nieuwste iteratie van het JPEG-formaat. Het maakt gebruik van lossless compression met minimale opofferingen betreft de visuele kwaliteit.
Dit formaat ondersteunt zowel lossy als lossless compression. WebP lossless afbeeldingen zijn tot 30% kleiner dan afbeeldingen in het PNG- of JPEG-formaat.
Deze afbeeldingsformaten zijn nieuwer en dus beschikken ze ook over nieuwere en/of meer geoptimaliseerde technieken. Laten we enkele aspecten uitlichten:
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.
Laten we eens gaan kijken naar enkele druk bezochte mediasites:
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.
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:
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.
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.
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.
