U hebt vast weleens een rapport onder ogen gehad waarin stond dat uw afbeeldingen in een modern formaat aangeboden moeten worden. Wat er niet bij stond: welk formaat, hoe u dat instelt en wat er gebeurt met de vierhonderd foto’s die al in uw mediabibliotheek staan. Het gevolg is dat veel ondernemers een plugin installeren, een vinkje aanzetten en hopen dat het goed komt. Soms komt het goed. Vaak staat er een half jaar later een tweede plugin naast die hetzelfde probeert.

WebP in WordPress instellen is niet ingewikkeld, maar het luistert wel nauw. In dit artikel loopt u de keuzes langs die er echt toe doen, en zet u het in één keer op een manier neer die u over twee jaar nog steeds kunt uitleggen. Geen stapel plugins, geen dubbele conversies, geen verrassingen in de cache.

Wat WebP is en wat het oplevert

WebP is een afbeeldingsformaat dat Google in 2010 introduceerde. Het comprimeert foto’s en illustraties efficiënter dan JPEG en PNG, met vergelijkbare beeldkwaliteit. In de praktijk zien wij besparingen tussen ruwweg dertig en zeventig procent, afhankelijk van het type beeld. Een productfoto van 380 kB wordt dan 140 kB. Doe dat maal twintig op een categoriepagina en u begrijpt waarom het uitmaakt.

Alle browsers die er nog toe doen ondersteunen WebP: Chrome, Firefox, Edge en Safari vanaf versie 14. Het argument dat het “nog niet breed genoeg ondersteund wordt” is inmiddels verouderd. Wel blijft het verstandig om een terugvaloptie te houden, waarover verderop meer.

Belangrijk om te weten: WordPress ondersteunt WebP-uploads standaard sinds versie 5.8. U kunt een .webp-bestand dus gewoon in de mediabibliotheek zetten. Wat WordPress níét standaard doet, is uw bestaande JPEG’s omzetten of automatisch de lichtste versie serveren. Daar hebt u een tool voor nodig.

Kies eerst waar de conversie gebeurt

Er zijn drie plekken waar WebP kan ontstaan, en u kiest er één. Dat is de belangrijkste beslissing van dit hele artikel.

  1. Op uw eigen server, via een plugin. De plugin maakt bij het uploaden een WebP-versie naast het origineel en serveert die aan browsers die het aankunnen. Voordeel: alles staat bij u, geen abonnement. Nadeel: het kost serverkracht, en op krappe hosting kan het omzetten van een grote bibliotheek uren duren.
  2. Bij een externe dienst. De plugin stuurt uw afbeelding naar een server van de aanbieder, die stuurt een geoptimaliseerde versie terug. Voordeel: betere compressie, geen belasting van uw eigen server. Nadeel: meestal een maandbedrag of een limiet, en uw beeldmateriaal gaat langs een derde partij.
  3. Bij het CDN of de hostingpartij. Sommige hostingpakketten en netwerken zetten afbeeldingen onderweg om, zonder dat u iets installeert. Voordeel: geen plugin, geen extra bestanden op uw server. Nadeel: u bent gebonden aan die partij, en bij een verhuizing valt het weg.

Alle drie zijn prima keuzes. Wat niet werkt, is twee ervan tegelijk. Als uw hostingpartij al converteert en u zet er een plugin naast, dan comprimeert u een al gecomprimeerd bestand. Dat kost kwaliteit en levert niets op. Kijk dus eerst in uw hostingpaneel of het al aanstaat voordat u iets installeert.

Het stappenplan

