Zeker als je vaker mijn blogs leest, dan zul je al eens gehoord hebben van WebP bestanden. WebP (spreek uit als “weppie”) is een relatief nieuw bestandsformaat voor afbeeldingen en is ontwikkeld door Google om JPG en PNG op te gaan volgen. WebP is bedoeld om website designers en ontwikkelaars het gemakkelijker te maken om afbeeldingen te optimaliseren voor snelle weergave. Waarom zou je gebruik maken van dit bestandsformaat en hoe kun je zelf WebP op je eigen website gebruiken? En hoe zit het met browser support? In deze blog kijken we uitgebreid naar deze WebP bestanden en kom je alles te weten over deze opvolger van jpg en png.
Wat is zijn WebP bestanden?
WebP is dus een bestandsformaat voor het opslaan van afbeeldingen. Het is in 2010 ontwikkeld door Google en wordt zachtjes aan steeds meer gebruikt. WebP maakt afbeeldingen ongeveer tussen de 25% en 34% kleiner dan beelden opgeslagen in JPEG en gemiddeld 26% kleiner dan PNG. Net als GIF ondersteund WebP ook animatie. WebP maakt het mogelijk om afbeeldingen in hoge kwaliteit te gebruiken, zonder dat dit zorgt voor langere laadtijden.
Grote bedrijven als Netflix en Facebook maken gebruik van WebP. Sinds WordPress 5.8 ondersteunt ook dit CMS het WebP bestandsformaat. Het lijkt er dus op dat het wereldwijde web steeds meer klaar is voor de overstap naar dit moderne bestandsformaat voor afbeeldingen.
Hoe werkt WebP?
WebP is afhankelijk van twee vormen van compressie (de grootte van een gegevensbestand verkleinen door minder bits te gebruiken dan het origineel):
- Lossy compression
- Lossless compression
Lossy compression is een algoritme waarbij de oorspronkelijke gegevens of afbeelding slechts bij benadering worden gereconstrueerd, terwijl nog steeds betere compressiesnelheden en kleinere gegevensgroottes mogelijk zijn.
Bij Lossless compression is de gecomprimeerde afbeelding of het gecomprimeerde bestand een perfecte reconstructie van het origineel.
Doordat WebP dus zowel lossy als lossless compression gebruikt, zorg je ervoor dat de afbeeldingen die je op je website plaatst, er beter uitzien en kleiner zijn dan de gangbare bestandsformaten die je nu waarschijnlijk gebruikt, zoals:
- JPEG
- GIF
- PNG
In vergelijking met JPEG is een WebP afbeelding gemiddeld tussen de 25% en 34% kleiner. Met PNG scheelt het gemiddeld 26%. Doordat WebP afbeeldingen veel kleiner zijn, laden ze dus sneller. Het mooie is dat de bezoekers van je website en een scherpe afbeelding te zien krijgt en dat deze ook nog eens veel sneller geladen wordt! Het is weer een extra stap om je website gebruiksvriendelijker te maken.
Waarom is het sneller laden van afbeeldingen belangrijk?
Misschien vraag je je af of het nu echt zoveel uitmaakt dat een afbeelding sneller geladen wordt. Het optimaliseren van je afbeeldingen is echter een belangrijk onderdeel van website optimalisatie. In mijn blog 12 SEO tips om je website een boost te geven komen zowel website optimalisatie en afbeelding optimalisatie uitgebreid aan bod.
Het sneller maken van je website is iets waar je bijna voortdurend aan moet werken. Het bepaald namelijk voor een groot gedeelte het succes van je website of webshop. Conversie gaat omhoog wanneer je website sneller is. Alles wat je kunt doen om je website sneller te maken is in ieder geval de moeite waard om te proberen. Daarom zou ik zelf ook zeker je aanraden om serieus aan de slag te gaan met WebP bestanden op je website of webshop. Wanneer je gebruik maakt van WebP bestanden en ook nog eens een cache plugin zoals WP Rocket gebruikt, maak je echt grote stappen als het gaat om snellere laadtijden.
Browser support
Voordat je al je afbeeldingen gaat omzetten in WebP is het belangrijk om te weten hoe het zit met browser support. Op het moment van schrijven zijn dit de browsers die WebP ondersteunen:
WebP Lossy ondersteuning:
- Firefox 65+
- Opera 11.10+
- Microsoft Edge 18+
- Google Chrome Desktop 17+
- Google Chrome Android 25+
- Native browser, Android 4.0+
WebP Lossless en Lossy ondersteuning:
- Firefox 65+
- Opera 12.10+
- Microsoft Edge 18+
- Google Chrome Desktop 23+
- Google Chrome Android 25+
- Native browser, Android 4.2+
- iOS and macOS Safari (macOS 11 Big Sur and later only)
WebP Animatie ondersteuning:
- Firefox 65+
- Opera 19+
- Microsoft Edge 18+
- Google Chrome Desktop en Android 32+
Waarschijnlijk mis je nu een grote browser, namelijk Safari. Dit komt omdat Safari nog maar gedeeltelijk WebP ondersteund. Dit geldt vooral voor de oudere versies van Safari. Ook Internet Explorer ondersteund WebP niet, maar aangezien slechts 1% van alle internetgebruikers deze browser nog gebruikt, hoef je met Internet Explorer niet echt rekening te houden. In totaal gaat het om zo’n 5% van alle internetgebruikers die gebruik maken van een browser die geen WebP afbeeldingen ondersteunen.
Hoe kun je zelf WebP bestanden gebruiken op jouw website?
Met de komst van WordPress 5.8 is er een grote stap gezet. Met deze nieuwe update ondersteunt WordPress namelijk WebP afbeeldingen. Wordpress 5.8 maakt het mogelijk om WebP te uploaden in je mediabibliotheek net zoals je dat met JPEG en PNG bestanden doet. Het enige wat WordPress echter niet doet is je JPEG en PNG bestanden omzetten in een WebP bestand. Dit zul je dus zelf moeten doen.
Bestanden omzetten naar WebP met een conversie tool.
Je kunt gebruik maken van een conversie tool die je JPEG of PNG bestanden omzet in WebP. Die kun je dan vervolgens uploaden op je WordPress website. Een aantal tools die je kunt gebruiken:
- Squoosh van Google Chrome Labs
- GIMP
- Cloud Convert
Het omzetten naar WebP is dus niet zo moeilijk. Het nadeel echter is dat 5% van de internetgebruikers gebruikt maakt van een browser die WebP niet ondersteund. Die gebruikers zullen dus jouw WebP afbeeldingen niet zien wanneer ze jouw website bezoeken. Dit is waarom ik zelf graag gebruik maak van Optimole.
Optimole
Optimole is een afbeelding optimalisatie plugin voor WordPress. Optimole kan afbeeldingen automatisch comprimeren en vergroten of verkleinen. Het heeft echter ook twee andere opvallende kenmerken:
- Optimole is een zogenoemde image CDN. Dit betekend jouw afbeeldingen vanaf hun server worden geladen waardoor jouw server niet wordt belast.
- Het biedt real-time adaptieve afbeeldingen waarbij Optimole voor elke bezoeker de optimale afbeelding levert. Iemand die op een klein scherm surft, krijgt bijvoorbeeld een afbeelding met een lagere resolutie dan iemand die op een Retina-scherm surft.
Optimole kan ook WebP-afbeeldingen aan bezoekers leveren met browsers die dit ondersteunen. Dit is dus een mooie oplossing voor die bezoekers die nog niet een browser gebruiken met WebP ondersteuning. Met Optimole ben je altijd verzekerd van de beste weergave van je afbeeldingen en zo snel mogelijke laadtijden. Ik ben fan!
Optimole heeft een beperkt gratis abonnement voor websites met minder dan 5000 bezoekers per maand. Daarna beginnen betaalde abonnementen bij $19 per maand voor website met minder dan 25.000 bezoekers.
Benieuwd wat Optimole kan betekenen voor jouw website? Je kunt dit zelf op hun website testen. Vul je website url in en Optimole laat je vervolgens zien welke afbeeldingen geoptimaliseerd kunnen worden en hoeveel procent dit scheelt.
Conclusie
Hopelijk ben je na het lezen van dit artikel ervan overtuigt dat WebP bestanden de toekomst is voor afbeeldingen op het web. WebP heeft namelijk als voordeel dat je afbeeldingen kleiner worden gemaakt zonder kwaliteitsverlies en dus ook sneller laden. Een klein nadeel is dat ongeveer 5% van alle internetgebruikers gebruik maakt van een browser die WebP niet ondersteunen. Voor die groep zul je dus JPEG of PNG afbeeldingen gebruiken als fall back. Image CDN Optimole helpt je daarmee door voor elke bezoeker de optimale afbeeldingen te leveren.
