Productafbeeldingen comprimeren in WooCommerce: zo doe je dat

Een productpagina op een gemiddelde WooCommerce-shop weegt vijf tot vijftien megabyte. Voor de gebruiker op mobiel betekent dat seconden wachten, voor Google een lagere ranking. En in negen van de tien gevallen zit de grootste winst in beeldcompressie.

Bij shops die een paar jaar draaien zie ik hetzelfde patroon. De producten worden uitgebreid, foto’s komen erbij, niemand let op de grootte. Resultaat: een productpagina die op mobiel zeven of acht seconden nodig heeft om te laden, en bezoekers die afhaken voordat ze de prijs zien.

In dit artikel laat ik zien hoe je productafbeeldingen comprimeren in WooCommerce concreet aanpakt. Zonder dat foto’s vaag worden, en zonder dat je een ontwikkelaar nodig hebt voor de eerste stappen.

Waarom productfoto’s de grootste snelheidsbreker zijn

Een gemiddelde WooCommerce-shop laadt drie tot tien afbeeldingen op een productpagina. Bij sliders of variabele producten kan dat oplopen tot dertig. Zelfs als elke foto maar 500 KB is, telt het optellen snel op tot 15 MB aan media per pageview.

Op desktop merk je dat zelden, op een mobiele 4G-verbinding wel. Google noemt dit de Largest Contentful Paint, oftewel de tijd waarop het grootste element op je pagina zichtbaar wordt. Bij webshops is dat bijna altijd een productfoto. Komt hij niet binnen 2,5 seconden op het scherm, dan zakt je site weg in zoekresultaten en haken bezoekers af.

De goede kant van het verhaal: met de juiste compressie valt bij vrijwel elke shop 60 tot 80 procent van het mediagewicht weg. Zonder dat iemand het verschil ziet aan de foto’s zelf.

Juiste afmetingen voor WooCommerce-thumbnails

Voordat we naar compressie kijken, eerst de basis: welke maten gebruikt WooCommerce eigenlijk. Het systeem genereert standaard drie formaten voor elke productfoto.

Je past dit aan via WooCommerce → Instellingen → Producten → Weergave. Mijn praktijkadvies: zet catalogus op 600 px, single op 1200 px (voor retina-schermen) en thumbnails op 150 px. Daarna draai je de plugin Regenerate Thumbnails om de bestaande afbeeldingen opnieuw te genereren in die maten.

Wat veel shop-eigenaren over het hoofd zien: het originele bestand wordt nooit verwijderd. Upload je een foto van 4000 px breed, dan blijft die 4000-pixelversie op je server staan. Hij wordt alleen niet meer getoond als je de juiste maten hebt ingesteld. Voor de mediagrootte op de productpagina maakt het dus uit.

WebP en AVIF: wanneer welk formaat

Naast afmetingen telt het bestandsformaat. JPG is de oude standaard, maar er zijn al een paar jaar betere opties.

WebP is een formaat van Google. Bij dezelfde visuele kwaliteit is een WebP-bestand 25 tot 35 procent kleiner dan een JPG. Browserondersteuning staat in 2026 op ongeveer 96 procent volgens Can I Use. Voor de meeste mkb-webshops is dat ruim genoeg.

AVIF is nieuwer. Nog 50 procent kleiner dan WebP bij gelijke kwaliteit, met een ondersteuning van ongeveer 92 procent. De besparing is groot, maar AVIF-conversie kost meer rekenkracht en niet elke hostingomgeving doet het soepel.

Mijn keuze voor 2026: WebP voor de meeste WooCommerce-shops, AVIF alleen bij shops met grote, gedetailleerde fotografie waar elke kilobyte telt (denk aan mode-, design- of meubelwebshops). Voor een installateur of bouwmarkt is WebP voldoende.

Plugins vergeleken: ShortPixel, Imagify en Smush

Compressie zelf doe je niet met de hand. Daar gebruik je een plugin voor. Drie die ik regelmatig inzet:

Mijn voorkeur voor productieshops met meer dan honderd producten: ShortPixel met een betaald plan. De compressie is consistent goed en WebP wordt automatisch geserveerd via een eenvoudige .htaccess-regel of via de plugin zelf.

