Wat zijn webp afbeeldingen?

WebP is een beeldformaat dat Google in 2010 uitbracht. Bij dezelfde zichtbare kwaliteit levert het fors kleinere bestanden op dan JPEG en PNG, en het kan daarbij transparantie en animatie in hetzelfde bestand.

Voor een website is dat meteen winst. Op de meeste pagina's zijn afbeeldingen verreweg het zwaarste onderdeel van wat er over de lijn gaat. Een startpagina van vier megabyte bestaat zelden uit tekst.

Waar het formaat vandaan komt

Google kocht in 2010 het videobedrijf On2 en gebruikte de techniek uit hun videoformaat VP8 voor stilstaande beelden. Een WebP-bestand met kwaliteitsverlies is in feite één beeld uit een video, verpakt in een eigen omhulsel.

Een jaar later kwam er een tweede variant bij: WebP zonder kwaliteitsverlies, met een heel andere techniek, plus ondersteuning voor doorzichtige delen. Daarna kwam animatie erbij.

WebP is daardoor eigenlijk drie formaten onder één naam. Dat verklaart waarom het zich soms als JPEG gedraagt en soms als PNG, en waarom je in gereedschap zoveel verschillende instellingen tegenkomt die allemaal WebP heten.

De code om WebP te lezen en te schrijven gaf Google vrij. Daar heb je zelf niets mee te maken, maar het is wel de reden dat vrijwel elke browser, elk fotoprogramma en elke hostingpartij het inmiddels aankan.

Waarom het bestand kleiner wordt

JPEG is van 1992 en dat merk je aan de techniek. De winst van WebP komt uit twee hoeken.

De eerste is beter raden. Een beeld wordt in blokjes verdeeld, en voor elk blokje voorspelt de codeerder hoe het eruit gaat zien op basis van de blokjes erboven en ernaast. Alleen het verschil met die voorspelling gaat het bestand in. WebP heeft meer manieren om te voorspellen dan JPEG, dus blijft er minder verschil over om te bewaren.

De tweede is zuiniger wegschrijven. Wat er overblijft gaat met rekenkundige codering het bestand in, waar JPEG een oudere tabelmethode gebruikt. Dat scheelt zonder dat er beeldinformatie sneuvelt.

Google zelf houdt het bij foto's op ongeveer een kwart tot een derde winst ten opzichte van JPEG bij vergelijkbare kwaliteit, en ruwweg een kwart ten opzichte van PNG in de variant zonder verlies.

Bij bestaande sites zie ik in de praktijk vaak meer winst dan dat. Dat komt zelden door WebP zelf. Het komt doordat de JPEG's die er stonden met een veel te hoge kwaliteitsinstelling waren weggeschreven, of rechtstreeks uit een camera kwamen.

Wat WebP kan en JPEG niet

Transparantie is het eerste. Een logo op een doorzichtige achtergrond kon lang alleen als PNG, en PNG comprimeert foto's slecht. WebP combineert doorzichtige delen wel met compressie mét kwaliteitsverlies. Voor een uitgeknipte productfoto of een logo met een verloop erin scheelt dat vaak driekwart van de bestandsgrootte.

Animatie is het tweede. Een geanimeerde GIF is uit 1987, gebruikt hoogstens 256 kleuren en is belachelijk zwaar voor wat je ziet. Dezelfde animatie als WebP is een fractie van de omvang en oogt beter. Voor iets langers dan een paar seconden blijft een echte video overigens de betere keus.

En je kiest per afbeelding of er informatie weg mag of niet. Bij een productfoto mag dat, bij een technische tekening met dunne lijnen liever niet. JPEG en PNG maken die keuze voor je.

Waar het formaat tegenaan loopt

WebP heeft grenzen die je bij grote of bijzondere beelden tegenkomt.

Kleur wordt altijd grover opgeslagen dan helderheid. Het oog ziet verschil in licht en donker scherper dan verschil in kleur, en daar maakt WebP standaard gebruik van. JPEG kan die besparing op hoge kwaliteit uitzetten, WebP met kwaliteitsverlies niet. Het gevolg zie je bij verzadigd rood of blauw op een gekleurde achtergrond: de kleur loopt een pixel of twee uit. Bij schermafdrukken met gekleurde tekst is dat storend.

Maximaal 16383 pixels per zijde. Ruim voldoende voor een website, te weinig voor een panorama of een scan op hoge resolutie.

