Foto naar WebP en AVIF online: hoe versnel je je site en verbeter je SEO

Wij bij studio gdefoto bereiden dagelijks afbeeldingen voor sites en webshops voor, en zien hoezeer het juiste formaat de laadsnelheid verandert. In dit artikel leggen we zonder omhaal uit wat WebP en AVIF zijn, wanneer je welk formaat neemt, hoe ze SEO beïnvloeden en hoe je een foto online in een minuut converteert.

Op een typische site nemen afbeeldingen 50 tot 70% van het hele gewicht van de pagina in beslag. Niet de scripts, niet de fonts, maar juist de afbeeldingen trekken het verkeer en de laadtijd omlaag. Als we andermans projecten optimaliseren, is het eerste wat we bekijken in welk formaat de foto's staan. En vrijwel altijd is dat de goede oude JPEG of, wat erger is, een zware PNG van 2-3 megabyte. De moderne formaten WebP en AVIF lossen dit probleem bij de wortel op: ze tonen hetzelfde beeld, maar wegen anderhalf tot twee keer minder. Minder gewicht betekent sneller laden, betere gedragsmetrieken en hogere posities in zoekmachines. Hieronder bespreken we alles stap voor stap: hoeveel lichter de nieuwe formaten precies zijn, hoe ze Core Web Vitals en SEO beïnvloeden, welke browsers ze ondersteunen, wanneer je wat gebruikt en hoe je dit alles converteert zonder Photoshop en zonder commandoregel. Wil je gewoon het resultaat, dan kun je meteen een foto online naar WebP en AVIF converteren en later verder lezen.

WebP is een formaat van Google, ontstaan in 2010. Het gebruikt het compressie-algoritme uit de videocodec VP8 en kan zowel met kwaliteitsverlies werken (in plaats van JPEG) als zonder verlies (in plaats van PNG). De belangrijkste eigenschap: bij visueel gelijke kwaliteit weegt een WebP-bestand gemiddeld 25-35% minder dan JPEG en 25-30% minder dan PNG. Als bonus ondersteunt WebP transparantie (alfakanaal) en animatie, dat wil zeggen dat het ook GIF kan vervangen, met een veelvoudige winst in gewicht.

AVIF is een jonger formaat op basis van de videocodec AV1, open en gratis. Het comprimeert agressiever dan WebP: op dezelfde foto's geeft AVIF bestanden die 40-50% lichter zijn dan JPEG, en soms nog meer. AVIF houdt gradiënten (lucht, wazige achtergrond, huid) beter vast, geeft vrijwel geen karakteristieke blokartefacten en ondersteunt een verruimd dynamisch bereik (HDR, 10-12 bits kleur). De prijs daarvoor: coderen van AVIF is trager, en oude apparaten en browsers begrijpen het niet.

Om het aanschouwelijker te maken, geven we typische cijfers uit onze praktijk. Een productfoto van 1200x1200 pixels:

• JPEG kwaliteit 85 weegt ongeveer 280-350 KB;
• WebP van dezelfde visuele kwaliteit weegt 180-230 KB, een besparing van ongeveer 30%;
• AVIF weegt 130-170 KB, een besparing van 45-55%.

Op een cataloguspagina met 30-40 van zulke afbeeldingen verandert het verschil van kilobytes in megabytes, en de gebruiker op mobiel internet voelt dat meteen. Belangrijke nuance: de besparing hangt af van de inhoud. Op complexe, gedetailleerde foto's (stoftextuur, gebladerte) is de winst kleiner, op eenvoudige afbeeldingen met vlakke vullingen en gradiënten kan hij daarentegen oplopen tot 70%. Daarom raden we altijd aan om niet op gemiddelde beloftes te vertrouwen, maar gewoon je eigen echte bestanden door de converter te halen en het gewicht te vergelijken. Dat kan online in een minuut via onze tool voor conversie naar WebP en AVIF: je uploadt een JPEG, krijgt beide formaten en ziet zelf hoeveel elk weegt. Heb je een algemenere converter tussen formaten nodig, dan is er een aparte afbeeldingsconverter, en voor een harde gewichtslimiet is fotocompressie geschikt.