Hieronder de volgorde die wij aanhouden. Reken op een half uur werk, plus wachttijd voor het omzetten van bestaande afbeeldingen.

  1. Maak een back-up. U gaat de mediabibliotheek aanraken. Een volledige back-up van bestanden en database is hier geen formaliteit, maar een noodzaak.
  2. Inventariseer wat er al draait. Loop uw plugins langs op alles wat afbeeldingen aanraakt. Cacheplugins hebben vaak een verstopte WebP-optie. Zet die uit als u een aparte plugin gaat gebruiken.
  3. Ruim eerst op. Verwijder afbeeldingen die nergens meer gebruikt worden en schaal reuzen terug. Een foto van 4000 pixels breed die in een kader van 800 pixels staat, blijft ook als WebP onnodig zwaar. Meer hierover leest u in ons artikel over het optimaliseren van afbeeldingen in WordPress.
  4. Installeer één tool en zet de rest uit. Kies uit de drie routes hierboven en houd het daarbij.
  5. Stel het kwaliteitsniveau in. Tussen 75 en 82 is voor de meeste sites de zoete plek. Lager gaat u zien bij vlakken en verlopen; hoger levert nauwelijks meer kwaliteit maar wel grotere bestanden.
  6. Bewaar de originelen. Vrijwel elke plugin biedt de optie om het JPEG- of PNG-origineel te laten staan. Doe dat. Zonder origineel kunt u niet terug en kunt u ook niet naar een nieuwer formaat overstappen.
  7. Converteer in batches. Zet niet in één keer vijfduizend afbeeldingen om op een gedeelde server. Doe het in blokken van een paar honderd, buiten kantooruren.
  8. Leeg alle caches. Paginacache, browsercache, CDN-cache. Zolang de oude versies nog geserveerd worden, ziet u geen enkel resultaat en denkt u onterecht dat het niet werkt.
  9. Controleer het resultaat. Open uw site, klik met de rechtermuisknop op een foto en kies “afbeelding openen in nieuw tabblad”. Eindigt de bestandsnaam op .webp, dan staat het goed. Kijk daarna in de ontwikkelaarstools onder Netwerk naar de daadwerkelijke bestandsgroottes.

Hoe de juiste versie bij de bezoeker komt

Er zijn twee technieken om WebP te serveren met een terugvaloptie. De eerste is een aanpassing in het .htaccess-bestand: de server kijkt wat de browser meldt te ondersteunen en stuurt op basis daarvan het .webp- of het .jpg-bestand. Dit werkt alleen op Apache en LiteSpeed, en het kan botsen met caching op CDN-niveau als dat niet op het Vary-kenmerk let.

De tweede is het picture-element in de HTML: de browser krijgt beide varianten aangeboden en kiest zelf. Dit is robuuster en werkt op elke server, maar het verandert wel de opmaak van uw pagina’s. Bij sommige thema’s en paginabouwers geeft dat verspringende beelden. Test dat op een oefenomgeving voordat u het live zet.

Welke u kiest, hangt vooral af van uw hosting en of u een CDN gebruikt. Draait u op Nginx zonder .htaccess, dan is het picture-element de praktische route. Werkt u met een CDN dat zelf al onderhandelt over formaten, laat het dan daar en doe verder niets.

Veelgemaakte fouten

Drie dingen zien wij telkens terug. Ten eerste: logo’s en pictogrammen die als WebP worden aangeboden terwijl SVG veel lichter en scherper is. Ten tweede: transparante PNG’s die met verlies worden omgezet, waardoor er randjes ontstaan rond uitgeknipte productfoto’s. Zet daarvoor de verliesvrije modus aan, of laat ze met rust.

Ten derde, en dat is de vervelendste: WebP inschakelen terwijl de echte oorzaak van de traagheid ergens anders zit. Als uw server er anderhalve seconde over doet voordat de eerste byte vertrekt, dan lost een lichter plaatje niets op. Meet dus eerst waar de tijd verdwijnt. Wij schreven daar apart over in ons stuk over de reactietijd van uw server.

Loopt u vast, of gaat het om een bibliotheek van duizenden productfoto’s waar u liever niet zelf aan begint, dan is het een overzichtelijke klus om uit te besteden als onderdeel van een snelheidsoptimalisatie. In één sessie is het opgezet, omgezet en getest.

Een praktijkvoorbeeld

Een interieurzaak uit Zwolle had een portfolio met ruim negenhonderd foto’s, gemiddeld 900 kB per stuk. De overzichtspagina laadde bijna elf megabyte aan beeld. Er stonden twee plugins die allebei iets met afbeeldingen deden en elkaar tegenwerkten.

De aanpak was saai en effectief: één plugin uit, alles terugschalen naar maximaal 1600 pixels breed, omzetten naar WebP op kwaliteit 78, originelen bewaard. De overzichtspagina ging naar 2,6 megabyte. De laadtijd op mobiel halveerde ruwweg. Er is geen enkele nieuwe plugin bij gekomen; er ging er één af.

Tot slot

WebP is een van de weinige snelheidsmaatregelen die veel oplevert en weinig risico kent, mits u het één keer goed inricht en er niets naast zet. Begin met de inventarisatie: kijk welke plugins nu al iets met afbeeldingen doen en of uw hostingpartij het misschien allang regelt. Die vijf minuten voorkomen dat u een probleem oplost dat u vervolgens zelf verdubbelt.