Afbeeldingen voor het web comprimeren zonder kwaliteitsverlies

Afbeeldingen zijn meestal het zwaarste op een webpagina. Eén niet-geoptimaliseerde foto direct uit een telefooncamera kan meerdere megabytes wegen — meer dan alle tekst, code en styling op een site samen. Afbeeldingen comprimeren is de verandering met de meeste impact die de meeste mensen kunnen doen voor paginasnelheid, en goed gedaan is het onzichtbaar voor bezoekers. Deze gids behandelt hoe afbeeldingscompressie werkt en hoe je bestanden verkleint zonder merkbaar kwaliteitsverlies.

Waarom de afbeeldingsgrootte ertoe doet

Elke extra kilobyte is data die de browser van een bezoeker moet downloaden voordat je pagina getoond kan worden. Op een snelle desktopverbinding valt dat misschien niet op, maar op mobiele netwerken verlengt het direct de laadtijd, frustreert het gebruikers en schaadt het de zoekpositie — Google gebruikt page-experience-signalen zoals laadsnelheid als rankingfactor. Kleinere afbeeldingen betekenen snellere pagina's, lagere bandbreedtekosten en tevredener bezoekers.

Lossy vs. lossless compressie

Er zijn twee fundamenteel verschillende manieren om een afbeeldingsbestand kleiner te maken.

Lossless compressie

Lossless-methoden pakken de data efficiënter in zonder iets weg te gooien — bij decompressie krijg je een pixelperfecte kopie van het origineel terug. Veilig, maar de besparing is bescheiden, meestal 10–50%. PNG gebruikt lossless compressie, en daarom is het geweldig voor logo's, schermafbeeldingen en graphics met scherpe randen en effen kleuren.

Lossy compressie

Lossy-methoden gooien informatie weg die het menselijk oog waarschijnlijk niet opmerkt — subtiele kleurvariaties, fijne details in drukke gebieden — om veel grotere besparingen te halen, vaak 70–90%. JPEG en WebP gebruiken lossy compressie. De afweging wordt geregeld door een kwaliteitsinstelling: lagere kwaliteit betekent een kleiner bestand maar zichtbaardere artefacten. Voor foto's is lossy compressie op een verstandig kwaliteitsniveau bijna altijd de juiste keuze.

Het juiste formaat kiezen

Het formaat dat je kiest telt net zo zwaar als het compressieniveau:

• JPEG — het werkpaard voor foto's. Overal breed ondersteund. Goede compressie, maar geen transparantie.
• PNG — het beste voor graphics met scherpe lijnen, tekst of transparantie (logo's, iconen, schermafbeeldingen). Lossless, dus foto's worden groot.
• WebP — een modern formaat dat bij gelijke visuele kwaliteit doorgaans 25–35% kleinere bestanden dan JPEG oplevert en, net als PNG, transparantie ondersteunt. Ondersteund door alle huidige browsers. Voor de meeste webafbeeldingen vandaag is WebP de beste standaard.
• SVG — helemaal geen gecomprimeerd fotoformaat, maar voor eenvoudige logo's en iconen blijft een vector-SVG vlijmscherp op elk formaat en is het vaak maar een paar kilobyte.

Hoeveel kwaliteit kun je opgeven?

Voor lossy-formaten wordt kwaliteit meestal uitgedrukt op een schaal van 0–100. Tegen de intuïtie in is de bovenkant van dat bereik verspilling: het verschil tussen kwaliteit 100 en kwaliteit 80 is vaak niet te zien, en toch kan kwaliteit 80 de helft van de bestandsgrootte zijn. Een praktisch startpunt:

• Kwaliteit 75–85 — de sweet spot voor de meeste webfoto's. Grote besparing, geen zichtbaar verlies bij normaal bekijken.
• Kwaliteit 60–75 — prima voor grote achtergrondafbeeldingen of thumbnails waar absolute scherpte niet cruciaal is.
• Onder 60 — de besparing vlakt af terwijl artefacten (blokkerige luchten, halo's rond randen) opvallend worden. Meestal niet de moeite waard.

De beste aanpak is vergelijken, niet gokken. Comprimeer op een gegeven kwaliteit, bekijk het resultaat op de grootte waarop het echt getoond wordt, en stap de kwaliteit omlaag tot je net een verschil begint te zien — stap dan één stap terug omhoog.

Verklein voordat je comprimeert

Compressie kan maar zoveel als de afbeelding veel groter is dan nodig. Een 4000 pixel brede foto die in een 800 pixel brede kolom wordt getoond, draagt vijf keer meer pixels dan iemand ooit ziet. De afbeelding ongeveer verkleinen tot de afmetingen waarop ze getoond wordt — en dan comprimeren — is vaak de grootste enkele besparing van allemaal. Onze afbeeldingsverkleiner doet bijsnijden, draaien en verkleinen in één keer, volledig in je browser.

Een eenvoudige werkwijze

1. Verklein de afbeelding tot de grootste maat waarop ze getoond wordt.
2. Kies WebP als het kan, JPEG voor maximale compatibiliteit, PNG voor graphics met transparantie.
3. Comprimeer op kwaliteit ~80 en bekijk het resultaat op weergavegrootte.
4. Verlaag de kwaliteit tot je een verschil merkt, en stap dan één terug.

De laatste drie stappen doe je in seconden met onze afbeeldingscompressor: sleep één of veel afbeeldingen erin en ze worden direct op je eigen apparaat gecomprimeerd — er wordt niets naar een server geüpload, dus het is veilig voor privéfoto's. Vergelijk de voor- en na-groottes en download wanneer je tevreden bent met het resultaat.