Welke kwaliteitsinstelling moet je gebruiken voor web-afbeeldingen?
De meest impactvolle beeldinstelling is er een die de meeste mensen op de standaardwaarde laten staan. Dit is wat de kwaliteitsschuif echt doet en wat je moet instellen.
Elke image-compressietool heeft een kwaliteits-slider, meestal van 0 tot 100. De meeste mensen zetten hem op een rond getal — 80, 85, misschien 90 — en gaan verder. Maar deze slider is letterlijk de meest impactvolle beslissing die je kunt nemen over bestandsgrootte van afbeeldingen, en de default is bijna altijd verkeerd voor webgebruik.
Wat de kwaliteits-slider eigenlijk regelt
In lossy formaten zoals JPG, WebP en AVIF regelt de kwaliteitsinstelling hoe agressief de encoder informatie weggooit. Specifiek regelt het de quantisatiesterkte — hoe grof de frequentiecomponenten van elk beeldblok worden afgerond.
Op kwaliteit 100 wordt er niets gequantiseerd. Op kwaliteit 1 wordt bijna alles weggegooid: je krijgt blokkerige, wazige, verkleurde output.
Tussen die uitersten ruilt elk punt op de slider bestandsgrootte tegen zichtbare kwaliteit. En die trade-off is niet lineair:
- Van kwaliteit 100 → 90 bespaart ~50% bestandsgrootte met bijna geen zichtbare verandering
- Van kwaliteit 90 → 80 bespaart nog eens ~20% met minimale degradatie
- Van kwaliteit 80 → 70 bespaart nog eens ~15% met meer merkbare veranderingen
- Onder kwaliteit 60 worden artefacten moeilijk te negeren
- Onder kwaliteit 40 is de afbeelding duidelijk beschadigd
De implicatie: kwaliteit 75 geeft je 70% van de bestandsgrootte-besparing van kwaliteit 50 met een fractie van de zichtbare schade. Kwaliteit 90 verspilt bytes zonder zichtbaar voordeel.
Hoe verschillende kwaliteitsniveaus er echt uitzien
Ruwe vuistregel voor een JPG-foto van 1500×1000 px:
| Kwaliteit | Bestandsgrootte | Visuele verschijning |
|---|---|---|
| 100 | ~800 KB | Identiek aan bron (effectief lossless) |
| 95 | 500 KB | Niet te onderscheiden van bron op elke zoom |
| 85 | 260 KB | Niet te onderscheiden op normale kijkafstand |
| 75 | 170 KB | Minimale verzachting in fijn detail; onzichtbaar in de meeste foto’s |
| 65 | 120 KB | Lichte verzachting zichtbaar bij close inspectie |
| 55 | 90 KB | Zichtbare verzachting; acceptabel voor thumbnails |
| 40 | 60 KB | Duidelijke artefacten; alleen voor zwaar wazige achtergronden |
| 20 | 35 KB | Duidelijke blokken en verkleuring |
Jouw precieze cijfers variëren — een foto met veel fijn detail (gebladerte, stof, texturen) laat artefacten sneller zien dan een egaal beeld (portretten tegen vlakke achtergronden).
Kwaliteit afstemmen op use case
Hero-foto’s en productshots
Dit zijn de afbeeldingen waar je gebruikers echt naar kijken. Ze vullen het scherm, trekken aandacht en dragen het esthetische gewicht van je merk.
Aanbevolen: kwaliteit 80-85. In dit bereik zien zelfs detail-obsessieve kijkers op retina-schermen geen artefacten, en bespaar je 40-60% ten opzichte van kwaliteit 95.
Galerij-thumbnails
Kleine afbeeldingen die worden getoond op 200-400 px breed. Gebruikers kijken er kort naar. Fijn detail is op die weergavegrootte toch grotendeels onzichtbaar.
Aanbevolen: kwaliteit 65-75. Verspil geen bytes om thumbnails scherper te maken dan de weergavegrootte kan oplossen.
Hero-achtergrondfoto’s met een overlay
Afbeeldingen die achter tekst of gradients zitten. Het meeste van de afbeelding is verborgen of visueel op de achtergrond.
Aanbevolen: kwaliteit 55-70. De overlay verbergt kleine artefacten. Bestandsgrootte telt hier zwaarder dan kwaliteit, want het zijn vaak enorme afbeeldingen.
Logo’s en grafische elementen
Die moeten helemaal geen JPG zijn — die moeten PNG of SVG zijn. Als ze om wat voor reden dan ook JPG moeten zijn, is kwaliteit 90+ nodig om zichtbare ringing rond scherpe randen te vermijden. Beter: converteer ze naar PNG.
Screenshots en UI-afbeeldingen
Als ze tekst of scherpe randen bevatten, verprutst JPG die op elke kwaliteit. Sla op als PNG (lossless) of gebruik WebP lossless als je publiek dat ondersteunt.
Afbeeldingen die opnieuw worden bewerkt en opgeslagen
Elke re-save stapelt JPG-kwaliteitsverlies op. Als een afbeelding meerdere keren door je team wordt bewerkt, sla de master op als PNG (lossless) en exporteer pas helemaal op het eind naar JPG.
Perceptuele vs numerieke kwaliteit
Een subtiel punt: het kwaliteitsnummer op de slider koppelt niet aan een perceptuele schaal. JPG kwaliteit 80 en WebP kwaliteit 80 en AVIF kwaliteit 80 zien er heel verschillend uit, omdat elke encoder het nummer anders interpreteert.
Ruwe vertaling:
- JPG kwaliteit 80 ≈ WebP kwaliteit 75 ≈ AVIF kwaliteit 65
Wanneer je van formaat wisselt, test de slider opnieuw — hou niet simpelweg hetzelfde nummer aan.
De “vergelijk twee versies”-test
De betrouwbare manier om een kwaliteitsinstelling te kiezen is een directe A/B-vergelijking op je echte content.
- Pak een representatieve afbeelding (of meerdere)
- Exporteer kopieën op kwaliteit 90, 80, 70, 60, 50
- Open ze full-screen naast het origineel
- Vind de laagste kwaliteit waarop je ze betrouwbaar niet uit elkaar kunt houden
- Verhoog met 5 voor de zekerheid
- Dat is je instelling
Voor de meeste foto’s op de meeste schermen eindigt dit proces op kwaliteit 70-80.
Subjectieve vs objectieve kwaliteit
Als je een grote catalogus verwerkt en geautomatiseerde kwaliteitscontrole wilt, zijn objectieve metrics nuttig:
- PSNR >= 40 dB — visueel niet te onderscheiden voor de meeste content
- SSIM >= 0,95 — uitstekende kwaliteit
- VMAF >= 90 — bijna-transparante kwaliteit (Netflix-niveau)
Die kunnen je helpen automatisch een per-afbeelding kwaliteit in te stellen: encoder op progressief lagere instellingen totdat je een drempel raakt, dan stoppen. Tools die dit doen worden soms “content-aware” of “per-image” encoders genoemd.
Voor een typische website heb je dit niveau van verfijning niet nodig. Een blanket kwaliteit 75 dient je uitstekend.
Hoe je kwaliteit afstemt in onze tool
Onze Image Compressor heeft een kwaliteits-slider van 0 tot 100 en toont live de resulterende bestandsgrootte terwijl je sleept. Workflow:
- Drop je afbeelding erin
- Begin met de slider op 75
- Kijk naar de preview — is de kwaliteit acceptabel?
- Schuif naar beneden totdat je artefacten ziet, dan 5 punten terug omhoog
- Download
Geen server-heen-en-weer betekent dat je snel kunt itereren. Probeer kwaliteit 70 — voor de meeste foto’s kun je letterlijk geen verschil zien, maar je gebruikers krijgen een bestand dat 40% kleiner is.
De TL;DR-tabel
| Type afbeelding | Aanbevolen kwaliteit |
|---|---|
| Hero-foto (prominent, kijker kijkt er naar) | 80-85 |
| Normale content-foto | 75 |
| Galerij-thumbnail | 65-75 |
| Achtergrondafbeelding met overlay | 55-70 |
| Wazige / decoratieve achtergrond | 40-55 |
| Afbeelding die opnieuw wordt bewerkt | Houd als PNG tot finale export |
| Logo, icoon, diagram, screenshot | Gebruik geen JPG — gebruik PNG |
Als je één nummer onthoudt, is het 75. Het is de juiste default voor de meeste webfoto’s en bespaart ongeveer de helft van de bestandsgrootte ten opzichte van de typische 85-90 default.