Ja, WebP is voor bijna elke bedrijfssite de beste standaardkeuze voor foto's en afbeeldingen. Een WebP-foto is bij dezelfde zichtbare kwaliteit flink kleiner dan een JPG, alle grote browsers tonen hem, en je pagina laadt daardoor sneller. Wil je nog kleinere bestanden, dan zet je AVIF ervoor en houd je WebP en JPG als terugval. Hieronder lees je wat het verschil is, wanneer je welk formaat kiest en hoe je je foto's omzet zonder dat iemand het ziet.
Kort samengevat
- WebP-foto's zijn volgens Google 25 tot 34% kleiner dan vergelijkbare JPG's bij gelijke kwaliteit.
- Chrome, Safari, Firefox, Edge en Opera ondersteunen WebP. Alleen heel oude apparaten hebben een JPG-terugval nodig.
- AVIF comprimeert meestal nog beter dan WebP, maar werkt het best met WebP en JPG als vangnet.
- Kleinere afbeeldingen geven een snellere pagina, en snelheid telt mee in Google via de Core Web Vitals.
- Omzetten is eenvoudig: verklein eerst de afmetingen, kies dan een kwaliteit en controleer met je eigen ogen.
Inhoudsopgave
- Wat is WebP eigenlijk?
- WebP of JPG: wat is het verschil?
- AVIF of WebP: welke kies je?
- Wat WebP doet voor je laadtijd en vindbaarheid
- Zo zet je je foto's om naar WebP
- Oudere browsers: zo regel je de terugval
- Welk formaat voor welk beeld op je site
- Ons perspectief: snelle foto's horen bij een afgemaakte website
- Een snelle website zonder risico
- Veelgestelde vragen
- Bronnen
Wat is WebP eigenlijk?
WebP is een afbeeldingsformaat dat Google speciaal voor het web heeft ontwikkeld. Het kan foto's op twee manieren kleiner maken:
- Verliesgevend (lossy): het formaat laat details weg die je nauwelijks ziet. Dat is wat JPG ook doet, alleen efficiënter.
- Verliesloos (lossless): er gaat geen enkel pixel verloren. Dat is wat PNG doet, ook weer met kleinere bestanden.
Volgens Googles eigen documentatie over WebP maakt het formaat kleinere afbeeldingen die het web sneller helpen maken. WebP ondersteunt bovendien transparantie, zodat het ook een logo of productfoto met doorzichtige achtergrond aankan.
Er is één kanttekening voor gebruik buiten je website. WebP is vooral ontworpen voor internet, dus sommige oudere fotoprogramma's of printers weten er nog niet goed raad mee. Voor je website maakt dat niet uit. Bewaar je originele foto's gewoon als JPG of in het formaat van je camera, en gebruik WebP voor wat online staat.
WebP of JPG: wat is het verschil?
JPG is al decennia het standaardformaat voor foto's. Volgens de formatengids van MDN is JPEG nog steeds het meest gebruikte verliesgevende formaat voor stilstaande beelden. Het werkt prima voor foto's, maar kent geen transparantie.
WebP doet hetzelfde werk met minder bytes. Google meet dat verliesgevende WebP-afbeeldingen 25 tot 34% kleiner zijn dan vergelijkbare JPG's bij dezelfde kwaliteit, gemeten met de SSIM-maatstaf (een rekenmethode die beoordeelt hoeveel twee beelden voor het oog op elkaar lijken). MDN noemt voor verliesloze WebP-bestanden een besparing van ongeveer 26% ten opzichte van PNG.
| Kenmerk | JPG | PNG | WebP |
|---|---|---|---|
| Beste voor | Foto's | Logo's, screenshots, illustraties | Foto's én illustraties |
| Compressie | Verliesgevend | Verliesloos | Allebei |
| Transparantie | Nee | Ja | Ja |
| Bestandsgrootte | Basis | Vaak groot | 25 tot 34% kleiner dan JPG |
| Browsersteun | Overal | Overal | Alle grote browsers |
| Handig buiten het web | Zeer | Zeer | Minder |
Wat betekent dat in de praktijk? Stel: je homepage heeft een grote openingsfoto van 400 kB als JPG. Als WebP wordt dat bij dezelfde kwaliteit grofweg 265 tot 300 kB. Heb je tien foto's op een pagina, dan scheelt dat al snel een megabyte. Op een mobiele verbinding merk je dat.
Wanneer blijf je bij JPG?
JPG heeft nog steeds een plek. Je gebruikt het als terugval voor browsers die geen modern formaat kennen, en voor alles wat je buiten je site verstuurt: een foto in een e-mail aan een klant, een bestand voor de drukker, een afbeelding voor een platform dat WebP niet accepteert. Op je website zelf is WebP vrijwel altijd de betere keus.
AVIF of WebP: welke kies je?
AVIF is nieuwer dan WebP en gebaseerd op de AV1-videotechniek. Volgens MDN comprimeert AVIF doorgaans beter dan WebP. Het ondersteunt ook HDR, bredere kleurruimten, hogere bitdieptes, animatie en transparantie. Wat het niet kan, is progressief laden: een AVIF verschijnt niet eerst wazig en daarna scherp, maar pas als hij binnen is.
Hoeveel scheelt het? Googles ontwikkelaarssite web.dev meldt dat de beelddienst Imgix met AVIF 60% kleinere bestanden dan JPG en 35% kleinere dan WebP zag. Dat zijn resultaten van één dienst, op hun beelden. Bij jouw foto's kan het anders uitvallen, dus test het.
| Kenmerk | WebP | AVIF |
|---|---|---|
| Bestandsgrootte | Klein | Meestal nog kleiner |
| Kwaliteit bij sterke compressie | Goed | Vaak beter, vooral bij kleurverlopen |
| HDR en brede kleurruimte | Nee | Ja |
| Rol op je site | Moderne standaard en terugval | Eerste keus als je het maximale wilt |
Het advies van web.dev is praktisch. Ze noemen AVIF de winnaar voor kwaliteit en bestandsgrootte bij foto's, WebP een goede moderne terugval en JPG de betrouwbaarste laatste terugval.
Zo maak je de keuze
- Je hebt een kleine site met een handvol foto's: WebP is genoeg. Simpel, overal te tonen, flinke winst.
- Je site leunt op grote, sfeervolle foto's (fotograaf, interieur, horeca, vastgoed): zet AVIF voorop, met WebP en JPG erachter.
- Je hebt logo's, iconen of illustraties met vlakke kleuren: verliesloze WebP, of SVG als je een vectorbestand hebt.
Je hoeft dus niet echt te kiezen tussen AVIF en WebP. De beste opzet gebruikt ze allebei.
Wat WebP doet voor je laadtijd en vindbaarheid
Afbeeldingen zijn op de meeste bedrijfssites het zwaarste onderdeel van een pagina. Elke kilobyte die je daar weghaalt, hoeft de bezoeker niet te downloaden.
Drie dingen gebeuren er als je overstapt:
- De pagina laadt sneller. web.dev beschrijft dat WebP-bestanden doorgaans 25 tot 35% kleiner zijn dan vergelijkbare JPG's en PNG's. YouTube zag na de overstap op WebP-miniaturen 10% snellere laadtijden.
- Bezoekers blijven eerder. Een pagina die snel staat, voelt betrouwbaar. Iemand die op zijn telefoon zoekt naar een loodgieter of accountant klikt sneller weg als de openingsfoto blijft hangen.
- Google kijkt mee. Snelheid telt mee via de Core Web Vitals, een set meetpunten voor laadtijd en gebruiksgemak. Silktide wijst erop dat moderne formaten afbeeldingen 25 tot 50% kleiner kunnen maken en dat snellere pagina's kunnen bijdragen aan betere posities.
WebP is één knop. Ook het formaat in pixels, lazy loading (foto's pas laden als je ernaartoe scrolt) en je hosting tellen mee. In ons artikel over website snelheid verbeteren staan de andere acties die het verschil maken. Wil je weten hoe afbeeldingen passen in de technische basis van je vindbaarheid, lees dan de vijf checks voor technische SEO.
Zo zet je je foto's om naar WebP
Omzetten is geen raketwetenschap. Volg deze volgorde, dan krijg je kleine bestanden die er net zo goed uitzien.
- Begin met een goede originele foto. Een korrelige, onscherpe foto wordt in geen enkel formaat mooi. Weet je niet zeker of je een foto mag gebruiken? Lees dan eerst wat je mag met foto's op je website.
- Verklein de afmetingen. Een camerafoto is vaak 6000 pixels breed. Een openingsfoto op een website heeft zelden meer dan 2000 pixels nodig, een foto in een tekstkolom vaak 1200 of minder. Dit levert meestal de grootste winst op, nog vóór het formaat.
- Kies een kwaliteit. Bij het omzetten geef je een kwaliteit op van 0 (slechtst) tot 100 (best). web.dev laat een voorbeeld met het programma cwebp zien op kwaliteit 50. Begin liever wat hoger en zak stap voor stap, zo vind je het punt waarop het bestand klein is en de foto nog scherp.
- Vergelijk met je eigen ogen. Zet het origineel en de WebP naast elkaar op volle grootte. Zie je geen verschil? Probeer een stapje lager. Zie je vlekken in luchten of gezichten? Ga een stapje omhoog.
- Geef het bestand een duidelijke naam. "kapsalon-borne-interieur.webp" zegt Google meer dan "IMG_4021.webp". Vul ook altijd een alt-tekst in.
- Zorg voor een terugval. Bewaar ook een JPG-versie, zodat oude browsers iets te zien krijgen. Hoe dat werkt, lees je hieronder.
Hoe je dit doet, hangt af van je situatie. Een ontwerper of ontwikkelaar gebruikt een commandoregelprogramma of een bouwproces dat alles automatisch omzet. Werk je in een websitebouwer of contentsysteem, dan kan dat vaak via de instellingen of een plug-in. Voor een paar losse foto's is een online converter genoeg. Een uitgebreider stappenplan, ook voor afmetingen en lazy loading, vind je in onze gids afbeeldingen optimaliseren voor je website.
Oudere browsers: zo regel je de terugval
Vrijwel elke bezoeker ziet WebP gewoon. Google noemt ondersteuning in Chrome, Safari, Firefox, Edge en Opera. Eén uitzondering om te kennen: op de Mac werkt WebP in Safari volgens MDN pas vanaf Safari 14 op macOS Big Sur of nieuwer. Iemand met een oude Mac die nooit is bijgewerkt, ziet dus zonder terugval een leeg vak.
De oplossing heet het picture-element. Dat is een stukje HTML waarin je dezelfde foto in meerdere formaten aanbiedt. web.dev laat een opzet zien met eerst AVIF, dan WebP en als laatste een JPG. De browser loopt de lijst van boven naar beneden af en pakt het eerste formaat dat hij kent.
In gewone taal: je legt drie versies van dezelfde foto klaar. Een moderne browser pakt de kleinste, een oude browser de vertrouwde JPG. Niemand ziet een kapotte afbeelding.
In vaktaal: binnen een picture-element zet je twee source-elementen met type image/avif en image/webp, gevolgd door een img-element met de JPG als src. Geef ook breedte en hoogte mee, zodat de pagina niet verspringt tijdens het laden.
Welk formaat voor welk beeld op je site
Een bedrijfssite heeft meer soorten beeld dan je denkt. Dit is een praktische verdeling:
- Openingsfoto en sfeerbeelden: AVIF met WebP en JPG als terugval. Dit zijn de grootste bestanden, dus hier is de winst het grootst.
- Teamfoto's en foto's van je werk: WebP. Laat je veel projecten zien, dan telt dit hard op. Tips voor de inhoud lees je in ons stuk over een portfolio dat overtuigt.
- Logo: SVG als je het vectorbestand hebt, anders verliesloze WebP of PNG met transparantie.
- Favicon: daar gelden eigen regels. Lees het verschil tussen favicon en logo.
- Screenshots en schema's: verliesloze WebP, zodat tekst scherp blijft.
- Afbeeldingen voor delen op sociale media: JPG of PNG, omdat niet elk platform WebP even goed oppakt.
Ons perspectief: snelle foto's horen bij een afgemaakte website
We zien het vaak: een ondernemer laat een website maken, betaalt vooraf, en ontdekt later dat de site traag is. De foto's zijn rechtstreeks van de camera geüpload, vijf megabyte per stuk. Dan moet er alsnog iemand aan de slag.
Wij vinden dat de technische basis gewoon klaar moet zijn als je je site krijgt. Daarom is elke site die we bouwen technisch vindbaar vanaf de eerste dag, in Google en in AI-assistenten zoals ChatGPT. Afbeeldingen in de juiste maat en het juiste formaat horen daarbij. Dat is geen extraatje, dat is gewoon goed werk.
En je hoeft ons niet op ons woord te geloven. We maken je website eerst helemaal af en zetten hem op een testadres. Open hem op je telefoon, kijk hoe snel de foto's verschijnen, haal hem door een snelheidstest. Pas als je hem wilt houden, betaal je. Wil je hem niet, dan betaal je niets.
Patrick
Een snelle website zonder risico
Wil je niet zelf met formaten, kwaliteitsinstellingen en terugvallen bezig zijn? Dan bouwen we je bedrijfssite voor je, met ontwerp en teksten op maat. Je ziet het eindresultaat op een testadres voordat je iets betaalt.
- Start: een onepager voor € 350 eenmalig.
- Compleet: een site met meerdere pagina's voor € 500 eenmalig.
Geen abonnement. Na betaling zijn de broncode en het ontwerp van jou, en hosting kun je bij ons regelen of ergens anders. Twijfel je tussen de twee? Kijk dan even welke vorm bij jouw bedrijf past. Klaar om te kijken? Laat mij mijn website zien.
Veelgestelde vragen
Kan ik een WebP-bestand omzetten naar JPG?
Ja. Elk beeldbewerkingsprogramma dat WebP kan openen, kan het ook opslaan als JPG, en er zijn online converters voor. Doe dat vooral als je een foto buiten het web wilt gebruiken, bijvoorbeeld voor drukwerk of een bijlage. Op je website houd je beter de WebP-versie.
Hoe open ik een WebP-bestand?
Sleep het bestand in je browser: Chrome, Safari, Firefox en Edge tonen WebP gewoon. De meeste recente besturingssystemen en fotoprogramma's openen het ook direct. Lukt het niet in een ouder programma, zet het dan eerst om naar JPG.
Is WebP beter voor SEO dan JPG?
Het formaat zelf is geen wondermiddel, maar snelheid telt mee via de Core Web Vitals. WebP maakt je afbeeldingen kleiner en je pagina dus sneller. Een goede bestandsnaam en alt-tekst blijven daarnaast net zo belangrijk.
Moet ik al mijn oude foto's opnieuw uploaden?
Begin met de pagina's die het meest bezocht worden, zoals je homepage en je belangrijkste dienstpagina's, en daar de grootste foto's. Dat levert de meeste winst op voor de minste moeite. De rest kun je stap voor stap meenemen.
Bronnen
- WebP: An image format for the Web (Google for Developers)
- Image file type and format guide (MDN)
- Uitleg over WebP-bestanden (Adobe)
- Deploying AVIF for more responsive websites (web.dev)
- Automating compression and encoding (web.dev)
- Use WebP images (web.dev)
- The picture element (web.dev)
- Moderne afbeeldingsindelingen (Silktide)