WebP: minder kilobytes & meer kwaliteit

De meest gebruikte bestandsindelingen op het web (zoals JPEG/PNG/GIF) zijn traag en verouderd. Tijd voor next-gen image formats met WebP!

Polaroidcamera met WebP

In een vorige blogpost vertelden we al over hoe belangrijk het is om het juiste formaat voor afbeeldingen op je website  te gebruiken. Op die manier kan je site vlot werken én zien je afbeeldingen er goed uit. De bekendste bestandsindelingen die voor het web gebruikt worden zijn JPEG, PNG en/of GIF. Ze hebben hun dienst bewezen, maar wist je dat ze dateren van de jaren 90 in de vorige eeuw? Hoog tijd dus voor een upgrade naar een next-generation image formaat dat de voordelen van alle andere formaten combineert: WebP.

Wat is WebP?

WebP is een modern bestandsformaat voor afbeeldingen en werd ontwikkeld door Google. Het biedt rijke afbeeldingen van hoge kwaliteit, en dat in een kleiner formaat dan de traditionele formaten zoals PNG of JPEG. Op die manier combineert WebP het beste van alle andere indelingen in één formaat.

Waarom WebP?

Sneller

WebP is zo’n 32% tot soms wel 62% kleiner van bestandsgrootte, zonder hiervoor veel kwaliteit te moeten inleveren.

SEO

Dankzij WebP werkt je website sneller, wat op zijn beurt positieve gevolgen heeft voor je SEO score.

Betere kwaliteit

WebP zorgt zelfs met een kleinere bestandsgrootte voor betere resultaten inzake kwaliteit.

Makkelijk

Drupal maakt het eenvoudig om WebP ook op jouw website toe te passen.

Nog steeds niet overtuigd? Hieronder gaan we dieper in op de vier bovenstaande voordelen van WebP:

Sneller

Het web beperkt zich niet tot de snelle wifi- of bekabelde verbinding bij je thuis of op kantoor. We maken steeds vaker connectie met het web via mobiele verbindingen. Deze zijn meestal minder snel en vaak gelimiteerd in gebruik per maand. Om die reden is het voordelig om je webpagina op te bouwen met zo weinig mogelijk kilobytes.

WebP is zo’n 32% tot soms wel 62% kleiner met een alsnog vergelijkbare kwaliteit van het beeld.. De verschillen in compressie zijn uiteraard afhankelijk van de oudere  bestandsindeling waarmee je vergelijkt.

Ook Google Lighthouse (dit is een tool die de prestaties, toegankelijkheid en zoekmachineoptimalisatie van webpagina's controleert) zal betere resultaten geven wanneer je een next-gen image formaat zoals WebP gebruikt.

3sign website resultaat op google lighthouse score

SEO

De snelheid van je website is van grote invloed op je score in de performancetest van Google. WebP zorgt voor kleinere bestanden en bijgevolg snellere websites. Naast gebruiksvriendelijk voor je bezoekers is die snelheid een belangrijke maatstaf waarmee je SEO-score wordt bepaald op Google. Je kan dus stellen dat WebP bijdraagt tot een hogere positie in je zoekmachineresultaten.

Betere kwaliteit

WebP is niet het enige next-gen afbeeldingsformaat. Ook JPEG2000 en JPEGXR zijn voorbeelden van nieuwe bestandsindelingen, maar WebP is en blijft de meest performante indeling dankzij de straffe combinatie tussen een sterke compressie en weinig verlies in kwaliteit.

Wil je meer technische details rond  deze compressie, dan kan je hiervoor terecht bij Google, de ontwikkelaar van het formaat, via deze link. Neem ook eens een kijkje in de WebP galerij, daar kun je de WebP en JPEG afbeeldingen visueel met elkaar vergelijken.

Makkelijk toe te passen op jouw site

Via de Drupal module webp - in combinatie met responsive image styles - kunnen we ervoor zorgen dat ook jouw website van de voordelen van dit next-gen image formaat kan genieten.

De Drupal module maakt het mogelijk om nog steeds afbeeldingen in de reeds bekende formaten op te laden, om er dan automatisch een WebP versie van te genereren. Vervolgens zal je website zelf slim genoeg zijn om altijd de WebP versie van een afbeelding weer te geven in browsers die hier reeds compatibel mee zijn. Verouderde browsers, zoals Internet Explorer, zullen nog steeds de afbeelding in het oude formaat te zien krijgen.

 

Zo zie je maar dat met het gebruik van de next-gen image formaten een pak voordelen gepaard gaan. Er komt wat kennis bij kijken, maar je krijgt er een snellere website met betere afbeeldingen voor in ruil. 

Wil je met WebP aan de slag of heb je nog vragen? Aarzel niet ons te contacteren, wij helpen je hier graag mee verder!

Interesse om met ons samen te werken?