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?