Snel en compact: zijn WebP-afbeeldingen de toekomst?

WebP is net als JPEG en PNG een afbeeldingsformaat, maar nog compacter en dus sneller. Als WebP zoveel voordelen heeft, zul je je afvragen waarom het nog niet overal wordt gebruikt. In dit blog leggen we de voor- en nadelen van het WebP-formaat uit.

Zonder afbeeldingen zou een website echt saai zijn. Maar als je jouw site vol zet met afbeeldingen heeft dat duidelijke nadelen. Hierdoor ontstaan namelijk zware pagina’s met lange laadtijden. Ontwikkelaars en designers zijn daarom continu bezig om de bestandsgrootte zo veel mogelijk te beperken, zonder afbreuk te doen aan de beeldkwaliteit. Dat is ook waarom Google het bestandsformaat WebP heeft ontwikkeld. Dit afbeeldingsformaat is compact en houdt de oorspronkelijke scherpte van de afbeelding intact. In dit artikel zetten we de belangrijkste details op een rij!

Wat is WebP?

Kort gezegd is WebP (uitgesproken als weppie) een relatief nieuw formaat dat oorspronkelijk in 2010 door Google werd geïntroduceerd. Het is een alternatief voor afbeeldingsformaten als PNG en JPEG. Pas de laatste jaren groeit het gebruik van WebP, je vindt het op steeds meer websites.

Waarom is dat nieuwe afbeeldingsformaat nodig, de bestaande formaten werken toch goed? Ja, maar WebP is juist ontwikkeld om alle voordelen van PNG, JPEG en GIF in één formaat te combineren… zonder de nadelen. Het is een bestandsformaat dat zowel lossy als lossless-compressie biedt. Daardoor zijn WebP-bestanden kleiner en bevatten ze tóch afbeeldingen en animaties in hoge resolutie en kwaliteit.

We vatten de belangrijkste kenmerken van WebP even voor je samen: 

• Een andere bestandsextensie
  Je kunt een WebP-bestand natuurlijk herkennen aan de bestandsextensie .webp (ofwel het gedeelte dat na de bestandsnaam komt, achter de punt).
• Type compressie
  WebP ondersteunt zowel lossy als lossless-compressie, die bovendien efficiënter is dan de compressie van JPEG of PNG.
• Transparante achtergronden
  PNG’s worden vaak gebruikt als een transparante achtergrond nodig is, maar dit vergt grotere bestanden. WebP biedt ook transparante achtergronden, maar zonder verlies (voor kenners: net als PNG met alfakanaal).
• Animatie
  WebP ondersteunt animatie, dus je kunt je memes of andere filmpjes nu in het snellere en kleinere WebP-formaat tonen, in plaats van grote animated GIF’s.

WebP versus PNG, JPEG en GIF

In een notendop geldt: WebP is in vergelijking tot JPEG, GIF en PNG-bestanden véél kleiner. Google heeft een paar tests uitgevoerd om te laten zien hoe het nieuwe afbeeldingsformaat zich verhoudt tot de bekende:

WebP vs. PNG – WebP is gemiddeld 26% kleiner dan PNG.

WebP vs. JPEG – WebP-afbeeldingen zijn 25-34% kleiner dan vergelijkbare JPEG-bestanden.

WebP vs. GIF – Animated GIF’s die werden geconverteerd naar lossy WebP’s waren 64% kleiner en lossless bestanden waren 19% kleiner.

Wat zijn de voordelen van WebP?

Je zult begrijpen dat WebP een populair formaat is vanwege de grote besparing in benodigde data. Maar wat betekent dit voor je site?

• Geen concessies aan de beeldkwaliteit
  Zoals je misschien weet, kun je PNG’s, JPEG’s en GIF’s comprimeren om de bestandsgrootte te reduceren, maar loop je daarbij het risico van een slechte beeldkwaliteit. WebP kan wél kleinere bestanden produceren zonder gevolgen voor de kwaliteit van de afbeeldingen.
• Hogere websiteprestaties
  Zware pagina’s met veel gegevens kunnen de prestaties van een site negatief beïnvloeden. Omdat WebP kleinere bestanden kan produceren, bevatten je pagina’s minder gegevens en laden ze sneller. Zulke hogere paginasnelheden zijn prettig voor de bezoekers en daarmee voor de conversie. Potentiële klanten willen immers niet wachten op een trage site, die klikken weg en komen niet meer terug. 
• Minder bandbreedte nodig
  De snelheid waarmee je server je webpagina’s naar bezoekers stuurt, ofwel de bandbreedte, is behoorlijk belangrijk. Door kleinere WebP-bestanden te gebruiken, maak je bandbreedte vrij. Dat is vooral handig voor websites met veel afbeeldingen, zoals portfolio’s en blogs over eten, reizen en fotografie. Ook webshops bevatten doorgaans veel foto’s.
