WebP: hetzelfde beeld in een derde van het gewicht
Bij een trage website ligt het zelden aan de server. In veruit de meeste gevallen zijn het de afbeeldingen. Een homepage van zes megabyte bestaat vaak voor vijf megabyte uit foto’s. Die zijn veel te zwaar aangeleverd.
Dat is de goedkoopste winst die er te halen valt. Je hoeft er niets voor te herbouwen.
Een ander bestandsformaat kiezen scheelt al snel een derde. Zonder dat iemand het aan je beeld ziet.
Het is een instelling van een half uur die je jarenlang blijft opleveren.
Hetzelfde beeld in een derde van het gewicht.
Wat is WebP?
WebP is een modern beeldformaat voor afbeeldingen, ontwikkeld door Google. Het is de opvolger van JPG en PNG.
Hetzelfde beeld weegt er ongeveer een derde minder. Dat kleiner bestand merk je direct in je laadtijd.
Waarom het lichter is
Omdat het slimmer omgaat met vlakken die op elkaar lijken. Een blauwe lucht hoeft niet punt voor punt te worden opgeslagen.
Het resultaat is nagenoeg identiek voor het oog. Meer over die opbouw lees je bij pixel.
Wat het oplevert
Bij een site met veel beeld praat je over seconden. Dat is het verschil tussen wachten en doorklikken.
Het telt bovendien mee in je score bij Google. Meer daarover lees je bij pagespeed.
Waar de winst het grootst is
Op mobiel, want daar is de verbinding trager. Iemand op de bouwplaats merkt drie megabyte minder direct.
Combineer het met uitgesteld laden voor het beste resultaat, zie lazy loading.
Hoe je het instelt
Drie manieren
Een plugin die je bestaande beeld automatisch omzet.
Je hostingpartij die het op de server regelt.
Zelf omzetten voordat je uploadt.
Die eerste is voor de meeste sites het handigst. Bij het omzetten blijven je originelen gewoon staan.
Let op je bibliotheek
Bij honderden afbeeldingen kost een omzetting tijd en serverruimte. Draai dat op een rustig moment.
Controleer daarna een handvol pagina’s. Een verkeerd omgezette afbeelding valt niet vanzelf op.
Werkt het overal?
Ja, in elke moderne browser. De ondersteuning is al jaren geen probleem meer.
Goede oplossingen bewaren bovendien een terugvaloptie. Kan een oude browser het niet aan, dan krijgt hij de JPG.
Het verschil met JPG en PNG
JPG is geschikt voor foto’s en kan geen doorzichtige achtergrond aan. PNG kan dat wel en is daardoor zwaar.
WebP kan allebei: fotokwaliteit en transparantie in een licht bestand. Daarom vervangt het beide.
En AVIF?
Dat is het formaat daarna, en het is nog lichter. De ondersteuning is inmiddels breed.
Voor de meeste sites is dat de volgende stap en niet de eerste. Begin met de winst die je nu kunt pakken.
Wat niet in dit rijtje hoort
Je logo en je iconen. Die lever je aan als vectorbestand, want dat blijft op elke grootte scherp.
Kan een oude browser het formaat niet aan, dan hoort hij gewoon de JPG te krijgen. Dat regelt een goede oplossing automatisch.
Vraag je bouwer of dat is ingericht. Bij een plugin gebeurt het meestal vanzelf, bij maatwerk niet altijd.
Controleer na het omzetten
Bekijk een handvol pagina’s nadat je bibliotheek is omgezet. Een verkeerd omgezette afbeelding valt niet vanzelf op.
Zeker niet op een pagina die je zelden bekijkt. Loop dus ook je oudere berichten na.
Draai het op een rustig moment
Bij honderden afbeeldingen kost een omzetting tijd en serverruimte. Je site kan er even traag van worden.
Doe dat dus niet tijdens een campagne. Je originelen blijven staan, dus je kunt altijd terug, zie pixel.
Meer vragen over WebP
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is WebP?
Hoeveel scheelt WebP in laadtijd?
Hoe zet je afbeeldingen om naar WebP?
Werkt WebP in alle browsers?
Wat is het verschil met JPG en PNG?
Wat is AVIF?
Wat is WebP?
Bij een site met veel beeld praat je over seconden. Dat is het verschil tussen wachten en doorklikken.
Een homepage van zes megabyte bestaat vaak voor vijf en een half megabyte uit foto’s. Daar haal je zo een derde vanaf.
De winst is het grootst op mobiel, want daar is de verbinding trager. Iemand op de bouwplaats merkt drie megabyte minder direct.
Het telt bovendien mee in je score bij Google.
Combineer het met uitgesteld laden voor het beste resultaat. Dan haalt de browser beeld pas op zodra iemand ernaartoe scrolt, en in een lichter formaat.
Meet je laadtijd op een telefoonverbinding en niet op je eigen wifi. Daar is de winst het grootst.
Combineer het met uitgesteld laden. Dan haalt de browser beeld pas op zodra iemand ernaartoe scrolt. Bij een site met veel beeld praat je over seconden. Dat is het verschil tussen wachten en doorklikken. Iemand op een bouwplaats merkt drie megabyte minder direct in zijn wachttijd.
Hoeveel scheelt WebP in laadtijd?
WebP is een modern bestandsformaat voor afbeeldingen, ontwikkeld door Google. Het is de opvolger van JPG en PNG.
Hetzelfde beeld weegt er ongeveer een derde minder. Dat verschil merk je direct in je laadtijd.
Het is lichter omdat het slimmer omgaat met vlakken die op elkaar lijken. Een blauwe lucht hoeft niet punt voor punt te worden opgeslagen.
Het resultaat is nagenoeg identiek voor het oog.
Bij een trage website ligt het zelden aan de server. In veruit de meeste gevallen zijn het de afbeeldingen, en dan is dit de goedkoopste winst die er te halen valt.
Het is de goedkoopste snelheidswinst die er te halen valt, want je hoeft niets te herbouwen.
Bij een trage site ligt het zelden aan de server. In veruit de meeste gevallen zijn het de afbeeldingen. Hetzelfde beeld weegt ongeveer een derde minder dan als JPG of PNG. Voor het oog is het resultaat nagenoeg identiek.
Hoe zet je afbeeldingen om naar WebP?
Op drie manieren. Met een plugin die je bestaande beeld automatisch omzet. Via je hostingpartij, die het op de server regelt.
Of door zelf om te zetten voordat je uploadt.
Die eerste is voor de meeste sites het handigst. Je originelen blijven gewoon staan, dus je kunt altijd terug.
Let wel op je bibliotheek. Bij honderden afbeeldingen kost een omzetting tijd en serverruimte, dus draai dat op een rustig moment.
Controleer daarna een handvol pagina’s. Een verkeerd omgezette afbeelding valt niet vanzelf op, zeker niet op een pagina die je zelden bekijkt.
Kies een plugin die je bestaande bibliotheek omzet en je originelen laat staan. Dan kun je altijd terug.
Draai die omzetting op een rustig moment, want bij honderden afbeeldingen kost het tijd en serverruimte. Controleer daarna een handvol pagina’s, ook je oudere berichten. Een verkeerd omgezette afbeelding valt niet vanzelf op. Je originelen blijven staan, dus je kunt altijd terug naar het oude formaat.
Werkt WebP in alle browsers?
Ja, in elke moderne browser. De ondersteuning is al jaren geen probleem meer.
Dat was een aantal jaren terug nog een reden om te wachten. Die reden is er niet meer.
Goede oplossingen bewaren bovendien een terugvaloptie. Kan een oude browser het formaat niet aan, dan krijgt hij gewoon de JPG.
Je hoeft daar zelf niets voor in te stellen.
Vraag je bouwer wel of die terugvaloptie is ingericht. Bij een plugin gebeurt dat meestal automatisch, bij maatwerk niet altijd.
Je hoeft je hier geen zorgen over te maken, want elke moderne browser ondersteunt het.
Vraag je bouwer wel of er een terugvaloptie is ingericht voor oude browsers. Bij maatwerk gebeurt dat niet altijd vanzelf. Dat was een aantal jaar terug nog een reden om te wachten. Die reden bestaat inmiddels niet meer, want de ondersteuning is compleet. Elke moderne browser ondersteunt het inmiddels zonder problemen. Je hoeft er dus niet op te wachten of een uitzondering voor te maken.
Wat is het verschil met JPG en PNG?
JPG is geschikt voor foto’s en kan geen doorzichtige achtergrond aan. PNG kan dat wel en is daardoor zwaar.
WebP kan allebei: fotokwaliteit en transparantie in een licht bestand. Daarom vervangt het beide formaten.
Er is inmiddels ook AVIF, dat nog lichter is. De ondersteuning daarvan is breed genoeg om te overwegen.
Voor de meeste sites is dat de volgende stap en niet de eerste. Begin met de winst die je nu kunt pakken.
Je logo en je iconen horen trouwens niet in dit rijtje. Die lever je aan als vectorbestand, want dat blijft op elke grootte scherp.
Vervang je JPG’s en PNG’s, maar laat je logo en iconen met rust.
Die lever je aan als vectorbestand, want dat blijft op elke grootte scherp. Dat is een ander soort bestand met een ander doel. Er is inmiddels ook AVIF, dat nog lichter is. Voor de meeste sites is dat de volgende stap en niet de eerste.
Laadt je site traag en bestaat je homepage uit zware foto’s? Stuur me de link via het formulier hieronder. Ik meet hoeveel je pagina weegt en hoeveel een ander beeldformaat je zou schelen. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Modern beeldformaat, next-gen image