Acht bits per kleurkanaal. Geen HDR, geen breed kleurbereik. Voor een fotograaf die zijn werk in volle kwaliteit wil tonen is dat een echte beperking.

Geen opbouw in stappen. Een progressieve JPEG toont eerst een grof beeld dat scherper wordt. WebP komt van boven naar beneden binnen. Op een trage verbinding voelt een grote progressieve JPEG daardoor sneller aan, ook als hij zwaarder is.

Browserondersteuning en de terugvaloptie

Dit is geen argument meer. Chrome kan het al ruim tien jaar, Edge sinds 2018, Firefox sinds begin 2019 en Safari sinds versie 14, uitgebracht in het najaar van 2020 met macOS Big Sur en iOS 14.

Wie een browser gebruikt van de afgelopen jaren krijgt WebP gewoon te zien. Internet Explorer 11 heeft het nooit ondersteund, en dat is de enige groep waar je nog over kunt nadenken.

Toch lever je meestal een terugvaloptie mee, en dat kan op twee manieren.

De eerste is in je HTML: je zet meerdere versies naast elkaar in een picture-element en de browser neemt de eerste die hij begrijpt. Zichtbaar in je broncode en voorspelbaar.

De tweede gaat op de server. Elke browser vertelt bij elk verzoek welke formaten hij aankan. Je server leest dat en stuurt de WebP-versie terug op hetzelfde adres als de JPEG. Het voordeel is dat je je HTML niet hoeft aan te passen. Het nadeel staat verderop bij wat er misgaat, want dit is precies waar caching stuk kan lopen.

Wat WordPress zelf doet sinds versie 5.8

Sinds WordPress 5.8, uitgebracht in juli 2021, kun je WebP-bestanden gewoon uploaden naar je mediabibliotheek. WordPress herkent ze, maakt er de gebruikelijke kleinere versies van en zet ze in de bewerker.

Wat WordPress niet doet, is je JPEG's automatisch omzetten. Dat was wel het plan. Het was in de zomer van 2022 al opgenomen in de code voor versie 6.1 en is daarna weer teruggedraaid na bezwaren van kernontwikkelaars, onder meer over de extra schijfruimte die het per upload zou kosten.

De functie leeft verder in de plugin Modern Image Formats van het prestatieteam van WordPress zelf. Die zet nieuwe uploads om en gebruikt AVIF als je server dat aankan, met WebP als tweede keus.

In WordPress 6.5, van april 2024, kwam AVIF er op dezelfde manier bij als WebP in 5.8: uploaden en gebruiken kan, omzetten doet de kern niet. Daarvoor heb je wel PHP 8.1 of hoger nodig met een beeldbibliotheek die AVIF kent, en dat is bij goedkope hosting niet vanzelfsprekend.

Eén ding om te weten: WordPress maakt van elke upload een handvol formaten in verschillende afmetingen. Zet je conversie aan, dan komt daar per afbeelding een reeks WebP-bestanden bij. Dat groeit sneller dan mensen verwachten.

Converteren met een plugin

Voor de meeste WordPress-sites is een plugin de eenvoudigste route. ShortPixel, Imagify, EWWW en Smush doen allemaal hetzelfde werk. Hoe dat precies gaat staat uitgebreider in het artikel over ShortPixel en kleine afbeeldingen.

Er zijn twee werkwijzen en het verschil is belangrijk. Sommige plugins zetten de WebP-versie naast je origineel en serveren die aan browsers die het aankunnen. Andere vervangen je bestand. De eerste is veiliger, de tweede scheelt schijfruimte. Weet welke je hebt voordat je een bulkconversie start.

Waar het bij een plugin misgaat: afbeeldingen die niet in je HTML staan maar in je opmaak. Achtergrondbeelden die je in Beaver Builder of een andere paginabouwer instelt, komen als CSS de pagina in. Een plugin die alleen img-tags herschrijft, laat die staan.

Controleer na de eerste ronde dus ook de grote koppen boven aan je pagina's, en blijf niet bij je blogafbeeldingen hangen. In die koppen zit meestal het zwaarste beeld van de hele site.

Converteren bij je hosting of via Cloudflare

Het kan ook zonder plugin, een laag lager. Sommige hostingpartijen zetten afbeeldingen op de server om en serveren de juiste versie per bezoeker. Vraag ernaar bij je hostingpartij voordat je een plugin koopt, want dan doe je het werk dubbel.

Bij Cloudflare heet de functie Polish. Die zit op de betaalde pakketten en comprimeert je afbeeldingen op het moment dat ze langs hun netwerk komen, met een optie om naar WebP om te zetten. Je bestanden op de server blijven zoals ze waren.

