Komprimere bilder uten å ødelegge gradienter

Bildekomprimering gjør en fil mindre på én av to måter. Tapsfri komprimering lagrer nøyaktig de samme pikslene mer effektivt, som når du zipper et dokument. Tapsbasert komprimering kaster detaljer den regner med at du ikke legger merke til. Fotografier skjuler det tapet godt fordi de er fulle av tekstur. Myke gradienter skjuler ingenting: komprimerer du en myk overgang for hardt, brytes den opp i striper, flekker og blokker. Løsningen er en blanding av riktig format, riktig kvalitetsinnstilling og litt korn.

Hvorfor gradienter går i stykker når du komprimerer dem

Et vanlig bilde lagrer 256 nivåer for hver av rød, grønn og blå. Det høres ut som mye helt til du ser på en subtil mørk overgang. Fra #14101f til #2a2147 over en 1920 piksler bred toppseksjon stiger den røde kanalen bare 22 nivåer. Hvert nivå må strekkes over rundt 87 piksler, så du er allerede ett steg unna synlige striper før noen komprimering.

Tapsbasert komprimering forenkler deretter bildet i små blokker og slår sammen farger som er nesten like. I et foto er nabopiksler sjelden like, så lite endres. I en gradient er nesten hver nabo nesten lik, så hele fargestrekk faller sammen til én. Det er striper i gradienter, og mørke og pastellfargede overganger viser det mest.

Kvalitetsinnstillingene som betyr noe

Hvert format har én hovedbryter og noen skjulte. Disse startpunktene er forsiktige for grafikk med gradienter og tekst; fotografier kan som regel gå lavere. Vurder alltid i 100 % zoom på en god skjerm, aldri på et miniatyrbilde.

Chroma subsampling

De fleste JPG-kodere lagrer farge i halv oppløsning av lysstyrken, skrevet 4:2:0. Øyet merker det knapt i fotografier, men farget skrift og mettede gradienter får myke, utsmurte kanter. Mange verktøy gjemmer innstillingen under avanserte valg; slår du den av (4:4:4), koster det litt størrelse og holder fargekantene skarpe.

PNG-kvantisering

PNG-optimaliserere krymper ofte filer ved å redusere dem til en palett på 256 farger eller færre. Det er utmerket for flate logoer og forferdelig for gradienter, som trenger tusenvis av nyanser. Får en komprimert PNG plutselig striper, er kvantisering nesten alltid grunnen.

Korn: den beste kuren mot striper

Å legge til et fint lag med støy høres baklengs ut, men det er den sikreste kuren. Korn sprer piksler litt lysere og mørkere, så øyet blander trinnene til en jevn overgang, og komprimeringen får tekstur å ta vare på i stedet for flate strekk å slå sammen. Det får også en digital gradient til å føles som en overflate. Kornete gradienter viser hvor mye du bør bruke.

På nett kan du legge til korn i CSS eller SVG i stedet for å bake det inn i et stort bilde, så nedlastingen forblir bitteliten. Se støytekstur i CSS. Gradiently-Marks har korn som en del av materialet, så et design laget med en Mark har allerede teksturen som hjelper det å overleve plattformens nye komprimering.

En metode for å komprimere ethvert bilde

1. 1

   Skaler ned til visningsstørrelsen

   Den største besparelsen er piksler du aldri trengte. Et Instagram-innlegg i 1080×1350 skal eksporteres i 1080×1350, ikke 4000 piksler bredt.

2. 2

   Velg format etter innhold

   Tekst, logoer og gradienter: PNG eller tapsfri WebP. Foto: JPG, WebP eller AVIF. PNG eller JPG og WebP mot PNG og JPG går dypere.

3. 3

   Sett høy kvalitet, og senk den så

   Start på 90, gå ned fem om gangen og sammenlign i 100 %. Stopp på trinnet før du ser en endring i den mørkeste gradienten.

4. 4

   Komprimer én gang, fra originalen

   Behold en ukomprimert original. Hver nye eksport kommer fra den, aldri fra en tidligere JPG.

5. 5

   Sjekk den ferdige filen der den skal bo

   Last opp et testinnlegg eller åpne siden på en telefon. Plattformer og CDN-er kan komprimere på nytt.

Komprimeringsverktøy du kan stole på

Med Googles nettapp Squoosh kan du sammenligne formater og innstillinger side om side med en glidebryter, og det er den raskeste måten å lære hva hver bryter gjør. For mapper med bilder gjør kodere på kommandolinjen samme jobb i 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

Er gradienten din en nettstedsbakgrunn, er det letteste bildet ikke noe bilde: en CSS-gradient koster ingen nedlasting og får aldri striper av komprimering, selv om den fortsatt kan vise 8-bits trinn i brede mørke overganger. CSS-bakgrunner viser hvordan du legger gradienter i lag med en bitteliten korntekstur, og optimalisere bilder for nett dekker hva Lighthouse ser etter.