De snelheid van de site is geen abstract gemak, maar een directe rankingfactor. Zoekmachines houden er rekening mee hoe snel en stabiel een pagina laadt. Google heeft dit geformaliseerd in de metrieken Core Web Vitals, en afbeeldingen beïnvloeden vrijwel elk daarvan.

LCP (Largest Contentful Paint) is de tijd waarin het grootste element in het zichtbare gebied wordt weergegeven. Op de meeste sites is dat element juist een afbeelding: de hoofdbanner, de productfoto, de omslag van een artikel. Hoe lichter dat bestand, hoe eerder het wordt weergegeven. JPEG vervangen door AVIF voor de LCP-afbeelding snijdt vaak 0,5-1,5 seconde af op mobiel. Google beschouwt een LCP tot 2,5 seconden als goed, en vaak trekt juist het omzetten van de hoofdfoto naar een modern formaat de pagina uit de rode zone naar de groene.

CLS (Cumulative Layout Shift) is de verschuiving van de opmaak tijdens het laden. Het beeldformaat zelf beïnvloedt CLS niet, maar de bijbehorende gewoonte is belangrijk: geef altijd de attributen width en height op bij de img-tag, zodat de browser vooraf ruimte reserveert. Lichte AVIF's laden sneller, de content zet zich eerder, er zijn minder sprongen.

INP en de algehele responsiviteit winnen indirect: minder bytes om te laden betekent minder belasting van netwerk en processor, vooral op budgetsmartphones.

Wat dit oplevert voor SEO in de praktijk:

• de pagina komt in de groene zone van Core Web Vitals, en dat is een plus voor de ranking in de mobiele zoekresultaten;
• een lager bouncepercentage, omdat mensen niet weglopen van een trage pagina vóór hij geladen is;
• betere indexering, de crawler kan een lichte site makkelijker doorlopen binnen het crawlbudget;
• hogere conversie, volgens onderzoek snijden elke extra 100 ms laadtijd merkbaar in de verkoop.

Apart noemen we een veelvoorkomende fout: mensen zetten WebP in, maar vergeten de lazy loading (loading="lazy") voor afbeeldingen onder het eerste scherm en de fetchpriority="high" voor de hoofd-LCP-afbeelding. Het formaat en deze attributen werken in combinatie. En nog iets: comprimeer niet zó ver dat de artefacten met het oog zichtbaar zijn, overoptimalisatie schaadt het vertrouwen in het product niet minder dan traag laden. Wanneer je binnen een concrete limiet moet blijven, bijvoorbeeld 200 KB voor de eisen van een platform, is het handiger om via foto comprimeren tot 200 KB te gaan.

De belangrijkste vraag van webmasters: gaat de site niet stuk bij een deel van de bezoekers. We antwoorden op basis van feiten voor 2026.

WebP wordt door absoluut alle actuele browsers ondersteund: Chrome, Firefox, Safari (vanaf versie 14, dus vanaf 2020), Edge, Opera, evenals de mobiele browsers op Android en iOS. De dekking overschrijdt wereldwijd 97% van het publiek. Praktisch betekent dit dat je WebP aan iedereen kunt aanbieden zonder omkijken, de kans om een gebruiker zonder ondersteuning te treffen is minimaal.

AVIF is jonger, maar ook al massaal ondersteund: Chrome en Edge vanaf 2020, Firefox vanaf 2021, Safari vanaf versie 16 (2022). De wereldwijde dekking ligt rond 93-95% en blijft groeien. AVIF wordt alleen niet ondersteund door heel oude browserversies en sommige bedrijfsomgevingen die op verouderde systemen zijn blijven steken.

De juiste aanpak, die de compatibiliteitsvraag volledig wegneemt, is de picture-tag met meerdere bronnen. De browser kiest zelf het eerste formaat dat hij begrijpt, en valt terug op JPEG als hij niets nieuws ondersteunt. Qua betekenis ziet het er zo uit:

• eerst wordt de browser een source met AVIF aangeboden;
• begrijpt hij die niet, dan wordt een source met WebP aangeboden;
• begrijpt hij ook die niet, dan laadt een gewone img met JPEG als reservevariant.