Het voordeel is dat je niets aan je site verandert en dat je mediabibliotheek schoon blijft. Het nadeel is dat het stopt zodra je van dienstverlener wisselt, en dat je afhankelijk bent van instellingen die niet in je eigen beheerscherm staan.

Voor een gewone bedrijfssite met een paar honderd afbeeldingen vind ik een plugin praktischer. Bij een webshop met duizenden productfoto's die dagelijks wisselen is de route via de hosting of een beelddienst meestal rustiger.

Losse bestanden omzetten

Wil je gewoon een handvol bestanden omzetten, dan hoef je niets te installeren. Squoosh van Google draait in je browser, laat links en rechts het verschil zien en verstuurt je bestand nergens naartoe.

Photoshop kan sinds 2022 zelf WebP openen en opslaan. GIMP en Affinity Photo kunnen het ook. Op de opdrachtregel is er cwebp, het officiële hulpprogramma van Google, waarmee je een hele map in één commando doorwerkt.

Een kwaliteitsinstelling tussen ongeveer 75 en 85 is voor foto's op een website een redelijk vertrekpunt. Hoger levert nauwelijks zichtbaar verschil op tegen een fors zwaarder bestand.

Zet nooit een al gecomprimeerde JPEG om op maximale kwaliteit. Je bewaart dan de fouten die JPEG er al in heeft gezet, tegen een prijs alsof het een origineel is. Ga terug naar het bronbestand als je dat hebt.

Wanneer je beter AVIF kiest

AVIF is de opvolger die op dezelfde manier is ontstaan: een stilstaand beeld uit een videoformaat, in dit geval AV1. Chrome ondersteunt het sinds 2020, Firefox sinds 2021 en Safari sinds versie 16 in het najaar van 2022.

Bij foto's comprimeert AVIF beter dan WebP, en het verschil is het grootst als je hard knijpt. Het kan bovendien tien of twaalf bits per kanaal, met HDR en een breed kleurbereik. Wat je bij WebP mist, kan hier wel.

Daar staat tegenover dat coderen veel meer rekentijd kost. Bij één afbeelding merk je dat niet, bij een bibliotheek van drieduizend productfoto's wel, en bij goedkope hosting kan een bulkconversie er domweg op stuklopen.

Op lage kwaliteit heeft AVIF ook een eigen gebrek: fijne structuur zoals gras, stof of huid wordt glad gestreken. Dat oogt netter dan de blokjes van JPEG en het is wel degelijk verlies van detail.

Mijn advies is om niet te kiezen. Laat je plugin allebei aanmaken, zet AVIF vooraan en WebP erachter, en laat de browser de eerste nemen die hij begrijpt. Wat AVIF precies is staat in het artikel over avif-afbeeldingen.

Kwaliteitsverlies: waar je het ziet

Bij WebP met kwaliteitsverlies gooi je informatie weg die niet terugkomt. Op een productfoto zie je dat vrijwel nooit. Op vier soorten beeld wel.

Tekst in een afbeelding. Rond letters ontstaan vage randjes. Als je tekst in beeld hebt staan, en dat is meestal een slecht idee, gebruik dan de variant zonder verlies.

Logo's en vlakke kleuren. Grote effen vlakken krijgen vlekken. Een huisstijlkleur die op de ene pagina net iets anders is dan op de andere komt hier vandaan.

Verlopen. Een zachte overgang in een lucht of achtergrond valt uiteen in banden. Dit is de meest voorkomende zichtbare fout en je ziet hem pas op een groot scherm.

Fijne structuur. Stof, haar, sieraden. Bij een webshop die stoffen of juwelen verkoopt is dit geen detail maar je verkoopargument.

Beoordeel het resultaat daarom op ware grootte op een fatsoenlijk scherm, niet op de miniatuur in je mediabibliotheek. En bewaar je originelen, altijd, buiten WordPress om.

Waarom afbeeldingen de grootste snelheidswinst opleveren

Op een gewone bedrijfssite wegen je HTML, je opmaak en je lettertypen bij elkaar hooguit een paar honderd kilobyte. Eén onbewerkte foto uit een telefoon weegt meer dan dat allemaal samen.

Daar komt bij dat Google de laadtijd meet aan het grootste element dat in het eerste scherm verschijnt, en dat is bij vrijwel elke site een afbeelding. De grens voor een goede score ligt op 2,5 seconden. Zit je daarboven, dan is je koptafereel bijna altijd de reden.

