Afbeelding comprimeren — online tool

Wat is afbeeldingscompressie?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Functies

JPEG vs PNG vs WebP

Compressievoorbeelden

photo-landscape.jpg (2.1 MB, 4000×3000)

photo-landscape.jpg (680 KB at quality 75)

logo-transparent.png (450 KB, 1200×800)

logo-transparent.webp (85 KB at quality 80)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (250 KB at quality 75)

Zo gebruik je het

1. 1

   Upload je afbeeldingen

   Sleep afbeeldingen naar het uploadgebied of klik om je bestanden te doorzoeken. Je kunt tot 20 JPEG-, PNG- of WebP-afbeeldingen tegelijk selecteren, elk tot 10 MB.

2. 2

   Stel de kwaliteit in

   Gebruik de kwaliteitsschuifregelaar om het gewenste compressieniveau in te stellen (0–100). De standaard is 75, wat een goede balans biedt. Zie de bestandsgroottes en compressieverhoudingen in realtime bijwerken.

3. 3

   Download de resultaten

   Klik op Downloaden voor een afzonderlijk bestand, of gebruik Alles downloaden om elke gecomprimeerde afbeelding op te slaan. Gebruik de knop Vergelijken om de kwaliteit visueel te inspecteren vóór het downloaden.

Toepassingen

Websiteprestaties optimaliseren

Verklein afbeeldingsbestanden vóór het uploaden naar je website. Kleinere afbeeldingen laden sneller, verbeteren Core Web Vitals-scores (met name Largest Contentful Paint), verlagen bandbreedtekosten en verbeteren SEO-rankings.

Bijlagen in e-mail verkleinen

Comprimeer afbeeldingen vóór het toevoegen als e-mailbijlage om binnen de bijlagelimiet te blijven (doorgaans 10–25 MB). Een batch van 20 foto's kan vaak worden gecomprimeerd van 50 MB naar minder dan 10 MB.

Voorbereiding voor sociale media

Comprimeer afbeeldingen vooraf vóór het uploaden naar sociale-mediaplatforms. Hoewel platforms afbeeldingen automatisch opnieuw comprimeren, geeft beginnen met een optimaal gecomprimeerd bestand je meer controle over de uiteindelijke kwaliteit.

App- en game-asset optimalisatie

Comprimeer UI-assets, texturen en sprites voor mobiele apps, games en progressive web apps. Kleinere assets zorgen voor snellere downloads, minder opslaggebruik en een soepelere gebruikerservaring.

Documenten en presentaties optimaliseren

Verklein de omvang van afbeeldingen ingebed in PDF's, Word-documenten en presentaties. Een slideshow van 50 MB met hoge-resolutiefoto's kan vaak worden teruggebracht naar 10 MB zonder merkbaar kwaliteitsverlies.

Technische details

Canvas API-compressie

Deze tool gebruikt de methode toBlob() van de HTML5 Canvas API voor compressie. De afbeelding wordt op een onzichtbaar canvas-element getekend en vervolgens opnieuw gecodeerd met de opgegeven kwaliteitsparameter. Voor JPEG en WebP bepaalt de kwaliteitsparameter (0,0–1,0) het lossy-compressieniveau. Voor PNG negeert de Canvas API de kwaliteitsparameter volledig — PNG-codering via Canvas is altijd lossless.

PNG naar WebP converteren

Omdat Canvas toBlob() de kwaliteitsparameter negeert voor PNG-afbeeldingen (uitvoer is altijd lossless), converteert deze tool PNG-bestanden naar WebP-formaat wanneer de kwaliteitsschuifregelaar onder 100 staat. WebP ondersteunt zowel lossy-compressie (met kwaliteitscontrole) als transparantie, waardoor het het ideale lossy alternatief voor PNG is. Wanneer de kwaliteit op 100 staat, blijven PNG-bestanden in hun originele formaat.

Gedrag van de kwaliteitsparameter

De kwaliteitsschuifregelaar wordt gekoppeld aan de kwaliteitsparameter van Canvas toBlob(): 100 = 1,0 (hoogste kwaliteit, grootste bestand), 0 = 0,0 (laagste kwaliteit, kleinste bestand). Voor JPEG is kwaliteit 75 (0,75) over het algemeen het ideale punt — onder 50 worden artefacten zichtbaar. Voor WebP produceert dezelfde kwaliteitswaarde iets kleinere bestanden dan JPEG bij vergelijkbare visuele kwaliteit.

Browsergeheugen en limieten

Elke afbeelding bestaat in het geheugen als zowel het originele File-object als de gecomprimeerde Blob, plus twee object-URL's voor voorbeeldweergave. Met 20 afbeeldingen van elk 10 MB kan het piekgeheugengebruik oplopen tot ongeveer 400 MB. Object-URL's worden ingetrokken wanneer afbeeldingen worden gewist of de pagina wordt vernieuwd, om geheugenlekken te voorkomen.

Aanbevolen aanpak

Begin bij kwaliteit 75 voor JPEG/WebP

Kwaliteit 75 is het aanbevolen startpunt voor de meeste toepassingen. Dit verkleint de bestandsgrootte doorgaans met 60–80% met minimaal zichtbaar kwaliteitsverlies. Verhoog de kwaliteit alleen boven 85 voor afbeeldingen waarbij het bewaren van fijne details essentieel is (bijv. medische beeldvorming, drukkwaliteitsfotografie).

Gebruik WebP waar mogelijk

WebP produceert bestanden die 25–35% kleiner zijn dan JPEG bij dezelfde visuele kwaliteit en ondersteunt transparantie zoals PNG. Alle moderne browsers ondersteunen WebP vanaf 2024. Converteer JPEG- en PNG-afbeeldingen naar WebP voor de beste compressie-kwaliteitsverhouding op het web.

Bewaar de originele bestanden

Bewaar altijd je originele, ongecomprimeerde afbeeldingen als bronbestanden. Lossy-compressie is onomkeerbaar — een al gecomprimeerde afbeelding opnieuw comprimeren verslechtert de kwaliteit verder zonder significante aanvullende verkleining (bekend als generatieverlies).

Controleer de kwaliteit vóór het downloaden

Gebruik de knop Vergelijken om compressie-artefacten visueel te inspecteren vóór het downloaden. Let extra goed op gebieden met tekst, scherpe randen en subtiele kleurverlopen — dit zijn de plekken waar JPEG-artefacten het meest zichtbaar zijn.

Batch vergelijkbare afbeeldingen samen

Afbeeldingen met vergelijkbare kenmerken (hetzelfde type onderwerp, resolutie, kleurdiepte) comprimeren het beste met dezelfde kwaliteitsinstelling. Batchverwerk je foto's apart van je grafische bestanden/logo's voor optimale resultaten.

Veelgestelde vragen