Bij zo'n schema krijgen moderne browsers het lichtste formaat, en oude zien de vertrouwde JPEG en er gaat niets stuk. Dit is de gouden standaard, en we raden juist die aan voor commerciële sites, waar elk procent van het publiek telt.

Apart over platformen en diensten waar je foto's naartoe uploadt in plaats van vanaf je eigen server te leveren. Daar is alles strenger:

• bol.com, Amazon en marktplaatsen accepteren in de productkaarten JPEG en PNG, WebP en AVIF mag je er niet naartoe uploaden. Deze formaten zijn voor je eigen site, niet voor de marktplaats;
• officiële portalen en documentformulieren verwachten ook JPEG of PNG in de opgegeven resolutie en grootte;
• sociale media en messengers comprimeren het geüploade zelf opnieuw, dus AVIF aanleveren heeft geen zin.

De conclusie is simpel: WebP en AVIF zijn een instrument voor je eigen site, landingspagina, blog. Voor marktplaatsen en officiële portalen laat je JPEG van de juiste grootte staan. Bereid je productkaarten voor, kijk dan naar de aparte bespreking over productfoto's fotograferen.

De manieren zijn er verschillende, we bespreken ze van de snelste naar de meest complexe, en wijzen meteen op de valkuilen.

Manier 1, online converter (aanbevolen voor de meesten). De snelste weg, die geen software-installatie en geen kennis van de console vereist. De werkvolgorde:

• open onze tool voor conversie naar WebP en AVIF;
• sleep er de foto of een map met foto's naartoe;
• kies het formaat (mag meteen beide) en het kwaliteitsniveau;
• download het resultaat en vergelijk het gewicht met het origineel.

Dit kost minder dan een minuut en is geschikt wanneer je een tiental afbeeldingen voor een artikel of landingspagina moet voorbereiden. De bestanden worden direct in de browser verwerkt, de originelen gaan nergens heen.

Manier 2, site-buildtools. Als je een CMS of statische generator hebt, is er meestal een plugin of module die zelf WebP en AVIF levert en de picture-tag plaatst. Dat is de juiste weg voor een grote site met duizenden afbeeldingen, omdat de conversie automatisch gebeurt bij het uploaden.

Manier 3, de commandoregel. Voor ontwikkelaars zijn er de tools cwebp en avifenc, die batchconversie met een script uitvoeren. Krachtig, maar het vereist vaardigheid en tijd om in te stellen.

Nu de veelvoorkomende fouten die we voortdurend tegenkomen:

• Conversie vanuit een al gecomprimeerde JPEG. Als het origineel al is dichtgeknepen, legt WebP alleen de artefacten vast in plaats van ze weg te halen. Neem een zo kwalitatief mogelijk origineel;
• Te lage kwaliteit omwille van het gewicht. Kwaliteit 60 en lager geeft vuil en zeep, vooral op tekst en logo's. De optimale corridor voor foto's is 75-85;
• PNG met transparantie vervangen door JPEG. JPEG kan geen transparantie, de achtergrond wordt wit. Voor transparante afbeeldingen neem je WebP of AVIF zonder verlies;
• Geen fallback. Alleen AVIF geplaatst zonder picture-tag, en bij een deel van de gebruikers gaten in plaats van afbeeldingen;
• De metadata vergeten. EXIF sleept extra gewicht mee en onthult soms de geolocatie. Vóór publicatie is het verstandig de data op te schonen, daarvoor is EXIF-opschoning.

Als de taak breder is dan alleen het formaat, zijn er in ons pakket aanverwante tools: foto bijsnijden naar de gewenste verhoudingen, een watermerk ter bescherming van het auteurschap en resolutie vergroten als het origineel wat klein is. En om te begrijpen welke achtergrond je voor een productkaart kiest, hebben we een aparte bespreking.