De volgorde waarin je winst pakt is trouwens niet het formaat maar de afmeting. Een foto van 4000 pixels breed die in een vak van 600 pixels wordt getoond blijft verspilling, of hij nu JPEG of WebP is. Verklein eerst, comprimeer daarna.

Daarna komt het formaat, dan pas het laadgedrag. WordPress laadt afbeeldingen onder de vouw sinds een paar jaar vanzelf later, en zet sinds versie 6.3 uit augustus 2023 automatisch voorrang op de afbeelding die het waarschijnlijk als eerste nodig heeft.

Voor mobiele bezoekers telt dit dubbel zo zwaar, want daar is de verbinding wisselvallig. Wat je daarvoor verder kunt doen staat in het artikel over je website optimaliseren voor mobiel.

Waar het misgaat

De verkeerde versie in de cache. Serveert je server WebP op hetzelfde adres als de JPEG, dan moet hij erbij vertellen dat het antwoord per browser verschilt. Vergeet je dat, dan bewaart je cache of je CDN één versie voor iedereen. Het symptoom is vervelend: kapotte afbeeldingen bij een deel van je bezoekers, terwijl het bij jou gewoon werkt.

Originelen weg. Een plugin die vervangt en een instelling die je niet had gezien. Zonder losse back-up van je uploadsmap kom je hier niet meer uit.

Klanten die het bestand niet openen. Iemand slaat een afbeelding van je site op en krijgt hem niet open in een ouder programma. Lever bestanden die mensen moeten downloaden dus als JPEG of PNG aan.

Nieuwsbrieven. WebP in een e-mail is een gok, want een deel van de e-mailprogramma's toont niets. Houd het in e-mail bij JPEG en PNG.

Delen op social media. De afbeelding die bij een gedeelde link verschijnt wordt door de platforms zelf opgehaald, en niet allemaal accepteren ze WebP. Zet daar een JPEG of PNG neer.

Wat je in een half uur kunt controleren

Draai je startpagina en je drukste andere pagina door PageSpeed Insights. Staat er dat je afbeeldingen in een moderner formaat kunt aanleveren, dan doe je dit nog niet en ligt de winst voor het oprapen.

Open daarna de ontwikkelaarshulpmiddelen van je browser, ga naar het netwerktabblad, ververs de pagina en sorteer op grootte. Bovenaan staan je zwaarste bestanden, met erachter welk type het is. Dat is in één blik de hele diagnose.

Zet vervolgens WebP aan in je beeldplugin, laat je bibliotheek een keer doorwerken en meet opnieuw. Loop daarna je belangrijkste pagina's visueel na, want dat vergeet vrijwel iedereen.

Wat het formaat verder niet doet: je positie in Google verbeteren omdat het WebP heet. Het formaat zelf is geen rangschikkingsfactor, snelheid wel. Zorg daarnaast voor een alt-tekst die beschrijft wat er te zien is en een bestandsnaam die ergens over gaat, want dat helpt bij zoekmachineoptimalisatie ongeacht welk formaat je kiest.

Veelgestelde vragen over webp afbeeldingen

Wat is een webp bestand?

Een WebP-bestand is een afbeelding in het formaat dat Google in 2010 uitbracht, herkenbaar aan de extensie .webp. Het bevat dezelfde soort beeld als een JPEG of PNG, maar dan compacter opgeslagen.

Het kan drie dingen tegelijk zijn: gecomprimeerd met kwaliteitsverlies zoals JPEG, zonder verlies zoals PNG, of geanimeerd zoals GIF.

Is webp beter dan jpeg?

Voor gebruik op een website in vrijwel alle gevallen wel. Bij dezelfde zichtbare kwaliteit is het bestand ruwweg een kwart tot een derde kleiner, en het kan transparantie en animatie waar JPEG dat niet kan.

JPEG wint op twee punten: het kan een beeld in stappen scherper laten worden tijdens het laden, en het werkt in oudere programma's die WebP niet kennen.

Welke browsers ondersteunen webp?

Alle browsers die nu in gebruik zijn. Chrome ondersteunt het al ruim tien jaar, Edge sinds 2018, Firefox sinds begin 2019 en Safari sinds versie 14 uit het najaar van 2020.

De enige uitzondering van betekenis is Internet Explorer 11, die het nooit heeft gekund.

Hoe open ik een webp bestand op mijn computer?

