Zo comprimeer je afbeeldingen voor je website

Volgens de Web Almanac 2025 van HTTP Archive woog de mediane homepage op mobiel 2,56 MB, waarvan 911 KB aan afbeeldingen. Op desktop bevatte de mediane pagina 1.058 KB aan afbeeldingen. Afbeeldingen zijn ook waar bezoekers op wachten: het grootste element op het scherm tijdens het laden, de Largest Contentful Paint (LCP), was op 76% van de mobiele pagina’s een afbeelding.

Lichtere afbeeldingen laden sneller op trage verbindingen, verbruiken minder mobiele data van je bezoekers en kosten jou minder bandbreedte. LCP is een van de Core Web Vitals, de metingen waarmee Google de gebruikservaring van een pagina beoordeelt, dus zware afbeeldingen kunnen je meer kosten dan een paar seconden geduld.

Compressie kan een afbeelding die veel groter is dan de ruimte die ze vult niet redden. Een camerafoto van 4000 pixels breed, getoond in een kolom van 800 pixels, bevat 25 keer meer pixels dan de pagina kan gebruiken. web.dev merkt op dat afbeeldingen op desktopformaat naar telefoons sturen 2–4 keer meer data kan kosten dan nodig.

• Banners over de volle breedte: ongeveer 1600–2000 pixels breed is genoeg voor de meeste lay-outs.
• Afbeeldingen in een artikelkolom: ongeveer twee keer de kolombreedte, zodat ze scherp blijven op schermen met een hoge pixeldichtheid (bijvoorbeeld 1400 pixels voor een kolom van 700 pixels).
• Miniaturen en avatars: twee keer hun weergavegrootte, vaak 200–400 pixels.

Het bestandsformaat bepaalt hoe efficiënt een afbeelding kan worden opgeslagen. Kort gezegd: foto’s passen bij JPG of WebP; logo’s, screenshots en alles met transparantie passen bij PNG of WebP. Onze vergelijking van JPG, PNG en WebP legt uit wanneer welk formaat wint.

Ongeveer 97% van de gebruikte browsers toont WebP, en het is vaak merkbaar kleiner. Wil je het proberen? Zet je bestanden om met JPG naar WebP of PNG naar WebP en vergelijk het resultaat met het origineel: een omgezet bestand is niet altijd kleiner, vooral niet bij eenvoudige graphics.

Compressie verwijdert gegevens die het oog waarschijnlijk niet mist. In de afbeeldingscompressor van Bitinz sleep je een reeks JPG-, PNG- of WebP-bestanden naar binnen en kies je een van drie niveaus:

• Snel: snelheid eerst, voor grote reeksen.
• Gebalanceerd: de standaardinstelling en een goede keuze voor de meeste afbeeldingen op een website.
• Maximaal: duurt iets langer, voor kleinere bestanden; de moeite waard voor afbeeldingen die op elke pagina staan, zoals banners en achtergronden.

Als je het bestandsformaat behoudt, krijg je van Bitinz nooit een groter bestand terug dan je hebt geüpload. Vergelijk het resultaat op ware grootte met het origineel, vooral bij afbeeldingen met fijne tekst of vloeiende kleurverlopen, en download dan de bestanden waar je tevreden over bent.

Ook een goed gecomprimeerde afbeelding kan een pagina vertragen als ze op het verkeerde moment of in de verkeerde grootte laadt. Een paar HTML-attributen doen het meeste werk:

• Geef elke afbeelding width en height, zodat de browser de ruimte kan reserveren en de lay-out niet verspringt tijdens het laden.
• Voeg loading="lazy" toe aan afbeeldingen verderop op de pagina, zodat ze pas laden wanneer een bezoeker er in de buurt komt.
• Gebruik nooit lazy loading voor de hoofdafbeelding bovenaan de pagina. web.dev raadt voor die afbeelding juist fetchpriority="high" aan, op niet meer dan één of twee afbeeldingen.
• Gebruik srcset en sizes om een paar breedtes van dezelfde afbeelding aan te bieden, zodat telefoons een kleiner bestand downloaden dan grote schermen.
• Lever afbeeldingen met een lange cacheduur, via een CDN als je die hebt, zodat terugkerende bezoekers ze niet opnieuw hoeven te downloaden.

Test de pagina met PageSpeed Insights of het Lighthouse-paneel in Chrome. Sinds Lighthouse 13 zijn de afbeeldingscontroles samengevoegd in één inzicht, “Improve image delivery”, dat afbeeldingen opsomt die verder gecomprimeerd, in een modern formaat geleverd of kleiner gemaakt kunnen worden. Afbeeldingen die minder dan 4 KiB zouden besparen, staan er niet in, dus een korte lijst is een goed teken.

Bekijk de pagina daarna zelf op een telefoon. Scherpe randen, tekst in afbeeldingen en huidtinten zijn de plekken waar compressieproblemen het eerst opvallen.

Voegt je site elke dag afbeeldingen toe, bijvoorbeeld via een contentmanagementsysteem of een webwinkel, comprimeer ze dan tijdens het uploaden of publiceren in plaats van met de hand. De ontwikkelaars-API van Bitinz neemt een afbeelding via HTTP aan en geeft een link naar het gecomprimeerde bestand terug, zodat je hem vanuit een script of een build-pipeline kunt aanroepen. Elk account heeft een gratis maandelijks quotum.

1. 01Verklein elke afbeelding tot ongeveer twee keer de grootte waarop ze wordt getoond.
2. 02Gebruik JPG of WebP voor foto’s, en PNG of WebP voor graphics en transparantie.
3. 03Comprimeer op het niveau Gebalanceerd en probeer Maximaal voor de grootste afbeeldingen.
4. 04Vergelijk het resultaat met het origineel voordat je het vervangt.
5. 05Stel breedte en hoogte in, gebruik lazy loading voor afbeeldingen onder de vouw en nooit voor de hoofdafbeelding.
6. 06Controleer de pagina opnieuw in PageSpeed Insights.

Upload je afbeeldingen ergens anders dan op je eigen website? Elk platform heeft zijn eigen regels: zie eisen voor afbeeldingsgrootte bij e-mail en webwinkels.