Moderne afbeeldingsformaten gebruiken zoals AVIF & WebP

In dit artikel duiken we in de specificaties van WebP en AVIF en hoe je de hoogste kwaliteit afbeelding kunt serveren zonder een al te hoge bestandsgrootte. Afbeeldingen zijn namelijk de grootste bottleneck als het op snelheid van websites aankomt.

Laadt een website of pagina niet goed, dan is er een grote kans dat deze gigantische afbeeldingen probeert te laden!

Als je je website wilt optimaliseren voor de Web Vitals dan vind je het wellicht interessant om te weten dat afbeeldingen voor 42% van de Largest Contentful Paint gelden. Een afbeelding wordt namelijk getoetst op:

• Bestandsgrootte
• Bestandsformaat
• Prioriteit met laden

Waarom hebben we moderne afbeeldingsformaten eigenlijk nodig?

We hebben verschillende formaten om uit te kiezen en ieder formaat heeft zijn voordelen en nadelen. Het grootste verschil tussen alle formaten zijn de codecs die gebruikt worden om een afbeelding te coderen en te decoderen.

Een codec is een rekensom die gebruikt wordt om de afbeelding kleiner te maken in bestandsgrootte en hem naar een specifiek bestandsformaat om te zetten om hem daarna te decoderen en te tonen op je scherm. Deze nieuwe formaten zorgen ervoor dat de bestandsgrootte aanzienlijk kleiner wordt, terwijl de kwaliteit niet aangetast wordt.

Waar moet ik op letten met het kiezen van de juiste codec?

Het evalueren van de juiste codec kun je doen aan de hand van de volgende parameters:

• Compressie;
• Kwaliteit;
• Coderen/decoderen.

Compressie

Je kunt de efficiëntie van een codec goed zien door middel van de hoeveelheid aan compressie die het kan geven. Hoe hoger de compressie, hoe kleiner de bestandsgrootte en hoe sneller je afbeelding is ingeladen. Dit kan een grote impact maken op je Largest Contentful Paint.

Kwaliteit

In een perfecte wereld zou compressie er niet voor moeten zorgen dat afbeeldingen slechter worden in kwaliteit. Bij de meeste WordPress plugins kun je kiezen welke mate van compressie je wilt hebben en afhankelijk van het eindresultaat van je afbeeldingen kun je afwegen hoe hoog deze mag zijn.

Coderen/decoderen

Complexe compressie rekensommen kunnen meer vragen van de webserver waar je website op gehost wordt. Over het algemeen worden alle afbeeldingen in bulk geoptimaliseerd zodat dit niet iedere keer hoeft te gebeuren zodra je de website bezoekt.
Zou dit wel het geval zijn dan wordt de laadtijd van de website aanzienlijk vertraagd doordat hij continu moet coderen en decoderen.

Uit den ouden tijd: JPEG & PNG

JPEG is het meest ondersteunende bestandsformaat ter wereld. En dat al 25 jaar! Een echte ‘golden oldie’ dus. De decodeer snelheid voor dit type afbeelding is fantastisch, maar mist een boel opties die moderne websites wel nodig hebben, zoals transparantie en animaties.

JPEG werkt het beste met foto’s terwijl PNG veel gebruikt wordt voor leuke visuals en daar waar transparantie nodig is. PNG kent echter zeer weinig compressie en kan dus behoorlijk oplopen in bestandsgrootte.

Het doel van moderne afbeeldingsformaten is om het beste van beide wereld te combineren – en te overwinnen – zodat ze én flexibel zijn in wat ze kunnen bieden én tegelijkertijd ook goed gecomprimeerd kunnen worden.

AVIF

Het AV1 bestandsformaat is een open-source formaat voor afbeeldingen en geanimeerde afbeeldingen. Het is uitgebracht in 2019 door AOMedia. AVIF is de afbeeldings versie van het populaire AV1 video formaat. Het doel was om een formaat te maken die hypermodern was en gratis om te gebruiken.

Voordelen

De compressie van AVIF levert zeer weinig in op kwaliteit waardoor je kunt profiteren van een klein bestandsformaat zonder al te veel in te leveren op de uiteindelijke kwaliteit. Uit sommige tests blijkt zelfs dat AVIF 50% kleiner is in bestandsgrootte dan een traditionele JPEG afbeelding, maar dezelfde kwaliteit bevat!

Naast de superieure compressie ondersteunt AVIF ook:

• Bewegende afbeeldingen;
• Betere ondersteuningen voor grafische elementen, logo’s en infographics;
• 12 bits aan kleurdiepte, waardoor het High Dynamic Range (HDR) en Wide Color Gamut (WCG) afbeeldingen aan kan met een breder scala aan heldere en donkere kleuren;
• Transparante afbeeldingen.

Browserondersteuning

AVIF is geïntroduceerd op de desktop versie van Google Chrome in 2020 met Chrome versie 85. Het wordt ook ondersteunt op Chrome voor Android, Opera, Firefox voor desktop, Opera voor Android en Safari, maar alleen op MacOS 13 Ventura of nieuwer.

WebP

Dit bestandsformaat is in 2011 bedacht door Google en is gemaakt om website sneller te laden. In de afgelopen jaren is het door een grote hoeveelheid bedrijven en websites geaccepteerd en geadopteerd vanwege zijn compressiemogelijkheden en kleinere bestandsformaat in vergelijking met JPEG & PNG’s. De kwaliteit van WebP zit op een redelijk vergelijkbaar niveau als de ‘golden oldies’ en ondersteunt transparante afbeeldingen.

Voordelen

WebP afbeeldingen zijn doorgaans 26% kleiner dan PNG’s en 25- tot 34% kleiner dan JPEG’s. De ondersteuning van animaties maakt dat het ook een goede vervanger is voor GIF.

WebP ondersteunt ook:

• Transparantie;
• Metadata;
• Animaties.

Browserondersteuning

Webp wordt op alle grote en nieuwe browsers ondersteund.

Samenvattend

AVIF, WebP, JPEG & PNG. Ze hebben allemaal hun voor- en nadelen. Bij Dtch. Digitals comprimeren we alle afbeeldingen bij oplevering en we bekijken en overleggen de mogelijkheid met jou om de afbeelding ook om te zetten naar AVIF of WebP.

Heb je al een website en wil je weten wat het voor jouw site kan opleveren? Neem dan contact met ons op, we helpen je graag!