Sleep het naar je browser, dat werkt altijd. Windows en macOS tonen WebP in hun eigen viewers, en Photoshop kan het sinds 2022 openen.

Loopt een ouder programma erop vast, zet het bestand dan om met Squoosh in je browser. Dat is sneller dan zoeken naar een plugin voor dat programma.

Hoe zet ik een webp om naar jpeg?

Open het bestand in Squoosh, kies rechts JPEG als uitvoerformaat en download het resultaat. Er komt geen installatie aan te pas en je bestand blijft op je eigen computer.

Voor veel bestanden tegelijk gebruik je een fotoprogramma met een stapelverwerking, of het hulpprogramma cwebp van Google op de opdrachtregel.

Ondersteunt WordPress webp?

Ja, sinds WordPress 5.8 uit juli 2021 kun je WebP-bestanden uploaden, gebruiken en laten verkleinen zoals elk ander beeld.

WordPress zet je bestaande JPEG's niet automatisch om. Dat plan is in 2022 uit versie 6.1 gehaald en zit nu in de plugin Modern Image Formats van het prestatieteam van WordPress.

Hoe converteer ik mijn hele mediabibliotheek naar webp?

Met een beeldplugin zoals ShortPixel, Imagify, EWWW of Smush. Die hebben allemaal een knop voor bulkverwerking die je bestaande uploads in de wachtrij zet en er daarna doorheen loopt.

Maak eerst een back-up van je uploadsmap en controleer of de plugin je originelen bewaart of vervangt. Loop na afloop je belangrijkste pagina's visueel na.

Is webp beter voor SEO?

Niet rechtstreeks. Google rangschikt niet op bestandsformaat. Wat wel meetelt is hoe snel je pagina laadt, en daar levert WebP een echte bijdrage aan omdat afbeeldingen meestal het zwaarste onderdeel zijn.

Voor vindbaarheid in Afbeeldingen tellen je alt-tekst, je bestandsnaam en de tekst rondom de afbeelding zwaarder dan het formaat.

Wat is het verschil tussen webp en avif?

AVIF is nieuwer, comprimeert foto's beter en kan meer kleurdiepte en HDR aan. WebP is sneller te maken en werkt in iets meer programma's buiten de browser om.

Je hoeft niet te kiezen. Laat je plugin beide versies aanmaken en de browser neemt vanzelf het formaat dat hij begrijpt.

Verliest webp kwaliteit?

In de standaardvariant wel, net als JPEG. Er is ook een variant zonder verlies waarin elke pixel behouden blijft, alleen levert die grotere bestanden op.

Je ziet het verlies het snelst bij tekst in beeld, bij zachte kleurverlopen en bij fijne structuur zoals stof of haar. Bij gewone productfoto's op een website is het bij een instelling rond 80 niet zichtbaar.

Kan webp transparantie aan?

Ja, en dat is een van de sterkste punten. WebP combineert doorzichtige delen met compressie mét kwaliteitsverlies, iets wat PNG niet kan.

Voor een uitgeknipte productfoto of een logo met een verloop betekent dat vaak een bestand van een kwart van de omvang, met hetzelfde resultaat op het scherm.

Waarom worden mijn afbeeldingen niet als webp geserveerd?

Meestal staat de optie in je plugin uit, of is de bulkverwerking nooit afgerond. Controleer dat eerst in de instellingen.

De tweede oorzaak zijn afbeeldingen die niet als img-tag in je HTML staan maar als achtergrond in je opmaak, bijvoorbeeld de grote kop boven aan een pagina die je in een paginabouwer hebt gezet. Veel plugins slaan die over.

De derde is caching. Zit er een cachelaag of een CDN tussen, leeg die dan en controleer opnieuw.

Moet ik webp gebruiken in mijn nieuwsbrief?

Nee. Een deel van de e-mailprogramma's toont WebP niet, en dan krijgt de ontvanger een leeg vak. Gebruik in e-mail JPEG of PNG.

Datzelfde geldt voor de afbeelding die verschijnt wanneer iemand een link naar je site deelt op social media. Die wordt door het platform zelf opgehaald en niet elk platform accepteert WebP.

Is webp gratis te gebruiken?

Ja. Google heeft het formaat en de bijbehorende code vrijgegeven onder een vrije licentie, zonder licentiekosten of patentclaims voor gebruik.

Dat is de reden dat browsers, fotoprogramma's en hostingpartijen het zonder bezwaar hebben overgenomen, en het verschil met sommige oudere beeldformaten waar wel patenten op rustten.