De online converter dekt 90% van de taken: een tiental foto's naar WebP omzetten, een banner comprimeren, afbeeldingen voor een artikel voorbereiden. Maar er zijn gevallen waarin het voordeliger is het werk aan ons over te laten. Ten eerste, grote catalogi: wanneer je honderden of duizenden productfoto's hebt en niet alleen moet converteren, maar ook de achtergrond moet uitknippen, uitlijnen op een raster, schaduwen en infographics moet toevoegen. Hier is handmatig lopendebandwerk zonder kwaliteitsverlies belangrijker dan de snelheid van één klik. Ten tweede, complexe bronbestanden: overbelichte, doffe kaders die in slecht licht op de telefoon zijn gemaakt en die je vóór de conversie moet optrekken qua kleur en scherpte, anders legt het lichte formaat de fout alleen maar vast. Ten derde, wanneer een stabiel resultaat op volume nodig is en er geen tijd is om je te verdiepen in de picture-tags, fallback en kwaliteitsinstellingen. Wij nemen dat op ons en leveren een klaar pakket voor je site.

Laten we een streep trekken. WebP is ongeveer 25-35% lichter dan JPEG, AVIF 40-50%, en beide formaten worden al door vrijwel alle browsers ondersteund. Het omzetten van afbeeldingen naar moderne formaten verbetert rechtstreeks LCP en andere Core Web Vitals, en helpt daarmee de posities in de zoekresultaten, verlaagt de bounces en verhoogt de conversie. Voor je eigen site gebruik je picture met de keten AVIF, WebP, JPEG, om zowel lichtheid als compatibiliteit te krijgen. Voor marktplaatsen en officiële portalen laat je JPEG van het juiste gewicht staan. Jaag niet op de minimale grootte ten koste van de kwaliteit, houd de kwaliteit in de corridor 75-85 en schoon de EXIF op. En het allerbelangrijkste, stel het niet uit: de winst controleren kan nu meteen. Upload je foto's in onze converter naar WebP en AVIF en zie in een minuut hoeveel lichter je pagina's worden. Zijn de volumes groot of de bronbestanden complex, schrijf ons dan, we helpen de hele catalogus sleutelklaar voor te bereiden.

Alleen de afbeeldingen converteren is niet genoeg, het is belangrijk ze zó aan te sluiten dat de site bij iedereen opent. De moderne aanpak is de picture-tag met meerdere bronnen: de browser kiest zelf het lichtste formaat dat hij begrijpt, en begrijpt hij het nieuwe niet, dan neemt hij de reserve-JPEG. Het schema is simpel: eerst wordt een source met AVIF opgegeven, dan een source met WebP, en aan het einde een gewone img met JPEG als betrouwbare reservevariant.

Zo krijgt een bezoeker op een verse browser de lichte AVIF, op een oudere browser WebP, en op een heel oude of in zeldzame clients ziet hij JPEG en er gaat niets stuk. Verwijder de bron-JPEG's niet, ze zijn nodig als fallback. Veel engines en plugins kunnen WebP automatisch leveren, waarbij ze het formaat on the fly wisselen afhankelijk van de browser, dat is handig voor grote sites. De belangrijkste regel: het nieuwe formaat moet versnellen, niet de weergave van afbeeldingen bij een deel van het publiek breken, dus een reservevariant is verplicht.

WebP en AVIF lossen dezelfde taak op, maar op verschillende wijze. WebP is merkbaar lichter dan JPEG, wordt door vrijwel alle actuele browsers ondersteund en codeert snel, dat is een betrouwbare werkkeuze voor vandaag. AVIF comprimeert nog sterker, vooral op foto's met vloeiende gradiënten, en geeft betere kwaliteit bij een kleiner gewicht, maar codeert trager en wordt in de allteroudste browserversies iets slechter ondersteund.

De praktische keuze is deze: heb je maximale compatibiliteit en eenvoud nodig, neem dan WebP met een kwaliteit van rond de 80 procent, dat is al min dertig tot veertig procent gewicht ten opzichte van JPEG vrijwel zonder zichtbaar verschil. Jaag je op maximale snelheid en ben je klaar voor een iets complexere instelling, voeg dan AVIF als eerste bron toe met een kwaliteit van rond de 50 tot 60 procent, zijn kwaliteitsschaal is verschoven en zulke waarden geven een uitstekend beeld. Optimaal is beide formaten via picture aan te bieden, dan krijgt elke browser het beste wat hij kan. Draai de kwaliteit niet naar nul omwille van het gewicht, de besparing houdt op op te wegen tegen het verlies aan scherpte.

