Image optimalisatie voor webshops — WebP, AVIF en lazy loading

Image optimalisatie voor webshops — WebP, AVIF en lazy loading

Afbeeldingen zijn verantwoordelijk voor 60-65% van het totale paginagewicht in de gemiddelde webshop. Een productpagina met tien JPEG-afbeeldingen van elk 400KB laadt 4MB aan beelddata. Op mobiel met 4G is dat een LCP van 5+ seconden.

Het gaat niet om kwaliteit verlagen. Met WebP en AVIF lever je betere kwaliteit bij 30-50% minder data. Dit is wat het verschil maakt.

Wat je leert in dit artikel

• WebP vs AVIF: wanneer gebruik je welk formaat
• Responsive images met srcset en sizes
• Lazy loading correct implementeren zonder LCP te schaden
• CDN-strategie voor afbeeldingen
• Concrete besparingen per scenario

Het probleem met JPEG en PNG in 2026

JPEG bestaat al 30 jaar. Het is een uitstekend formaat voor het jaar 1992. In 2026 zijn er betere alternatieven die dezelfde visuele kwaliteit leveren bij significant minder bytes.

PNG is nog ouder en zinvol alleen voor afbeeldingen die transparantie vereisen (logo's, iconen met transparante achtergrond). Voor product-foto's is PNG bijna nooit de juiste keuze — PNG-bestanden zijn doorgaans 2-5x groter dan een vergelijkbare JPEG.

Toch draaien de meeste webshops nog grotendeels op JPEG en PNG. Waarom? Omdat Magento, Shopify en andere platforms niet automatisch converteren. Het vergt een bewuste keuze en implementatie.

WebP: de veilige, brede keuze

WebP is ontwikkeld door Google en heeft in 2026 >97% browser-ondersteuning. Elke moderne browser — Chrome, Firefox, Safari, Edge — ondersteunt het.

• Verliesloze WebP: 26% kleiner dan PNG
• Lossy WebP bij vergelijkbare kwaliteit: 25-35% kleiner dan JPEG
• Ondersteunt transparantie (vervangt PNG voor afbeeldingen met alpha-kanaal)

WebP is de veilige keuze voor productafbeeldingen. Je kunt het deployen zonder fallback-zorgen voor >97% van je bezoekers.

AVIF: de moderne, compactere optie

AVIF (AV1 Image File Format) is gebaseerd op de AV1 videocodec. Het levert indrukwekkende compressie.

• Gemiddeld 40-50% kleiner bij vergelijkbare kwaliteit
• Bij bepaalde afbeeldingstypen (kleurverloop, huid) tot 60% kleiner

• Chrome: Ja (v85+)
• Firefox: Ja (v93+)
• Safari: Ja (v16+)
• Edge: Ja (v89+)
• Totale coverage: ~95%

De 5% die AVIF niet ondersteunt zijn voornamelijk oudere Safari-versies op iOS en verouderde browsers. De oplossing: bied AVIF aan waar het kan, val terug op WebP of JPEG.

Responsive images: de juiste afbeelding voor het juiste apparaat

Een mobiele telefoon heeft een scherm van 390px breed. Die heeft geen afbeelding van 1200px nodig. Toch laden veel webshops één grote afbeelding voor alle apparaten.

Het element met srcset lost dit op.

<picture>
    <!-- AVIF voor browsers die het ondersteunen -->
    <source
        type="image/avif"
        srcset="
            /media/product/schoen-400.avif 400w,
            /media/product/schoen-800.avif 800w,
            /media/product/schoen-1200.avif 1200w
        "
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    >
    <!-- WebP als fallback -->
    <source
        type="image/webp"
        srcset="
            /media/product/schoen-400.webp 400w,
            /media/product/schoen-800.webp 800w,
            /media/product/schoen-1200.webp 1200w
        "
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    >
    <!-- JPEG fallback voor alle overige browsers -->
    <img
        src="/media/product/schoen-1200.jpg"
        alt="Hardloopschoen Nike Air Max 270, zwart"
        width="1200"
        height="1200"
        loading="lazy"
    >
</picture>

Het sizes attribuut vertelt de browser hoe groot de afbeelding op het scherm zal zijn. (max-width: 768px) 100vw betekent: op schermen smaller dan 768px neemt de afbeelding de volledige breedte in. De browser kiest dan de kleinste srcset-variant die voldoende scherp is.

Lazy loading: wat het is en wat het niet is

Lazy loading zorgt dat afbeeldingen buiten de viewport pas geladen worden als de gebruiker ernaar scrolt. Dit verlaagt de initiële paginalaadtijd aanzienlijk.

<!-- Lazy loading voor afbeeldingen buiten de viewport -->
<img
    src="/media/product/schoen.webp"
    alt="Hardloopschoen"
    loading="lazy"
    width="800"
    height="800"
>

De bovenste afbeelding op een pagina — het LCP-element — mag nooit loading="lazy" hebben. Lazy loading vertraagt het laden van die afbeelding juist, wat je LCP drastisch verhoogt.

<!-- LCP-afbeelding: GEEN lazy loading, WEL fetchpriority -->
<img
    src="/media/hero/banner.webp"
    alt="Zomercollectie 2026"
    loading="eager"
    fetchpriority="high"
    width="1200"
    height="500"
>

<!-- Productafbeeldingen lager op de pagina: lazy loading wel correct -->
<img
    src="/media/product/schoen.webp"
    alt="Hardloopschoen"
    loading="lazy"
    width="400"
    height="400"
>

Meer over LCP-afbeelding optimalisatie in ons artikel over Largest Contentful Paint optimaliseren.

Magento 2: automatische WebP-generatie

Magento 2.4.4+ heeft ingebouwde WebP-ondersteuning via de image adapter. Zet het aan in de admin.

# Magento CLI: WebP adapter activeren
php bin/magento config:set dev/image/default_adapter GD

Voor geavanceerdere controle over WebP-kwaliteit en AVIF-generatie gebruiken wij een Magento-module die het beeldverwerkingsproces uitbreidt. Meer over Magento extensies en optimalisaties op onze Magento-pagina.

Een voorbeeld van een custom Magento image processor die AVIF genereert:

<?php
// app/code/Vendor/ImageOptimizer/Model/Adapter/Avif.php

namespace Vendor\ImageOptimizer\Model\Adapter;

use Magento\Framework\Image\Adapter\AbstractAdapter;

class Avif extends AbstractAdapter
{
    public function save($destination = null, $newName = null): void
    {
        $fileName = $destination ?? $this->_fileSrcPath;

        // Gebruik Imagick voor AVIF-generatie
        $imagick = new \Imagick($this->_fileSrcPath);
        $imagick->setImageFormat('avif');
        $imagick->setImageCompressionQuality(75);
        $imagick->writeImage($fileName . '.avif');
    }
}

CDN voor afbeeldingen

Een CDN (Content Delivery Network) cachet afbeeldingen op servers verspreid over de wereld. Een gebruiker in Rotterdam haalt afbeeldingen op van een server in Amsterdam in plaats van een server in Frankfurt. De latency daalt van 40ms naar 8ms per request.

Voor webshops met overwegend Nederlandse en Belgische bezoekers is een CDN als Cloudflare of AWS CloudFront de aangewezen keuze.

• Lagere latency door geografische nabijheid
• Minder belasting op je origin-server
• Automatische HTTP/2 en HTTP/3 delivery
• TLS-afhandeling dichter bij de gebruiker

Moderne CDNs zoals Cloudflare kunnen ook on-the-fly image transformaties uitvoeren: automatische WebP-conversie, resizing op basis van de viewport, kwaliteitsaanpassing. Dit elimineert de noodzaak om zelf multiple afbeeldingsvarianten te genereren.

# Cloudflare Polish instellen (via dashboard of API)
# Optie: Lossless, Lossy, of Off
# Met Polish converteert Cloudflare automatisch naar WebP voor ondersteunende browsers

Concrete besparingen per scenario

Hier zijn realistische besparingen die wij meten in projecten:

Scenario 1: Productpagina met 8 JPEG-afbeeldingen

Scenario 2: Categoriepagina met 24 productminiaturen

Op een categoriepagina laadt de gebruiker zonder lazy loading direct alle 24 afbeeldingen. Met lazy loading laad je alleen de 4-6 afbeeldingen die zichtbaar zijn. De rest laadt pas als de gebruiker scrollt.

Het width en height attribuut: niet optioneel

Dit is de meest vergeten optimalisatie. Geef elke afbeelding expliciete width en height attributen, ook als je de grootte via CSS bepaalt.

Zonder die attributen weet de browser de hoogte van de afbeelding niet totdat hij gedownload is. Dat veroorzaakt een Cumulative Layout Shift (CLS): de pagina springt als de afbeelding binnenkomt. Dat schaadt je CLS-score en irriteert gebruikers.

<!-- Verkeerd: geen afmetingen -->
<img src="product.webp" alt="Schoen" style="width: 100%">

<!-- Correct: afmetingen meegeven zodat browser ruimte reserveert -->
<img src="product.webp" alt="Schoen" width="800" height="800" style="width: 100%; height: auto">

Tools voor conversie en automatisering

• cwebp (Google, gratis CLI-tool)
• avifenc (gratis, open source)
• ImageMagick (libavif plugin vereist voor AVIF)
• Squoosh (Google, browser-based tool voor handmatige conversie)

• Magento's ingebouwde WebP-adapter (2.4.4+)
• Spatie Image Optimizer (Laravel-projecten)
• Custom processors voor AVIF-generatie

• Cloudflare Polish (automatische WebP-conversie)
• Cloudinary (uitgebreide image management API)
• imgix (on-the-fly transformaties via URL parameters)

Conclusie

Afbeeldingsoptimalisatie is de investering met de snelste terugverdientijd in e-commerce performance. De overgang van JPEG naar WebP is vandaag veilig voor 97%+ van je bezoekers. AVIF voeg je toe als progressieve verbetering.

Lazy loading op afbeeldingen buiten de viewport is verplicht. Het LCP-element — de eerste zichtbare afbeelding — krijgt nooit lazy loading.

CDN-delivery is de kers op de taart: het verlaagt latency voor alle afbeeldingen zonder dat je iets aan de afbeeldingen zelf hoeft te veranderen.

Zie ook ons overzicht van Magento performance-optimalisaties voor meer technische verbeteringen. Voor Shopify-shops geldt dezelfde aanpak: WebP/AVIF via een image CDN en correcte lazy loading.

Lees ook: third-party scripts en hun impact op performance en JavaScript bundel verkleinen.

Veelgestelde vragen

Verlaagt WebP of AVIF de zichtbare kwaliteit van productfoto's?

Bij goed ingestelde kwaliteitsparameters is het verschil voor de meeste gebruikers niet zichtbaar. WebP op kwaliteit 80-85 en AVIF op kwaliteit 70-75 leveren visueel vergelijkbare resultaten met JPEG op kwaliteit 90, bij significant kleinere bestanden. Voor modewebshops met hoge kwaliteitseisen testen we de kwaliteitsdrempel per project.

Moet ik mijn bestaande afbeeldingen herconverteren?

Als je al jaren productafbeeldingen hebt opgebouwd, is herconversie een project op zich. De pragmatische aanpak: converteer nieuwe afbeeldingen direct naar WebP/AVIF, en converteer bestaande afbeeldingen in batches, te beginnen met de meest bezochte categorieën.

Werkt loading="lazy" in alle browsers?

Ja. Native lazy loading via het loading="lazy" attribuut werkt in alle moderne browsers (>95% coverage). Voor de resterende 5% laadt de browser gewoon alle afbeeldingen, wat het normale gedrag is. Er is geen JavaScript fallback nodig.

Hoe weet ik of mijn CDN WebP correct serveert?

Open Chrome DevTools, ga naar het Network-tabblad, filter op "Img" en bekijk de Content-Type header van afbeeldingsresponses. Die moet image/webp of image/avif zijn, niet image/jpeg. Als je nog steeds image/jpeg ziet, is de CDN-instelling of server-configuratie niet correct.