Voor kleinere shops onder de honderd producten: Smush als startoplossing. Werkt zonder betalen, en je kunt later upgraden zonder migratie.

Wat ik niet gebruik: ingebakken compressie van een fotobewerkingsprogramma alleen. Photoshop save-for-web of TinyPNG vóór upload is prima als aanvulling, maar voldoet zelden voor de volledige media library. Een plugin doet het automatisch voor alle bestaande én toekomstige uploads, en dat is waar het op aankomt.

Bulk-conversie van bestaande media-library

De grootste winst zit in het bulk-optimaliseren van afbeeldingen die er al staan. Bij een grote shop kan het zomaar om enkele duizenden productfoto’s gaan. Mijn werkvolgorde voor zo’n traject:

1. Volledige back-up van bestanden en database. Een bulk-conversie raakt soms duizenden bestanden, fouten kunnen nooit helemaal worden uitgesloten.
2. Plugin installeren en instellen. Compressielevel op “glossy” of “lossy” (visueel niet te onderscheiden van het origineel, maar wel veel kleiner). WebP-conversie aan. Originelen bewaren voor zes maanden, voor het geval terugdraaien nodig is.
3. Bulk-optimalisatie starten. Bij ShortPixel verwerkt de plugin een paar honderd afbeeldingen per minuut, afhankelijk van je server. Voor 5.000 foto’s reken ik op één tot twee uur achtergrondverwerking.
4. Controleren op een paar productpagina’s. Vergelijk vooral foto’s met details: textuur, kleinere tekst op verpakking, scherpte van randen.
5. WebP-aflevering aanzetten. Zorg dat de plugin echt de WebP-versie serveert aan browsers die het ondersteunen. Soms moet je dit handmatig activeren in de plugin-instellingen.
6. Twee weken later opnieuw controleren. Niet alle browsers cachen onmiddellijk, en feedback van eindgebruikers komt vaak pas later.

In zo’n geval zie je een productpagina van bijvoorbeeld 28 MB terugzakken naar een paar MB, met laadtijden op mobiel die van 7 à 8 seconden naar rond de 2 seconden gaan.

Checken of het echt werkt: testtools en metrics

Wat je niet meet, weet je niet. Drie tools die ik gebruik na elke optimalisatieronde:

• PageSpeed Insights van Google. Geeft direct de score en de specifieke aanbevelingen rond afbeeldingen. Test minstens drie typen pagina’s: homepage, categoriepagina en productpagina.
• GTmetrix. Gedetailleerder watervalbeeld van wat er precies geladen wordt, met de exacte grootte van elk bestand. Handig om te zien of een specifieke foto nog opvalt.
• Chrome DevTools, tabblad Netwerk. In je eigen browser kun je zien wat er werkelijk over de lijn gaat. Filter op “img” en sorteer op grootte.

Praktische streefwaarden voor een WooCommerce-shop in 2026:

• Totale paginagrootte: onder de 2 MB op productpagina’s
• LCP op mobiel: onder de 2,5 seconden
• Aandeel afbeeldingen in het totaalgewicht: onder de 60 procent

Haal je deze, dan zit je in de goede helft van WooCommerce-shops. Lukt het niet, dan is er meer aan de hand dan alleen de afbeeldingen. Vaak zit het in plugins, hosting of een opgeblazen thema. Daar gaat een andere check over.

Wat dit oplevert in de praktijk

Een typisch voorbeeld: een WooCommerce-shop met enkele duizenden productfoto’s en een productpagina van rond de 28 MB. Met de aanpak hierboven, ongeveer een dag werk, gaat dat terug naar een paar MB. Een PageSpeed-score die rond de 20 hangt, kan dan naar 70 of hoger, met een merkbaar lagere bouncerate en betere conversie.

Beeldcompressie doet niet alles in je eentje; vaak loopt er een plugin-opschoning en een caching-fix mee. Maar afbeeldingen zijn meestal het grootste deel van het verschil. Werk van een dag, met effect dat blijft staan zolang nieuwe uploads ook door de plugin gaan.

Heb je een vraag over dit onderwerp? Stuur een bericht, ik reageer binnen 4 uur op werkdagen. Meer praktische uitleg over je shop staat in de categorie webshop optimalisatie, en voor doorlopend onderhoud kun je terecht op de pagina diensten.