WebP voor websites: waarom je moet
overstappen van JPG/PNG

Het picture-element met JPG-fallback

Het HTML-element <picture> is de meest betrouwbare manier om WebP te serveren met een fallback voor oudere browsers. De browser kiest het beste beschikbare formaat, zonder JavaScript:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img src="hero.jpg" alt="Hero banner" width="1200" height="630"
       loading="lazy" decoding="async">
</picture>

Als de browser WebP ondersteunt, downloadt hij hero.webp. Anders valt hij terug op hero.jpg. De <img>-tag dient als ultieme fallback en bevat ook de attributen alt, width, height en loading.

Voor responsieve afbeeldingen combineer je het <picture>-element met srcset en sizes om verschillende resoluties te serveren op basis van de viewportbreedte:

<picture>
  <source
    srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
    type="image/webp">
  <img
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 600px"
    src="photo-800.jpg" alt="Productfoto" width="800" height="600"
    loading="lazy" decoding="async">
</picture>

Server-side content-negotiation

Content-negotiation controleert de Accept-header van de browser en serveert WebP transparant — zonder HTML-wijzigingen. Wanneer een browser een afbeelding opvraagt en image/webp opneemt in zijn Accept-header, antwoordt de server met de WebP-versie.

Nginx-configuratie

Voeg dit toe aan je Nginx-serverblok om WebP-varianten te serveren als ze naast de originele bestanden bestaan:

map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

server {
    location ~* \.(jpe?g|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

Dit zoekt naar een .webp-bestand naast het origineel (bijv. photo.jpg.webp naast photo.jpg). Als de browser WebP ondersteunt en het bestand bestaat, serveert Nginx het. De Vary: Accept-header zorgt ervoor dat CDN's en proxycaches aparte versies opslaan voor verschillende browsermogelijkheden.

Apache .htaccess-regels

Voeg voor Apache-servers deze rewrite-regels toe aan je .htaccess-bestand:

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,L]

Header append Vary Accept env=REDIRECT_accept

Hetzelfde principe geldt: als de browser WebP accepteert en er een .webp-variant op schijf bestaat, serveert Apache die transparant. Er zijn geen HTML-wijzigingen nodig.

CDN-autoconversie-oplossingen

De eenvoudigste aanpak voor de meeste websites is om de CDN WebP-conversie automatisch te laten afhandelen. Je uploadt JPG/PNG-originelen, en de CDN serveert geoptimaliseerde WebP aan ondersteunde browsers met nul codewijzigingen.

CDN-gebaseerde oplossingen handelen content-negotiation, caching en cache-invalidatie automatisch af. Ze zijn de aanbevolen aanpak voor dynamische websites waar gebruikers of contentredacteuren afbeeldingen uploaden — je kunt niet voorspellen welke afbeeldingen er komen, dus automatische conversie is essentieel.

WordPress WebP-installatie

WordPress 5.8+ ondersteunt WebP-uploads native, maar je hebt een plugin nodig om bestaande afbeeldingen te converteren en optimaal te serveren:

• ShortPixel Image Optimizer: Converteert bestaande afbeeldingen naar WebP on-the-fly. Serveert WebP via het <picture>-element of .htaccess-rewrite. Gratis tier: 100 afbeeldingen/maand
• Imagify: Bulkconversie met drie kwaliteitsniveaus (normaal, agressief, ultra). Integreert met WP Rocket voor caching. Gratis tier: 20 MB/maand
• EWWW Image Optimizer: Genereert automatisch WebP-kopieën bij upload. Herschrijft afbeeldings-URL's via plugin of CDN. Gratis onbeperkte lokale optimalisatie
• WebP Express: Lichtgewicht plugin gericht uitsluitend op WebP-conversie. Configureert .htaccess of gebruikt PHP-gebaseerde serving. Gratis en open source

Voor de meeste WordPress-sites zijn ShortPixel of EWWW de veiligste keuzes. Ze verwerken de volledige pipeline: converteren bij upload, genereren WebP-varianten, herschrijven HTML om WebP te serveren en vallen terug op JPG/PNG voor niet-ondersteunde browsers.

Integratie met buildtools

Voor statische sites en JavaScript-frameworks (React, Vue, Next.js, Nuxt) integreer je WebP-generatie in je buildpipeline, zodat afbeeldingen automatisch worden geconverteerd tijdens het bouwen.

Webpack (image-minimizer-webpack-plugin)

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        generator: [{
          preset: "webp",
          implementation: ImageMinimizerPlugin.sharpGenerate,
          options: { encodeOptions: { webp: { quality: 80 } } }
        }]
      })
    ]
  }
};

