Afbeelding naar WebP converteren (en waarom je dat wilt)

Heb je ooit een test in Google PageSpeed Insights gedraaid en de melding "Gebruik afbeeldingen in nieuwe indelingen" gekregen? Dan vraagt Google precies dit: zet je JPG's en PNG's om naar WebP. Het is een van de ingrepen met de grootste impact op de snelheid van een site — en meteen ook een van de eenvoudigste.

Waarom converteren naar WebP?

WebP is een formaat van Google dat in 2010 uitkwam en speciaal voor het web is ontworpen. Het gebruikt modernere compressiealgoritmes dan JPG en PNG en levert bij dezelfde beeldkwaliteit:

• 25–35% minder gewicht dan JPG in lossy modus (compressie met verlies)
• 20–30% minder gewicht dan PNG in lossless modus (compressie zonder verlies)
• Ondersteuning voor transparantie (alfakanaal) — anders dan JPG, dat dat niet heeft
• Ondersteuning voor animaties — anders dan PNG, dat dat niet standaard biedt

In de praktijk merk je dat meteen. Een productgalerij in een webshop met 20 foto's van 300 kB per stuk in JPG (samen 6 MB) komt in WebP uit op zo'n 4 MB bij dezelfde beeldkwaliteit — een derde minder paginagewicht. Voor Google betekent dat een snellere LCP, een betere PageSpeed-score en mogelijk een hogere positie in de resultaten.

Wanneer je WebP beter niet gebruikt

Het is het beste formaat voor het moderne web, maar er zijn situaties waarin WebP nog niet de juiste keuze is:

• E-mailmarketing: e-mailprogramma's als Outlook en Apple Mail ondersteunen WebP wisselend. Voor HTML-mails blijven JPG en PNG de veilige keuze.
• Drukwerk: drukkerijen en klassieke prepress-software kunnen niets met WebP. Gebruik voor drukwerk een JPG van hoge kwaliteit of een PNG.
• Platforms met formaatbeperkingen: YouTube accepteert geen WebP voor thumbnails (wel JPG en PNG). Sommige formulieren in oudere systemen eisen JPG. Controleer dus eerst welk formaat er wordt geaccepteerd.
• Bestanden die iedereen op zijn computer moet kunnen openen: wie een downloadlink aanklikt en het bestand in de standaardviewer van Windows opent, kan bij oudere Windows-versies tegen problemen met WebP aanlopen.

Methode 1 — online converteren (het snelst, zonder installatie)

Voor losse afbeeldingen — of wanneer je snel resultaat wilt zonder iets in te richten — is een online converter de kortste route. De tool Converteren van ImageTools zet JPG, PNG en andere formaten om naar WebP, direct in je browser en zonder je bestanden naar externe servers te sturen.

1. Open de tool Converteren.
2. Kies je afbeeldingen of sleep ze naar het uploadvak.
3. Kies WebP als uitvoerformaat.
4. Download de geconverteerde afbeeldingen los, of als ZIP wanneer het er meerdere zijn.

Methode 2 — WordPress (automatisch voor je hele site)

Voor WordPress-sites werkt een plugin die automatisch converteert en WebP uitserveert het efficiëntst — dan hoef je niet elke afbeelding met de hand opnieuw te verwerken.

WordPress 6.1 en hoger (ingebouwde conversie)

Vanaf versie 6.1 zet WordPress afbeeldingen tijdens het uploaden automatisch om naar WebP, mits de server de bibliotheek libwebp ondersteunt (de meeste moderne servers met PHP 8 of hoger doen dat). Je hoeft niets te doen: WordPress maakt WebP-versies aan en levert per browser automatisch het juiste formaat.

Wil je nagaan of het aanstaat? Ga naar Instellingen → Media en zoek de optie voor WebP-conversie. Staat die er niet, dan ondersteunt je server het niet en is een plugin de oplossing.

Met plugins (oudere versies of meer controle)

Dit zijn de meestgebruikte plugins voor WebP-conversie in WordPress:

• ShortPixel Image Optimizer — converteert nieuwe afbeeldingen bij het uploaden en kan je hele bestaande mediabibliotheek opnieuw verwerken. Gratis tot 100 afbeeldingen per maand.
• Imagify — overzichtelijke interface, automatische conversie en optimaliseren in batch. Er is een gratis plan.
• WebP Express — plugin die zich volledig op WebP richt: hij converteert en zet de serverregels automatisch goed.

Methode 3 — opdrachtregel met cwebp (voor ontwikkelaars)

