Wat is WebP? Uitleg en voordelen voor je webshop

WebP is een afbeeldingsformaat van Google dat foto's sterker comprimeert dan JPG en PNG, terwijl ze er vrijwel hetzelfde uitzien. Het ondersteunt transparantie en animatie, en alle grote browsers tonen het: Chrome, Firefox, Edge en Safari. Vraag je je af wat WebP is en of het iets is voor je webshop? Het korte antwoord: in de meeste gevallen wel. Je productpagina's worden lichter en laden sneller, en je klanten zien precies hetzelfde.

Hieronder lees je hoe het werkt, waar het beter en slechter scoort dan andere formaten, en hoe je er zonder gedoe mee begint.

Wat is WebP in het kort?

WebP is een bestandsformaat voor afbeeldingen, net als JPG of PNG. Google introduceerde het in 2010 en heeft het sindsdien verder uitgebreid. De bestanden hebben de extensie .webp.

Het doel is eenvoudig: dezelfde afbeelding opslaan in een kleiner bestand. Volgens de officiële documentatie van Google voor ontwikkelaars:

• Lossless WebP-afbeeldingen zijn 26% kleiner dan vergelijkbare PNG's.
• Lossy WebP-afbeeldingen zijn 25 tot 34% kleiner dan JPG's van vergelijkbare kwaliteit.

Hoeveel je precies bespaart, verschilt per foto. Maar bij een catalogus met honderden afbeeldingen merk je het verschil.

Hoe werkt het: lossy en lossless

WebP kent twee manieren van comprimeren. Het is handig om te weten wanneer je welke gebruikt.

Lossy WebP (met kwaliteitsverlies)

Hierbij wordt informatie weggelaten die het oog nauwelijks opmerkt, net als bij JPG. Dit is de juiste keuze voor productfoto's, sfeerbeelden en banners. Je kunt de kwaliteit zelf instellen: een waarde tussen 75 en 85 geeft meestal een goede balans tussen bestandsgrootte en scherpte.

Lossless WebP (zonder kwaliteitsverlies)

Alle pixels blijven intact, zoals bij PNG. Geschikt voor logo's, iconen, afbeeldingen met tekst en beelden met scherpe randen.

Transparantie en animatie

WebP ondersteunt een alfakanaal (transparante achtergrond), zowel lossy als lossless. Dat is een voordeel ten opzichte van PNG: je kunt een uitgesneden product met transparante achtergrond hebben in een flink lichter bestand. Daarnaast ondersteunt WebP animatie, als alternatief voor GIF.

WebP vergeleken met JPG, PNG en AVIF

WebP wint niet op alle fronten. Op deze punten scoren andere formaten even goed of beter:

• Compatibiliteit: JPG wint. Vrijwel elk programma, elke telefoon, mailclient en printer kan ermee overweg. Sommige oudere bewerkingsprogramma's, bepaalde platforms en een aantal marktplaatsen accepteren nog geen WebP bij het uploaden.
• Compressie: AVIF wint meestal. Dit nieuwere formaat levert vaak nog kleinere bestanden op dan WebP bij vergelijkbare kwaliteit. Daar staat tegenover dat het coderen trager gaat en minder tools het ondersteunen.
• Kleurdetail in fijne structuren: JPG of PNG kan winnen. Lossy WebP vermindert de kleurinformatie (chroma-subsampling 4:2:0). Bij stoffen met heel fijne prints of kleine gekleurde tekst kan dat zichtbaar wat zachter worden.
• Maximale afmetingen: de andere formaten gaan verder. WebP gaat tot 16.383 × 16.383 pixels. Voor het web ruim voldoende, maar niet geschikt voor enorme drukbestanden.

Kortom: WebP is een prima keuze om afbeeldingen op het web te tonen. Voor het bewaren van originelen of het aanleveren bij de drukker gebruik je gewoon JPG, PNG of TIFF.

Waarom WebP gebruiken in je webshop?

Pagina's laden sneller

In een webshop zijn afbeeldingen meestal het zwaarste onderdeel van een pagina. Op productpagina's is de hoofdfoto vaak het grootste element dat geladen wordt. Google meet dat met de LCP (Largest Contentful Paint), een van de Core Web Vitals.

Met lichtere bestanden verschijnt die afbeelding sneller, vooral op mobiel met een trage verbinding. Een snelle webshop biedt een betere gebruikerservaring, en Google neemt de pagina-ervaring mee in de zoekresultaten.

Lichtere vrijstaande productfoto's

Gebruik je productfoto's zonder achtergrond om ze op huisstijlkleuren of in composities te plaatsen? Dan was PNG tot nu toe de gebruikelijke keuze, en dat zijn zware bestanden. Met WebP behoud je de transparantie en wordt het bestand flink kleiner.

Minder opslag en dataverkeer

Bij elk bezoek worden je afbeeldingen gedownload. Kleinere bestanden betekenen minder dataverkeer vanaf je server of CDN. Rekent je hostingpartij af op opslag of verkeer, of zit daar een limiet op, dan merk je dat ook daar.

Eén formaat voor alles

Foto's, graphics, transparante afbeeldingen en korte animaties: WebP dekt het allemaal in één formaat. Dat maakt het beheer van je catalogus overzichtelijker.

