Batchgewijze Afbeeldingscompressie voor Webontwikkelaars | Bulk Image Compressor

Published December 18, 2025

Afbeeldingen zijn de zwaarste assets op de meeste websites. Op een gemiddelde pagina zijn ze verantwoordelijk voor 40 tot 60% van het totale gewicht. Als je een webontwikkelaar bent en je comprimeert geen afbeeldingen, dan lever je opgeblazen pagina’s op, hoe schoon je code ook is.

De vraag is niet of je moet comprimeren. Het is waar in je workflow compressie moet plaatsvinden en welk hulpmiddel het beste past bij elke situatie.

Waar afbeeldingscompressie past in een ontwikkelworkflow

Er zijn drie belangrijke punten waarop je afbeeldingen kunt comprimeren tijdens de ontwikkeling:

Voor de commit. Je optimaliseert afbeeldingen lokaal voordat ze ooit in versiebeheer komen. Dit houdt je repository beknopt en zorgt ervoor dat elke omgeving (staging, productie, andere ontwikkelaarsmachines) automatisch de geoptimaliseerde versies krijgt.

Tijdens de build. Buildtools zoals Vite of webpack verzorgen compressie als onderdeel van de asset-pijplijn. Bronafbeeldingen blijven op volledige kwaliteit in de repository en het buildproces genereert geoptimaliseerde versies voor implementatie.

Op de CDN-laag. Diensten zoals Cloudflare, Imgix of Cloudinary transformeren en comprimeren afbeeldingen dynamisch op basis van het apparaat en de browser van de bezoeker.

Elke aanpak heeft compromissen en je kunt ze combineren.

Online tools versus build-plugins

Voor een snelle eenmalige taak, zoals het comprimeren van een batch screenshots voor een blogpost of het optimaliseren van een set iconen, is een online tool de snelste optie. Open Bulk Image Compressor, sleep je bestanden erin, pas de kwaliteit aan en download. Klaar in minder dan een minuut.

Build-plugins verzorgen doorlopende optimalisatie automatisch. Zo ziet dat er in de praktijk uit.

Vite

Vite-gebruikers kunnen vite-plugin-imagemin of vergelijkbare plug-ins gebruiken:

// vite.config.js
import imagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    imagemin({
      mozjpeg: { quality: 80 },
      webp: { quality: 80 },
      pngquant: { quality: [0.7, 0.8] },
    }),
  ],
};

Dit comprimeert afbeeldingen tijdens vite build. Bronbestanden blijven onaangeroerd. De uitvoermap krijgt de geoptimaliseerde versies.

webpack

Met webpack doet image-minimizer-webpack-plugin hetzelfde:

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

module.exports = {
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.sharpMinify,
          options: {
            encodeOptions: {
              jpeg: { quality: 80 },
              webp: { quality: 80 },
            },
          },
        },
      }),
    ],
  },
};

Wanneer gebruik je welke

Gebruik een online tool wanneer:

Je een handvol afbeeldingen aan een project toevoegt en ze direct geoptimaliseerd wilt hebben
Je werkt met content van een klant of ontwerper die niet-geoptimaliseerde bestanden heeft gestuurd
Je project geen buildstap heeft (statische HTML, eenvoudige sites)
Je compressieresultaten visueel wilt controleren voordat je commit

Gebruik build-plugins wanneer:

Je project al een build-pijplijn heeft
Meerdere ontwikkelaars afbeeldingen bijdragen en je consistente optimalisatie wilt
Je formaatconversie nodig hebt (bijv. automatisch WebP-versies genereren)
Je bronafbeeldingen op volledige kwaliteit in de repository wilt houden voor mogelijke herverwerking in de toekomst

CI/CD-beeldoptimalisatie

Build-plugins worden uitgevoerd tijdens lokale builds, maar je kunt ook beeldoptimalisatie toevoegen aan je CI/CD-pijplijn. Dit vangt niet-geoptimaliseerde afbeeldingen op die erdoorheen glippen, ongeacht wie ze heeft gecommit.

Een eenvoudige aanpak is het uitvoeren van een script in je CI-pijplijn dat de bestandsgroottes van afbeeldingen controleert:

# Laat de build mislukken als een afbeelding groter is dan 500KB
find public/images -type f \( -name "*.jpg" -o -name "*.png" -o -name "*.webp" \) -size +500k | tee oversized.txt
if [ -s oversized.txt ]; then
  echo "Oversized afbeeldingen gevonden. Comprimeer voor implementatie."
  exit 1
fi

Voor geautomatiseerde compressie in CI kunnen tools zoals sharp-cli of imagemin-cli afbeeldingen verwerken als buildstap. Dit garandeert dat er niets ongecomprimeerd naar productie gaat.

Lazy loading en responsieve afbeeldingen

