WebP is een (relatief) modern bestandsformaat voor afbeeldingen op het internet. Google introduceerde het in 2010. Het doel was om een efficiënter alternatief te bieden voor bestaande formaten zoals PNG en JPEG.
De belangrijkste doelstelling van WebP is het verhogen van de laadsnelheid van websites. Dit gebeurt door afbeeldingen sterker te comprimeren zonder groot kwaliteitsverlies. Hierdoor verbruiken sites minder bandbreedte.
De technische basis van WebP ligt bij de VP8 videocodec. Deze technologie is oorspronkelijk ontwikkeld door On2 Technologies. Google nam dit bedrijf over en gebruikte de techniek als fundering voor dit beeldformaat.
Hoe het technisch werkt: lossy en lossless compressie
WebP ondersteunt zowel lossy als lossless compressie. Bij lossy compressie wordt data definitief verwijderd om het bestand kleiner te maken. Dit gebeurt via predictieve codering.
De technologie voorspelt de waarden van pixels op basis van aangrenzende blokken. Alleen het verschil tussen de voorspelling en de werkelijkheid wordt opgeslagen. Dit proces is efficiënter dan de methoden van oudere formaten.
Lossless compressie behoudt alle originele pixeldata. Dit is noodzakelijk voor afbeeldingen waarbij grafische precisie van groot belang is. De compressiealgoritmen van WebP zijn geavanceerder dan die van PNG.
Het formaat ondersteunt transparantie via een alpha channel. Dit werkt zowel bij lossy als lossless bestanden. Daarnaast biedt WebP ondersteuning voor animaties. Het is daarmee ook een alternatief voor het GIF-formaat.
Vergelijking met traditionele formaten (JPEG en PNG)
WebP presteert technisch beter dan JPEG bij vergelijkbare visuele kwaliteit. Onderzoek van Google laat zien dat WebP-bestanden gemiddeld 25% tot 34% kleiner zijn dan JPEG-bestanden.
In vergelijking met lossless PNG-bestanden is WebP gemiddeld 26% kleiner. De besparing is aanzienlijk bij afbeeldingen met veel details. Dit heeft een directe impact op de totale paginagrootte van een website.
Bij een gelijke bestandsgrootte levert WebP vaak een scherper beeld dan JPEG. Er zijn minder compressie artefacten zichtbaar in egale kleurvlakken. Dit maakt het formaat geschikt voor zowel foto’s als grafische illustraties.
Documentatie over deze vergelijkingen is te vinden op de officiële Google Developers pagina. Hier staan uitgebreide testresultaten en methodologieën beschreven.
De impact op SEO en Core Web Vitals
WebP heeft een indirecte invloed op de positie in zoekmachines. Google gebruikt paginasnelheid als een ranking factor. Ceteris paribus krijgt een snellere website een hogere waardering in de zoekresultaten.
Binnen de Core Web Vitals is de Largest Contentful Paint (LCP) een belangrijke statistiek. Deze meet hoe snel het grootste element op een pagina wordt geladen. Omdat dit vaak een afbeelding is, verbetert WebP deze score direct.
Kleine bestanden zijn essentieel voor mobiele indexering. Gebruikers op mobiele netwerken hebben soms een beperkte downloadsnelheid. WebP verminderd de laadtijd op deze apparaten aanzienlijk.
Google promoot het gebruik van moderne formaten via tools zoals PageSpeed Insights. De tool geeft specifiek aan wanneer afbeeldingen beter in WebP-formaat geserveerd kunnen worden.
Implementatie in je CMS
Sinds WordPress versie 5.8 is er native ondersteuning voor WebP. Gebruikers kunnen WebP-bestanden direct uploaden naar de mediabibliotheek. Het systeem genereert automatisch de benodigde formaten voor de weergave.
Andere systemen zoals Magento en Joomla bieden vergelijkbare mogelijkheden via extensies. Voor oudere installaties zijn er plugins beschikbaar die bestaande bibliotheken omzetten. Dit proces kan vaak geautomatiseerd worden op de server.
Er bestaan server-side scripts die de conversie afhandelen bij elk verzoek. Dit voorkomt dat de beheerder handmatig bestanden moet aanpassen. Content Delivery Networks (CDN’s) kunnen deze taak ook overnemen.
Voor gebruikers van mijn.host is er een oplossing via QUIC.cloud. Deze service zet PNG en JPEG afbeeldingen automatisch om naar WebP. De integratie zorgt ervoor dat de optimale versie aan de bezoeker wordt getoond. Je kunt hiervan gebruik maken bij ieder hosting pakket. Je kunt hier toegang tot krijgen via de gratis LiteSpeed Cache plugin.
Browserondersteuning en compatibiliteit
De meeste moderne webbrowsers ondersteunen WebP volledig. Dit geldt voor Google Chrome, Mozilla Firefox, Microsoft Edge en Apple Safari. De ondersteuning in Safari werd toegevoegd in 2020.
Verouderde browsers zoals Internet Explorer herkennen het formaat niet. Ook oudere versies van besturingssystemen kunnen problemen geven bij de weergave. Voor deze gevallen is een fallback-mechanisme nodig.
Ontwikkelaars gebruiken vaak de HTML5 <picture> tag. Hiermee kan de browser kiezen tussen een WebP-bestand en een traditioneel formaat. Als WebP niet wordt ondersteund, laadt de browser automatisch de JPEG of PNG variant.
Software voor beeldbewerking heeft inmiddels brede ondersteuning. Adobe Photoshop ondersteunt WebP native sinds versie 23.2. Ook open-source programma’s zoals GIMP kunnen standaard met WebP-bestanden werken.
De actuele status van browserondersteuning is te controleren via Can I Use. Deze database houdt bij welke browserversies compatibel zijn met webtechnologieën.
Geef een reactie