# Afbeeldingen comprimeren zonder gradiënten te verpesten

[Canonical HTML page](https://gradiently.design/nl/guide/image-compression)

Foto’s overleven zware compressie. Gradiënten niet. Hier lees je waarom een vloeiend verloop in strepen verandert en met welke instellingen het vloeiend blijft terwijl het bestand klein blijft.

## The short version

- Beeldcompressie maakt bestanden kleiner, verliesvrij door dezelfde pixels efficiënter op te slaan of met verlies door detail weg te gooien.
- Vloeiende gradiënten lijden het meest onder compressie met verlies, omdat naburige kleuren samensmelten tot zichtbare banden en blokken.
- Donkere, subtiele gradiënten vertonen het eerst banding, omdat een 8-bits afbeelding maar weinig verschillende waarden heeft tussen twee dicht bij elkaar liggende donkere kleuren.
- Een lichte laag korrel of dithering verbergt banding beter dan welke kwaliteitsinstelling ook, omdat ze de stappen doorbreekt.
- Exporteer voor afbeeldingen met gradiënten PNG of verliesvrije WebP, of JPG op kwaliteit 90 of hoger met chroma subsampling uitgeschakeld.

**Beeldcompressie** maakt een bestand op een van twee manieren kleiner. Verliesvrije compressie slaat exact dezelfde pixels efficiënter op, zoals een document zippen. Compressie met verlies gooit detail weg waarvan ze voorspelt dat je het niet merkt. Foto’s verbergen dat verlies goed omdat ze vol textuur zitten. Vloeiende gradiënten verbergen niets: comprimeer een zacht verloop te hard en het breekt in strepen, vlekken en blokken. De oplossing is een mix van het juiste formaat, de juiste kwaliteitsinstelling en een beetje korrel.

## Waarom gradiënten breken als je ze comprimeert

Een standaardafbeelding slaat 256 niveaus op voor elk van rood, groen en blauw. Dat klinkt als ruim voldoende tot je naar een subtiel donker verloop kijkt. Van `#14101f` naar `#2a2147` over een hero van 1920 pixel breed klimt het rode kanaal maar 22 niveaus. Elk niveau moet zich over ongeveer 87 pixels uitstrekken, dus je zit al een stap van zichtbare banden voordat er compressie aan te pas komt.

Een verloop met heel weinig stappen: `linear-gradient(90deg, #14101f 0%, #2a2147 100%)`

Dicht bij elkaar liggende donkere kleuren over een groot oppervlak: het klassieke bandingrisico. Op een goed scherm zie je hier misschien al zwakke verticale stappen.

Compressie met verlies vereenvoudigt de afbeelding vervolgens in kleine blokken en voegt kleuren samen die bijna gelijk zijn. In een foto zijn naburige pixels zelden gelijk, dus er verandert weinig. In een gradiënt is bijna elke buur bijna gelijk, dus hele rijen kleur storten in tot één. Dat is [gradiëntbanding](https://gradiently.design/nl/guide/gradient-banding), en donkere en pastelverlopen tonen het het sterkst.

### Krijgt snel banden

- Donkere verlopen tussen dicht bij elkaar liggende kleuren
- Bleke pasteltinten over een groot oppervlak
- Perfect schone digitale oppervlakken
- Brede formaten zoals een hero van 1920×1080

### Overleeft goed

- Heldere verlopen met ver uit elkaar liggende kleurstops
- Gradiënten met korrel of textuur
- Drukke foto’s en illustraties
- Kleine afbeeldingen met korte kleurreeksen

## De kwaliteitsinstellingen die ertoe doen

Elk formaat heeft één hoofdknop en een paar verborgen. Deze beginpunten zijn behoudend voor afbeeldingen met gradiënten en tekst; foto’s kunnen meestal lager. Beoordeel altijd op 100% zoom op een goed scherm, nooit op een thumbnail.

| Formaat | Instelling voor gradiëntafbeeldingen | Instelling voor foto’s | Opmerkingen |
| --- | --- | --- | --- |
| PNG | Verliesvrij, volledige kleur | Zelden de beste keuze | Vermijd terugbrengen naar 256 kleuren bij gradiënten |
| JPG | Kwaliteit 90 tot 95, subsampling uit (4:4:4) | Kwaliteit 80 tot 85 | Bewerk en sla een JPG nooit herhaaldelijk op |
| WebP | Verliesvrij, of met verlies 85 tot 90 | Met verlies 75 tot 80 | Beste standaard voor je eigen website |
| AVIF | Met verlies op hoge kwaliteit, test zorgvuldig | Gemiddelde kwaliteit | Kleinste bestanden, trager te coderen |

Kwaliteitsgetallen zijn niet vergelijkbaar tussen formaten of zelfs tussen tools, dus zie deze als plekken om met testen te beginnen.

### Chroma subsampling

De meeste JPG-encoders slaan kleur op met de helft van de resolutie van helderheid, geschreven als 4:2:0. In foto’s merkt je oog het amper, maar gekleurde letters en verzadigde gradiënten krijgen zachte, uitgesmeerde randen. Veel tools verbergen het achter een geavanceerde optie; uitzetten (4:4:4) kost wat grootte en houdt kleurranden scherp.

### PNG-kwantisatie

PNG-optimizers verkleinen bestanden vaak door ze terug te brengen tot een palet van 256 kleuren of minder. Dat is uitstekend voor vlakke logo’s en verschrikkelijk voor gradiënten, die duizenden tinten nodig hebben. Krijgt een gecomprimeerde PNG ineens banden, dan is kwantisatie bijna altijd de reden.

## Korrel: de beste oplossing voor banding

Een fijne laag ruis toevoegen klinkt verkeerd om, maar het is de betrouwbaarste remedie. Korrel strooit pixels iets lichter en donkerder, zodat het oog de stappen tot een vloeiende helling mengt, en de compressor heeft textuur om te behouden in plaats van vlakke reeksen om samen te voegen. Het laat een digitale gradiënt ook als een oppervlak voelen. [Korrelige gradiënten](https://gradiently.design/nl/guide/grainy-gradients) laat zien hoeveel je gebruikt.

Een brede donkere website-hero met een vloeiende gradiënt en een korte kop, ter illustratie van het bandingrisico

Een schoon donker verloop op 1920×1080 is de afbeelding die na compressie het meest waarschijnlijk banden krijgt.

Een brede website-hero met een getextureerde, korrelige gradiënt achter dezelfde kop

Met een fijne korrel in het oppervlak overleeft hetzelfde soort verloop compressie en leest het als een materiaal.

Op het web kun je korrel toevoegen met CSS of SVG in plaats van hem in een grote afbeelding te bakken, wat de download minuscuul houdt. Zie [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture). De Marks van Gradiently dragen korrel als deel van hun materiaal, dus een ontwerp ermee heeft al de textuur die helpt een hercompressie door een platform te overleven.

## Een methode om elke afbeelding te comprimeren

1. **Schaal naar het weergaveformaat** De grootste winst zit in pixels die je nooit nodig had. Een Instagrampost van 1080×1350 exporteer je op 1080×1350, niet op 4000 pixels breed.
2. **Kies het formaat op inhoud** Tekst, logo’s en gradiënten: PNG of verliesvrije WebP. Foto’s: JPG, WebP of AVIF. [PNG versus JPG](https://gradiently.design/nl/guide/png-vs-jpeg) en [WebP versus PNG en JPG](https://gradiently.design/nl/guide/webp-images) gaan dieper.
3. **Stel een hoge kwaliteit in en verlaag hem dan** Begin op 90, ga in stappen van vijf omlaag en vergelijk op 100%. Stop bij de stap voor je een verandering ziet in de donkerste gradiënt.
4. **Comprimeer één keer, vanaf het origineel** Bewaar een ongecomprimeerd origineel. Elke nieuwe export komt daaruit, nooit uit een eerdere JPG.
5. **Controleer het eindbestand waar het leeft** Upload een testpost of laad de pagina op een telefoon. Platforms en CDN’s kunnen opnieuw comprimeren.

## Compressietools die je kunt vertrouwen

Met Squoosh, de webapp van Google, vergelijk je formaten en instellingen naast elkaar met een schuifbalk, de snelste manier om te leren wat elke knop doet. Voor mappen vol afbeeldingen doen opdrachtregelencoders hetzelfde werk in bulk.

```bash
# JPG at quality 92 with full colour resolution (ImageMagick)
magick hero.png -quality 92 -sampling-factor 4:4:4 hero.jpg

# Lossless WebP for a gradient graphic
cwebp -lossless hero.png -o hero.webp

# Lossy WebP for a photo
cwebp -q 78 photo.png -o photo.webp
```

Voer deze uit op een ongecomprimeerd origineel, nooit op een bestand dat al door compressie met verlies is gegaan.

Is je gradiënt een websiteachtergrond, dan is de lichtste afbeelding geen afbeelding: een CSS-gradiënt kost helemaal geen download en krijgt nooit banden door compressie, al kan hij op brede donkere verlopen nog steeds 8-bits stappen tonen. [CSS-achtergronden](https://gradiently.design/nl/guide/css-background-image) laat zien hoe je gradiënten met een piepkleine korreltextuur stapelt en [afbeeldingen optimaliseren voor het web](https://gradiently.design/nl/guide/lighthouse-image-performance) behandelt waar Lighthouse op let.

## FAQ

### Hoe comprimeer ik afbeeldingen zonder kwaliteitsverlies?

Schaal naar het formaat waarop de afbeelding wordt getoond, gebruik verliesvrije PNG of WebP voor afbeeldingen en JPG, WebP of AVIF met verlies op hoge kwaliteit voor foto’s. Vergelijk op 100% zoom voordat je de instelling verlaagt.

### Waarom veroorzaakt compressie banding in gradiënten?

Compressie met verlies voegt bijna identieke kleuren samen en een vloeiende gradiënt bestaat bijna volledig uit bijna identieke buren, dus reeksen kleur storten in tot zichtbare strepen.

### Wat is de beste JPEG-kwaliteitsinstelling?

Rond 80 tot 85 voor foto’s en 90 tot 95 voor afbeeldingen met tekst of gradiënten. Kwaliteitsgetallen verschillen per tool, dus check het resultaat op 100% zoom.

### Vermindert korrel toevoegen banding echt?

Ja. Fijne korrel doorbreekt de stappen tussen kleuren, zodat het oog een vloeiende helling leest, en geeft de compressor textuur om te behouden in plaats van vlakken om samen te voegen.

### Moet ik PNG-bestanden comprimeren?

Verliesvrije PNG-optimalisatie is altijd veilig. Vermijd het terugbrengen van een gradiënt-PNG naar een palet van 256 kleuren, wat banding veroorzaakt.