Compressie alleen is niet genoeg. Hoe je afbeeldingen laadt, is net zo belangrijk.

Lazy loading stelt afbeeldingen buiten het scherm uit totdat de gebruiker ernaartoe scrolt. Voeg loading="lazy" toe aan elke afbeelding onder de vouw. Gebruik geen lazy loading voor je hero-afbeelding of content die zichtbaar is bij de eerste paginalading, omdat dit je Largest Contentful Paint-score schaadt.

Responsieve afbeeldingen dienen verschillende formaten op basis van de schermbreedte. Een telefoon heeft geen 2400px-afbeelding nodig die bedoeld is voor een desktopmonitor. Gebruik srcset- en sizes-attributen om de browser de juiste versie te laten kiezen:

<img
  src="product-800.webp"
  srcset="product-400.webp 400w, product-800.webp 800w, product-1600.webp 1600w"
  sizes="(max-width: 640px) 400px, (max-width: 1024px) 800px, 1600px"
  alt="Productfoto"
  width="1600"
  height="1067"
  loading="lazy"
>

Genereer deze formaatvarianten als onderdeel van je buildproces of met een batchtool voordat je uploadt.

CDN-levering

Een CDN (Content Delivery Network) levert afbeeldingen vanaf servers die geografisch dicht bij je bezoekers staan. Dit vermindert latentie, maar sommige CDN’s gaan verder met realtime beeldoptimalisatie.

Cloudflare Image Resizing kan afbeeldingen automatisch vergroten/verkleinen en converteren naar WebP of AVIF op basis van de browser van de bezoeker. Je hoeft geen varianten zelf te genereren.

Imgix en Cloudinary zijn dedicated beeld-CDN’s. Je uploadt één bron van hoge kwaliteit en zij genereren het gewenste formaat, de gewenste vorm en kwaliteit via URL-parameters. Dit is krachtig maar voegt kosten per afbeelding toe.

Voor de meeste projecten is het comprimeren van afbeeldingen vóór upload en het leveren via een standaard CDN (Cloudflare, Fastly, AWS CloudFront) voldoende. Speciale beeld-CDN’s zijn zinvol wanneer je duizenden door gebruikers geüploade afbeeldingen hebt en dynamisch formaatwijzigingen nodig hebt. Voor achtergrondinformatie over waarom compressie belangrijk is voor het web, behandelt onze gids over waarom website-afbeeldingen compressie nodig hebben de basisbeginselen.

Veelgemaakte fouten van ontwikkelaars

Niet-geoptimaliseerde afbeeldingen committen. Een 5MB JPEG in je repository blijft voor altijd in de git-geschiedenis staan, zelfs als je deze later vervangt. Comprimeer vóór het committen.

PNG gebruiken voor foto’s. PNG’s zijn bedoeld voor graphics, screenshots en afbeeldingen met transparantie. Een foto opgeslagen als PNG is typisch 3 tot 5 keer groter dan dezelfde afbeelding als JPEG of WebP. Gebruik het juiste formaat voor het contenttype. Bekijk onze formaatvergelijkingsgids voor details.

Breedte- en hoogte-attributen overslaan. Zonder expliciete afmetingen weet de browser niet hoeveel ruimte hij moet reserveren voor een afbeelding totdat deze laadt. Dit veroorzaakt layout shifts, wat je CLS-score schaadt en gebruikers irriteert.

Overcomprimeren. Kwaliteit naar 30 of 40% drukken om kleine bestanden te krijgen, zichtbare artefacten produceren. Voor webafbeeldingen geeft 75 tot 82% kwaliteit de juiste balans tussen grootte en uiterlijk.

Afbeeldingsafmetingen negeren. Het comprimeren van een 4000px foto naar 80% kwaliteit is goed, maar als deze op je pagina wordt weergegeven op 600px breed, stuur je nog steeds veel meer pixels dan nodig. Verklein eerst naar je weergave-afmetingen en comprimeer dan.

WebP niet gebruiken. Browserondersteuning voor WebP is nu universeel. Als je nog uitsluitend JPEG en PNG serveert, laat je 25 tot 35% bestandsgroottebesparing liggen.

Een praktische aanpak

Voor de meeste webprojecten werkt het volgende goed:

Verklein en comprimeer afbeeldingen vóór het committen, met een online tool zoals Bulk Image Compressor of een lokaal script.
Voeg een build-plugin toe als vangnet om alles op te vangen wat erdoorheen is geglipt.
Gebruik lazy loading en responsieve afbeeldingen in je HTML.
Lever via een CDN.

Je hoeft niet alle vier op dag één te doen. Begin met de eerste stap. Dat alleen al zal een merkbaar verschil maken in je paginalaadtijden.

Ready to compress your images?

Bulk compress JPEG, PNG, WebP, and AVIF images right in your browser. No uploads, no sign-ups.

Try Bulk Image Compressor