• Meerdere toepassingen
  PNG’s, JPEG’s en GIF’s hebben elk hun eigen toepassingen. PNG’s worden vooral gebruikt als transparantie nodig is, GIF’s zijn handig voor geanimeerde afbeeldingen. WebP kan beide, het combineert dus de diverse andere voordelen van dit formaat met support van transparantie en animatie.
• Hogere ranking in zoekmachines
  De snelheid van een site is essentieel voor zoekmachineoptimalisatie (SEO). Kleinere WebP-bestanden helpen dus om de site beter te laten presteren en daarmee je rankings in zoekmachines verbeteren. Ook kunnen ze je Largest Contentful Paint (LCP) optimaliseren. Dat is de Google-indicator voor de laadtijd van content in het zichtbare deel op je scherm.

Kleven er ook nadelen aan WebP?

Het WebP-afbeeldingsformaat brengt veel voordelen met zich mee. Maar er zijn wel een paar dingetjes waar je op moet letten, al willen we die niet meteen ‘nadelen’ noemen.

• Ontworpen voor het internet. Het WebP-afbeeldingsformaat is bedoeld voor gebruik op internet, om pagina’s sneller te laten laden en animaties te ondersteunen. Gebruik je de afbeeldingen ook offline? Dan moet je een kopie ervan opslaan als PNG of JPEG.
• Niet elke browser ondersteunt het. WebP wordt momenteel ondersteund in populaire webbrowsers als Google Chrome 17+, Microsoft Edge 18+, Safari 14+ en Firefox 65+. Maar niet alle oudere versies kunnen ermee overweg. Dus heb je een back-upafbeelding nodig voor je gebruikers met oudere browsers.
• Controleer de ondersteuning van toepassingen. Net als bij browsers ondersteunen nog niet alle grafische programma’s WebP. Het goede nieuws is dat je het in Adobe Photoshop 23.2 volledig kunt gebruiken, dus als je een Adobe-gebruiker bent, zit je goed. Maar als je een oudere versie gebruikt, of een heel ander programma, moet je misschien een plug-in installeren om WebP-bestanden te kunnen bewerken.

Is het dus handig?

Zoals we hierboven al aanstipten, is de browserondersteuning essentieel om WebP uit te rollen over alle platforms en gebruikers op internet. Die uitrol is nog steeds gaande, maar de trend is erg positief. We verwachten dat de platforms en browsers die WebP nu nog niet ondersteunen, dat binnenkort wel doen. Je kunt de ontwikkelingen in WebP-support gemakkelijk op deze pagina volgen. Zo blijf je op de hoogte.

Wil je WebP-afbeeldingen bewerken? Of zelf nieuwe afbeeldingen in dit formaat aanmaken, bijvoorbeeld in een web-app? Dan heb je ondersteuning aan de serverzijde nodig. Dit is iets dat je moet controleren bij je hostingprovider. Sommige providers zijn al begonnen met het integreren van WebP-ondersteuning.

Hoe zit het met WordPress?

Onze WordPress hosting ondersteunt WebP ook al. Maar er zijn nog een paar dingen om rekening mee te houden.

Vanaf WordPress 5.8 kun je WebP-afbeeldingen op dezelfde manier gebruiken als JPEG, PNG en GIF. Upload je afbeeldingen gewoon naar je mediabibliotheek en neem ze op in je content. WordPress 5.8 en hoger ondersteunen het WebP-formaat standaard. Je hoeft dus geen plug-ins van derden te installeren om WebP-afbeeldingen te uploaden. Dat zou voldoende moeten zijn voor de meeste toepassingen.

Ongeveer 5% van de mensen (voornamelijk Safari-gebruikers met oudere macOS-versies) gebruikt nog een browser die WebP niet ondersteunt. Als je WebP-afbeeldingen converteert en direct in je content gebruikt, kunnen die bezoekers je afbeeldingen dus niet zien. Check dus vooraf of dit een probleem is voor jouw doelgroep.

Ook is het aanmaken van WebP-afbeeldingen niet zo eenvoudig als een JPG/JPEG-afbeelding, het standaardformaat voor vrijwel alle camera’s, smartphones en online beeldbanken. WordPress ondersteunt (nog) geen automatische beeldconversie naar WebP.

Maar er is een oplossing…

WordPress plug-ins voor WebP

Je kunt een WordPress plug-in gebruiken die je originele afbeeldingen converteert naar het WebP-formaat. Zo’n plug-in toont ook de originele afbeelding als de browser van een bezoeker WebP niet ondersteunt.

Wil je bijvoorbeeld een JPEG-bestand uploaden naar je site? Dan gaat de plug-in als volgt te werk.

• Eerst wordt het JPEG-bestand naar WebP geconverteerd. Deze WebP-versie wordt dan gebruikt in alle browsers als Chrome, Firefox en Edge.
• Het originele JPEG-bestand wordt bewaard. Bezoekers die nog met Safari (op oudere macOS-versies) werken of met een andere browser die WebP niet ondersteunt, krijgen die JPEG te zien.

Zo kan elke gebruiker je afbeelding zien en krijgt iedereen de snelst mogelijke gebruikerservaring.

Aan de slag met WordPress?