Google stelt cwebp — de officiële WebP-encoder — gratis beschikbaar voor conversie via de terminal. Het is de snelste manier om grote hoeveelheden afbeeldingen om te zetten op een server of in een buildpipeline.

Installatie

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — download het binaire bestand op: https://developers.google.com/speed/webp/download

Basisconversie

# Een JPG-bestand omzetten naar WebP met kwaliteit 80
cwebp -q 80 foto.jpg -o foto.webp

# Een PNG omzetten naar lossless WebP (zonder verlies)
cwebp -lossless logo.png -o logo.webp

# Alle JPG's in een map omzetten (Bash)
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

De parameter -q bepaalt de kwaliteit (0–100). Voor het web geven waarden tussen 75 en 85 de beste balans tussen beeldkwaliteit en bestandsgrootte. Gebruik -lossless voor afbeeldingen die compressie zonder verlies nodig hebben, zoals logo's en screenshots met tekst.

Methode 4 — Node.js met sharp (voor buildpipelines)

Draait je project op Node.js — denk aan Next.js, Gatsby, Nuxt of een andere geautomatiseerde build — dan is de bibliotheek sharp de efficiëntste manier om WebP in de pipeline te genereren:

// npm install sharp

const sharp = require('sharp');

// JPG omzetten naar WebP met kwaliteit 80
sharp('foto.jpg')
  .webp({ quality: 80 })
  .toFile('foto.webp');

// PNG omzetten naar lossless WebP
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// Alle bestanden in een map omzetten
const fs = require('fs');
const path = require('path');

fs.readdirSync('./afbeeldingen')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./afbeeldingen', file);
    const output = path.join('./afbeeldingen', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

sharp draait op de native bibliotheek libvips en is flink sneller dan oplossingen in pure JavaScript — ideaal om WebP-versies te genereren tijdens de build van statische sites.

WebP inbouwen met een fallback voor oudere browsers

De ondersteuning voor WebP ligt in 2026 boven de 97%, maar er blijven situaties waarin een fallback nodig is: bedrijfsomgevingen met IE11, heel oude apparaten, of gewoon de wens om zeker te zijn van maximale compatibiliteit.

De juiste oplossing is de HTML-tag <picture>, waarmee je alternatieve bronnen op volgorde van voorkeur opgeeft:

<!-- De browser gebruikt WebP als hij dat ondersteunt, anders JPG -->
<picture>
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Beschrijving van de foto" width="800" height="600">
</picture>

<!-- Met meerdere formaten voor Retina-schermen -->
<picture>
  <source
    srcset="foto-800.webp 800w, foto-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="foto-800.jpg 800w, foto-1600.jpg 1600w"
    type="image/jpeg">
  <img src="foto-800.jpg" alt="Beschrijving van de foto"
    width="800" height="600" loading="lazy">
</picture>

De browser loopt de bronnen af in de opgegeven volgorde: ondersteunt hij WebP, dan pakt hij de <source> met type="image/webp". Zo niet, dan valt hij terug op de JPG in de <img>. Die <img> aan het eind is verplicht — daar staan de alt, de afmetingen en het standaardgedrag in.

De server zo instellen dat hij WebP automatisch uitserveert (Apache)

Een alternatief voor <picture> is de server laten kijken of de browser WebP accepteert en dan automatisch de juiste versie sturen. Voeg in Apache dit toe aan je .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Stuur .webp als het bestand bestaat en de browser het accepteert
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Met deze instelling hoef je alleen de .webp-bestanden naast de originelen in dezelfde map te zetten. Apache leest in de Accept-header of de browser WebP accepteert en stuurt de juiste versie, zonder dat je iets aan je HTML verandert.

Het resultaat controleren in PageSpeed

Draai na het inbouwen van WebP Google PageSpeed Insights (pagespeed.web.dev) op de URL van je site. De melding "Gebruik afbeeldingen in nieuwe indelingen" hoort te verdwijnen of flink af te nemen. In het kansenoverzicht zie je per nog niet geconverteerde afbeelding hoeveel kB je kunt besparen.

Nog een manier: open Chrome DevTools (F12), ga naar het tabblad Network, filter op "Img" en kijk in de kolom "Type" bij de geladen afbeeldingen. Staat daar webp, dan werkt de conversie.

Welk kwaliteitsniveau kies je bij het converteren?

De kwaliteitsschaal van WebP werkt net als bij JPG: hogere waarden behouden meer detail maar leveren grotere bestanden op. Het verschil is dat WebP voor dezelfde beeldkwaliteit meestal 10 tot 15 punten lager staat dan de vergelijkbare JPG.

Veelgestelde vragen