Wanneer kun je beter geen WebP gebruiken?

• Originele bestanden en werkbestanden. Bewaar het origineel altijd in hoge kwaliteit (JPG, PNG, TIFF of RAW). Zet alleen de versie die je publiceert om naar WebP.
• Uploads naar marktplaatsen of social media. Check per platform welke formaten geaccepteerd worden. Twijfel je? Dan is JPG nog steeds de veilige keuze.
• E-mail. Niet elke mailclient toont WebP. Voor nieuwsbrieven zijn JPG en PNG betrouwbaarder.
• Drukwerk. Drukkerijen en papieren catalogi werken met andere formaten.

Afbeeldingen omzetten naar WebP: stap voor stap

Je hoeft niets te installeren. Met de afbeeldingsconverter van Pictulab zet je JPG's en PNG's in je browser om naar WebP. Het is gratis en je afbeeldingen worden niet naar een server geüpload: alles gebeurt op je eigen apparaat.

1. Breng je foto's op het juiste formaat. Publiceer geen afbeelding van 4.000 pixels breed als die op 1.200 pixels wordt getoond. Verkleinen levert vaak meer op dan van formaat wisselen.
2. Zet om naar WebP. Kies lossy voor foto's en lossless voor logo's of graphics.
3. Stel de kwaliteit in. Begin rond de 80 en vergelijk. Zie je geen verschil? Probeer dan iets lager.
4. Controleer de details. Zoom in op gevoelige plekken: naden, texturen, tekst op labels.
5. Comprimeer waar nodig. Met de tool om afbeeldingen te comprimeren maak je het bestand nog wat lichter.

Wil je het product vrijstaand? Verwijder dan eerst de achtergrond en exporteer daarna naar WebP, zodat je de transparantie behoudt in een licht bestand.

WebP gebruiken in je webshop

WordPress en WooCommerce

WordPress ondersteunt het uploaden van WebP-afbeeldingen naar de mediabibliotheek sinds versie 5.8. Je kunt je .webp-bestanden direct uploaden of een optimalisatieplugin gebruiken die automatisch WebP-versies aanmaakt.

Gehoste webshopplatforms

Sommige e-commerceplatforms optimaliseren afbeeldingen zelf en serveren moderne formaten aan browsers die dat ondersteunen. Lees de documentatie van jouw platform voordat je alles handmatig omzet: misschien regelt het dat al voor je.

Maatwerk: het picture-element

Heb je zelf controle over de code? Met het <picture>-element bied je WebP aan en houd je een JPG achter de hand voor oudere browsers:

<picture>
  <source srcset="bruine-tas.webp" type="image/webp">
  <img src="bruine-tas.jpg" alt="Bruine leren tas met kort hengsel" width="1200" height="1200">
</picture>

De browser kiest het eerste formaat dat hij begrijpt. Zo mist niemand de foto.

Tips voor WebP in je productcatalogus

• Geef bestanden duidelijke namen: leren-tas-bruin-voorkant.webp zegt meer dan IMG_4532.webp.
• Schrijf beschrijvende alt-teksten voor toegankelijkheid en vindbaarheid in Google Afbeeldingen.
• Geef breedte en hoogte op in de HTML, zodat de lay-out niet verspringt tijdens het laden.
• Gebruik lazy loading (loading="lazy") voor afbeeldingen die niet direct in beeld zijn, maar niet voor de hoofdfoto.
• Houd de kwaliteit consistent in je hele catalogus, zodat je productpagina's er uniform uitzien.

Wil je je verder verdiepen? Lees dan ook [ENLACE: afbeeldingen comprimeren voor je webshop zonder kwaliteitsverlies] en [ENLACE: aanbevolen afmetingen voor productfoto's].

Wil je daarnaast productfoto's maken of verbeteren met AI? Dat kun je uitproberen in Pictulab. Begin gratis — 100 tokens cadeau, zonder creditcard.

Veelgestelde vragen

Verliest WebP kwaliteit ten opzichte van JPG?

In de lossy-modus wordt, net als bij JPG, wat informatie weggelaten. Met een goed ingestelde kwaliteit zie je het verschil meestal niet met het blote oog, terwijl het bestand kleiner is. In de lossless-modus gaat er niets verloren.

Kunnen alle browsers WebP openen?

De huidige versies van de grote browsers, zoals Chrome, Firefox, Edge en Safari, tonen WebP zonder problemen. Alleen heel oude versies ondersteunen het niet; daarvoor kun je het <picture>-element met een JPG als reserve gebruiken.

Is WebP goed voor de SEO van mijn webshop?

Het is op zichzelf geen rankingfactor. Wel worden je pagina's lichter, waardoor de laadsnelheid en statistieken als LCP verbeteren. Die maken deel uit van de pagina-ervaring waar Google naar kijkt.

Wat is beter: WebP of AVIF?

AVIF comprimeert meestal sterker, maar het coderen duurt langer en minder tools ondersteunen het. WebP biedt een goede balans tussen besparing en compatibiliteit. Veel websites serveren AVIF met WebP of JPG als terugvaloptie.

Hoe zet ik foto's om naar WebP zonder ze te uploaden?

Met de converter van Pictulab gebeurt het omzetten in je browser: je afbeeldingen worden niet naar een server geüpload en de tool is gratis.