De nieuwe formaten zijn goed op je eigen site, maar er zijn plekken waar ze problemen opleveren. Marktplaatsen als bol.com en Amazon accepteren productfoto's in JPEG en PNG, terwijl ze WebP en AVIF vaak niet ondersteunen bij het uploaden, dus bereid de kaarten voor in JPEG. Officiële portalen, documenten en de meeste officiële formulieren verwachten ook JPEG of PNG. Foto's doorsturen naar kennissen in messengers en per mail is veiliger in JPEG, omdat niet bij iedereen WebP opent.

Nog een nuance is de verdere bewerking en print: niet alle editors en drukkerijen kunnen goed overweg met AVIF, houd voor die taken de originelen in de vertrouwde formaten. Een simpele regel: WebP en AVIF voor het leveren van afbeeldingen aan bezoekers van je eigen site, waar jij de aansluiting en fallback beheerst, en alles wat naar externe systemen en mensen gaat, lever je in JPEG of PNG. Dan krijg je zowel snelheid waar die belangrijk is, als compatibiliteit waar die kritiek is.

• Geen reserve-JPEG. De afbeeldingen worden alleen in het nieuwe formaat geleverd, en bij een deel van de bezoekers laden ze niet. Laat altijd een fallback via picture.
• WebP naar een marktplaats uploaden. Het platform accepteert het formaat niet, de kaart mislukt. Voor marktplaatsen alleen JPEG en PNG.
• Extreme compressie. De kwaliteit is voor het gewicht naar de bodem gedraaid, er verschijnen artefacten. Houd een redelijke balans van rond de 80 procent voor WebP.
• Conversie vanuit een zeepachtig origineel. Het nieuwe formaat verbetert een al bedorven foto niet, het bewaart hem alleen lichter. Converteer vanuit een kwalitatief origineel.
• Dubbele compressie. Een dichtgeknepen JPEG wordt naar WebP omgezet, waarbij artefacten over artefacten worden gelegd. Ga uit van een origineel van maximale kwaliteit.

Hoeveel lichter is WebP dan JPEG?

Bij vergelijkbare kwaliteit is WebP meestal 25 tot 35 procent lichter dan JPEG, en AVIF is nog lichter. Op een grote site versnelt dat het laden merkbaar en verbetert het de snelheidscijfers.

Openen alle browsers WebP?

Vrijwel alle actuele versies van Chrome, Firefox, Safari en Edge ondersteunen WebP. AVIF wordt in de allteroudste versies iets slechter ondersteund, dus een reserve-JPEG blijft nodig.

Verbetert WebP de posities in de zoekresultaten?

Het formaat rankt niet rechtstreeks, maar het versnelt de site, en snelheid is een rankingfactor en een kwestie van gebruiksgemak. Snelle pagina's worden beter geïndexeerd en houden de bezoeker vast.

Kun je WebP naar marktplaatsen uploaden?

Nee, marktplaatsen verwachten JPEG en PNG. WebP en AVIF gebruik je op je eigen site, en de productkaarten bereid je voor in de ondersteunde formaten.

Voor een webshop is laadsnelheid direct geld: elke extra seconde wachten verlaagt de conversie en verhoogt de bounces, en een mobiele bezoeker op traag internet loopt gewoon weg. Afbeeldingen vormen meestal het leeuwendeel van het paginagewicht, dus het omzetten van de catalogus naar WebP of AVIF geeft de meest merkbare snelheidswinst. Lichtere afbeeldingen laden sneller, besparen de koper verkeer en verlagen de belasting van je server, wat belangrijk is op de piekdagen van uitverkopen.

Dit implementeer je op de eigen site van de webshop via automatische levering van WebP met een reserve-JPEG, zodat de afbeeldingen bij iedereen openen. Belangrijk is niet te verwarren: het gaat juist om je eigen site, en niet om de kaarten op marktplaatsen, waar de foto nog steeds in JPEG wordt geüpload. Dat wil zeggen: hetzelfde product lever je aan de bezoekers van je eigen shop in lichte WebP omwille van de snelheid, en aan de marktplaatsen in JPEG omwille van de compatibiliteit. Zo'n dubbele standaard is normaal en geeft het beste van twee werelden: een snelle eigen site en door de platformen geaccepteerde kaarten.

