Billedkomprimering uden at ødelægge gradienter

Billedkomprimering gør en fil mindre på én af to måder. Komprimering uden tab gemmer nøjagtig de samme pixels mere effektivt, ligesom når man zipper et dokument. Komprimering med tab smider detaljer væk, som den forudser, at du ikke vil lægge mærke til. Fotografier skjuler tabet godt, fordi de er fulde af tekstur. Bløde gradienter skjuler intet: Komprimerer du en blød overgang for hårdt, går den i stykker i striber, pletter og blokke. Løsningen er en blanding af det rigtige format, den rigtige kvalitetsindstilling og lidt korn.

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

Et almindeligt billede gemmer 256 niveauer for hver af rød, grøn og blå. Det lyder som rigeligt, indtil du ser på en subtil mørk overgang. Fra #14101f til #2a2147 hen over en hero på 1920 pixels bredde stiger den røde kanal kun 22 niveauer. Hvert niveau skal strække sig over cirka 87 pixels, så du er allerede ét skridt fra synlige bånd, før nogen komprimering overhovedet er sket.

Komprimering med tab forenkler så billedet i små blokke og slår farver sammen, der næsten er ens. I et foto er nabopixels sjældent ens, så der ændrer sig kun lidt. I en gradient er næsten alle naboer næsten ens, så hele strækninger af farve falder sammen til én. Det er gradientbånd, og mørke og pastelagtige overgange viser det mest.

Kvalitetsindstillingerne, der betyder noget

Hvert format har ét hovedhjul og et par skjulte. Disse udgangspunkter er forsigtige til grafik med gradienter og tekst; fotos kan som regel gå lavere. Bedøm altid ved 100 % zoom på en god skærm, aldrig på et miniaturebillede.

Chroma subsampling

De fleste JPG-kodere gemmer farve i halv opløsning i forhold til lysstyrke, skrevet 4:2:0. Dit øje lægger knap mærke til det i fotos, men farvede bogstaver og mættede gradienter får bløde, udtværede kanter. Mange værktøjer gemmer det under en avanceret indstilling; slår du det fra (4:4:4), koster det lidt i størrelse og holder farvekanterne skarpe.

PNG-kvantisering

PNG-optimerere gør ofte filer mindre ved at reducere dem til en palet på 256 farver eller færre. Det er fremragende til flade logoer og forfærdeligt til gradienter, som har brug for tusindvis af nuancer. Hvis en komprimeret PNG pludselig får bånd, er kvantisering næsten altid årsagen.

Korn: den bedste løsning på bånd

At lægge et fint lag støj på lyder bagvendt, men det er den mest pålidelige kur. Korn spreder pixels lidt lysere og mørkere, så øjet blander trinene til en jævn rampe, og komprimeringen har tekstur at beholde frem for flade strækninger at slå sammen. Det får også en digital gradient til at føles som en overflade. Kornede gradienter viser, hvor meget du skal bruge.

På nettet kan du lægge korn på i CSS eller SVG i stedet for at bage det ind i et stort billede, hvilket holder downloaden bittelille. Se CSS-støjtekstur. Gradiently-Marks har korn som en del af deres materiale, så et design lavet med en har allerede den tekstur, der hjælper det med at overleve en platforms omkomprimering.

En metode til at komprimere ethvert billede

1. 1

   Skalér til visningsstørrelsen

   Den største besparelse er pixels, du aldrig havde brug for. Et Instagram-opslag på 1080×1350 skal eksporteres i 1080×1350, ikke 4000 pixels bredt.

2. 2

   Vælg formatet efter indholdet

   Tekst, logoer og gradienter: PNG eller lossless WebP. Fotos: JPG, WebP eller AVIF. PNG eller JPG og WebP kontra PNG og JPG går dybere.

3. 3

   Sæt en høj kvalitet, og sænk den så

   Start ved 90, gå ned i trin på fem, og sammenlign ved 100 %. Stop ved trinnet før det, hvor du kan se en ændring i den mørkeste gradient.

4. 4

   Komprimer én gang, fra masteren

   Behold en ukomprimeret master. Hver ny eksport kommer fra den, aldrig fra en tidligere JPG.

5. 5

   Tjek den endelige fil, hvor den bor

   Upload et testopslag, eller indlæs siden på en telefon. Platforme og CDN'er kan komprimere igen.

Komprimeringsværktøjer, du kan stole på

Googles webapp Squoosh lader dig sammenligne formater og indstillinger side om side med en skyder, hvilket er den hurtigste måde at lære, hvad hvert hjul gør. Til mapper med billeder klarer kommandolinjekodere det samme job 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

Hvis din gradient er en baggrund på en hjemmeside, er det letteste billede intet billede: En CSS-gradient koster ingen download overhovedet og får aldrig bånd af komprimering, selvom den stadig kan vise 8-bit-trin på brede mørke overgange. CSS-baggrunde viser, hvordan du lægger gradienter i lag med en lille korntekstur, og optimering af billeder til nettet gennemgår, hvad Lighthouse leder efter.