Afbeeldingen comprimeren zonder gradiënten te verpesten

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.

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, en donkere en pastelverlopen tonen het het sterkst.

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.

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 laat zien hoeveel je gebruikt.

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. 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. 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. 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 en WebP versus PNG en JPG gaan dieper.

3. 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. 4

   Comprimeer één keer, vanaf het origineel

   Bewaar een ongecomprimeerd origineel. Elke nieuwe export komt daaruit, nooit uit een eerdere JPG.

5. 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.

# 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

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 laat zien hoe je gradiënten met een piepkleine korreltextuur stapelt en afbeeldingen optimaliseren voor het web behandelt waar Lighthouse op let.