Vite (vite-plugin-imagemin)

import viteImagemin from "vite-plugin-imagemin";

export default defineConfig({
  plugins: [
    viteImagemin({
      webp: { quality: 80 }
    })
  ]
});

Conversie tijdens het bouwen werkt goed voor sites met een vaste set afbeeldingen (marketingpagina's, documentatie, blogs). Voor door gebruikers geüploade content kun je beter CDN-gebaseerde oplossingen gebruiken die afbeeldingen dynamisch verwerken.

Optimale kwaliteitsinstellingen

De juiste WebP-kwaliteitsinstelling kiezen is cruciaal. Te laag en je krijgt zichtbare artefacten; te hoog en je verliest de voordelen qua bestandsgrootte. Hier zijn aanbevolen instellingen per contenttype:

De impact meten

Meet na het implementeren van WebP de daadwerkelijke prestatieverbetering met deze tools:

• Google Lighthouse: Voer audits uit voor en na de overstap. Controleer de diagnostiek "Serveer afbeeldingen in next-gen formaten" — die moet verdwijnen. Vergelijk de Performance-score, LCP en Total Blocking Time
• PageSpeed Insights: Test zowel mobiel als desktop vanaf Google's servers. Het onderdeel "Kansen" mag beeldoptimalisatie niet meer als aanbeveling vermelden
• WebPageTest: Geeft gedetailleerde watervalgrafieken met individuele laadtijden per afbeelding. Vergelijk filmstrip-weergaven voor en na de overstap om het verschil in visuele rendersnelheid te zien
• Chrome DevTools Network-tab: Filter op type "Img" en vergelijk de totale transfergrootte. Verifieer dat de Content-Type-header image/webp toont voor geconverteerde afbeeldingen
• Search Console Core Web Vitals: Monitoor velddata gedurende 2–4 weken na de overstap. Let op verbeteringen in LCP en het algehele percentage "Goede URL's"

Overwegingen bij lazy loading

WebP en lazy loading werken samen om de prestaties te maximaliseren, maar er zijn belangrijke implementatiedetails:

• Afbeeldingen above the fold: Gebruik GEEN lazy loading voor je hero-afbeelding of afbeeldingen die direct zichtbaar zijn bij het laden van de pagina. Gebruik loading="eager" (de standaard) en voeg fetchpriority="high" toe voor de LCP-afbeelding
• Afbeeldingen below the fold: Gebruik loading="lazy" op alle overige afbeeldingen. De browser stelt het laden uit totdat de gebruiker ernaar toe scrolt
• Stel altijd afmetingen in: Voeg expliciete attributen width en height toe aan elke <img>-tag om Cumulative Layout Shift (CLS) te voorkomen
• Asynchroon decoderen: Voeg decoding="async" toe zodat de browser afbeeldingen buiten de main thread kan decoderen

<!-- Hero-afbeelding: eager loading, hoge prioriteit -->
<img src="hero.webp" alt="..." width="1200" height="630"
     fetchpriority="high" decoding="async">

<!-- Below the fold: lazy loading -->
<img src="product.webp" alt="..." width="600" height="400"
     loading="lazy" decoding="async">