WebP instellen is niet genoeg, het is verstandig je ervan te verzekeren dat de browser daadwerkelijk de lichte versie krijgt en niet de oude JPEG. Dat controleer je eenvoudig via de ontwikkelaarstools in de browser. Open de pagina, druk op F12, ga naar het tabblad Network, ververs de pagina en kijk naar de geladen afbeeldingen: in de kolom type of in de bestandsnaam moet webp of avif staan, en niet jpeg. Staat daar nog steeds JPEG, dan werkt de formaatwissel niet en moet de instelling worden bijgesteld.

Een tweede richtpunt is de bestandsgrootte in datzelfde tabblad: de WebP-versie moet merkbaar minder wegen dan de bron-JPEG. Het is ook nuttig de pagina door snelheidstestdiensten te halen, die wijzen direct aan of afbeeldingen in een moderner formaat geleverd kunnen worden, en tonen de potentiële besparing. Controleer in verschillende browsers, omdat de levering afhangt van de ondersteuning, en verzeker je er beslist van dat in een browser zonder ondersteuning van het nieuwe formaat de reserve-JPEG correct wordt geladen. Zo'n controle kost een paar minuten en garandeert dat al het conversiewerk de site echt versnelt en niet als dode last blijft liggen.

De nieuwe formaten kunnen meer dan alleen foto's licht comprimeren, en dat verruimt hun toepassing. Zowel WebP als AVIF ondersteunen transparantie net als PNG, dus een logo of een afbeelding met transparante achtergrond kun je in WebP leveren en tegelijk transparantie én een klein gewicht krijgen, wat je van JPEG niet voor elkaar krijgt. Voor sites betekent dit dat zelfs graphics met transparante gebieden, die vroeger in een zware PNG stonden, nu lichter gemaakt kunnen worden, met behoud van nette randen en een onderlaag onder elke achtergrond.

WebP kan ook animatie en fungeert als een lichtere vervanging van het verouderde GIF-formaat: een geanimeerde WebP weegt vele malen minder bij betere kwaliteit en vloeiendheid. Dat is nuttig voor kleine geanimeerde banners en iconen op de site. Daarbij is het belangrijk de reservevariant niet te vergeten: waar een deel van het publiek op een oude browser kan zitten, laat je voor animatie en transparantie toch een fallback, of dat nu PNG voor statische beelden is of een ander ondersteund formaat. Al met al maakt de combinatie van klein gewicht, transparantie en animatie in één formaat WebP tot een universeel instrument voor webgraphics, en AVIF voegt daar nog sterkere fotocompressie aan toe.

De massale overstap naar WebP en AVIF voer je beter voorzichtig uit, om de weergave van afbeeldingen bij een deel van de bezoekers niet te breken. Begin klein: neem één paginasjabloon of één sectie, stel de levering van WebP met reserve-JPEG in en verzeker je er via de browsertools van dat de lichte versie echt laadt, en dat in een oude browser correct JPEG wordt aangeboden. Pas als je zeker weet dat alles werkt, breid je de aanpak uit naar de hele site. Bewaar de bron-JPEG's, ze zijn nodig als fallback en als basis, mocht het nodig zijn de afbeeldingen naar een ander formaat of formaat te hergenereren.

Op een grote site is handmatige conversie van elke afbeelding onhaalbaar, dus sluit men meestal een module of plugin aan die WebP-versies automatisch aanmaakt en ze levert aan browsers met ondersteuning, terwijl JPEG voor de rest blijft. Dat neemt het handwerk weg en maakt de overstap transparant voor contentmanagers, die gewoon de vertrouwde JPEG's blijven uploaden. Haal na de implementatie de belangrijkste pagina's door snelheidstestdiensten en verzeker je ervan dat het gewicht van de afbeeldingen is gedaald en de laadcijfers zijn verbeterd. Een stapsgewijze overstap met een verplichte reservevariant geeft alle snelheidswinst zonder het risico dat bij een van de bezoekers de afbeeldingen verdwijnen.