Bildkomprimering utan att förstöra gradienter

Bildkomprimering gör en fil mindre på ett av två sätt. Förlustfri komprimering lagrar exakt samma pixlar effektivare, som att zippa ett dokument. Förlustbehäftad komprimering kastar detaljer som den räknar med att du inte märker. Fotografier döljer förlusten bra eftersom de är fulla av struktur. Mjuka gradienter döljer ingenting: komprimerar du en len gradient för hårt går den sönder i ränder, fläckar och block. Lösningen är en blandning av rätt format, rätt kvalitetsinställning och lite brus.

Varför gradienter går sönder när du komprimerar dem

En vanlig bild lagrar 256 nivåer för vart och ett av rött, grönt och blått. Det låter som gott om, tills du tittar på en subtil mörk gradient. Från #14101f till #2a2147 över en 1920 pixlar bred hero klättrar röda kanalen bara 22 nivåer. Varje nivå måste sträcka sig över ungefär 87 pixlar, så du är redan ett steg från synliga band innan någon komprimering har skett.

Förlustbehäftad komprimering förenklar sedan bilden i små block och slår ihop färger som nästan är desamma. I ett foto är angränsande pixlar sällan likadana, så lite förändras. I en gradient är nästan varje granne nästan likadan, så hela färgsträckor faller ihop till en. Det är bandning i gradienter, och mörka och pastellfärgade gradienter visar det mest.

Kvalitetsinställningarna som spelar roll

Varje format har ett huvudreglage och några dolda. De här utgångspunkterna är försiktiga för grafik med gradienter och text; foton kan oftast gå lägre. Bedöm alltid i 100 % zoom på en bra skärm, aldrig på en miniatyr.

Kroma subsampling

De flesta JPG-kodare lagrar färg i halva upplösningen av ljusstyrkan, skrivet 4:2:0. Ögat märker knappt det i foton, men färgad text och mättade gradienter får mjuka, utsmetade kanter. Många verktyg gömmer det under ett avancerat alternativ; att stänga av det (4:4:4) kostar lite i storlek och håller färgkanterna skarpa.

PNG-kvantisering

PNG-optimerare krymper ofta filer genom att reducera dem till en palett på 256 färger eller färre. Det är utmärkt för platta loggor och förödande för gradienter, som behöver tusentals nyanser. Om en komprimerad PNG plötsligt får band är kvantisering nästan alltid orsaken.

Brus: bästa botemedlet mot bandning

Att lägga på ett fint lager brus låter bakvänt, men det är det mest pålitliga botemedlet. Bruset gör pixlar något ljusare och mörkare, så ögat blandar ihop stegen till en len ramp, och komprimeraren har struktur att behålla i stället för platta sträckor att slå ihop. Det får också en digital gradient att kännas som en yta. Korniga gradienter visar hur mycket du bör använda.

På webben kan du lägga på brus i CSS eller SVG i stället för att baka in det i en stor bild, vilket håller nedladdningen minimal. Se CSS-brusstruktur. Gradiently-Marks har brus som en del av sitt material, så en design gjord med en har redan den struktur som hjälper den klara en plattforms omkomprimering.

En metod för att komprimera vilken bild som helst

1. 1

   Ändra storlek till visningsstorleken

   Den största vinsten är pixlar du aldrig behövde. Ett Instagram-inlägg på 1080×1350 ska exporteras i 1080×1350, inte 4000 pixlar brett.

2. 2

   Välj format efter innehåll

   Text, loggor och gradienter: PNG eller förlustfri WebP. Foton: JPG, WebP eller AVIF. PNG eller JPG och WebP jämfört med PNG och JPG går djupare.

3. 3

   Börja med hög kvalitet och sänk sedan

   Börja på 90, gå ned fem steg i taget och jämför i 100 %. Stanna vid steget innan du ser en skillnad i den mörkaste gradienten.

4. 4

   Komprimera en gång, från mastern

   Behåll en okomprimerad master. Varje ny export kommer från den, aldrig från en tidigare JPG.

5. 5

   Kontrollera slutfilen där den används

   Ladda upp ett testinlägg eller öppna sidan på en mobil. Plattformar och CDN kan komprimera om igen.

Komprimeringsverktyg du kan lita på

Googles webbapp Squoosh låter dig jämföra format och inställningar sida vid sida med ett reglage, vilket är det snabbaste sättet att lära sig vad varje reglage gör. För mappar med bilder gör kommandoradskodare samma 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

Om din gradient är en webbplatsbakgrund är den lättaste bilden ingen bild alls: en CSS-gradient kostar ingen nedladdning och får aldrig band av komprimering, även om den fortfarande kan visa 8-bitssteg i breda mörka gradienter. CSS-bakgrunder visar hur du lägger gradienter i lager med en liten brusstruktur, och optimera bilder för webben går igenom vad Lighthouse letar efter.