# Bildkomprimering utan att förstöra gradienter [Canonical HTML page](https://gradiently.design/sv/guide/image-compression) Foton klarar hård komprimering. Gradienter gör det inte. Här är varför en mjuk gradient blir ränder, och de exakta inställningarna som håller den len medan filen förblir liten. ## The short version - Bildkomprimering gör filer mindre antingen förlustfritt, genom att lagra samma pixlar effektivare, eller förlustbehäftat, genom att kasta detaljer. - Mjuka gradienter drabbas hårdast av förlustbehäftad komprimering eftersom närliggande färger slås ihop till synliga band och block. - Mörka, subtila gradienter får band först, eftersom en 8-bitarsbild har mycket få olika värden mellan två närliggande mörka färger. - Ett lätt lager brus eller dithering döljer band bättre än någon kvalitetsinställning, eftersom det bryter upp stegen. - För grafik med gradienter exporterar du PNG eller förlustfri WebP, eller JPG med kvalitet 90 eller högre och kroma subsampling avstängd. **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. En gradient med mycket få steg: `linear-gradient(90deg, #14101f 0%, #2a2147 100%)` Närliggande mörka färger över en bred yta: den klassiska bandningsrisken. På en bra skärm kan du redan här se svaga lodräta steg. 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](https://gradiently.design/sv/guide/gradient-banding), och mörka och pastellfärgade gradienter visar det mest. ### Får lätt band - Mörka gradienter mellan närliggande färger - Bleka pasteller över en stor yta - Helt rena digitala ytor - Breda format som en hero i 1920×1080 ### Klarar sig bra - Ljusa gradienter med långt åtskilda färgstopp - Gradienter med brus eller struktur - Livliga foton och illustrationer - Små bilder med korta färgsträckor ## 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. | Format | Inställning för gradientgrafik | Inställning för foton | Anmärkningar | | --- | --- | --- | --- | | PNG | Förlustfri, full färg | Sällan bästa valet | Undvik att minska till 256 färger på gradienter | | JPG | Kvalitet 90 till 95, subsampling av (4:4:4) | Kvalitet 80 till 85 | Redigera och spara aldrig en JPG om och om igen | | WebP | Förlustfri, eller förlustbehäftad 85 till 90 | Förlustbehäftad 75 till 80 | Bästa standardvalet för din egen webbplats | | AVIF | Förlustbehäftad med hög kvalitet, testa noga | Medelhög kvalitet | Minsta filerna, långsammare att koda | Kvalitetssiffror går inte att jämföra mellan format eller ens mellan verktyg, så se dem som platser att börja testa från. ### 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](https://gradiently.design/sv/guide/grainy-gradients) visar hur mycket du bör använda. En bred mörk webbplats-hero med len gradient och en kort rubrik, som visar risken för bandning En ren mörk gradient i 1920×1080 är den bild som oftast får band efter komprimering. En bred webbplats-hero med en strukturerad, kornig gradient bakom samma rubrik Med ett fint brus i ytan klarar samma sorts gradient komprimeringen och läses som ett material. 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](https://gradiently.design/sv/guide/css-noise-texture). 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. **Ä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. **Välj format efter innehåll** Text, loggor och gradienter: PNG eller förlustfri WebP. Foton: JPG, WebP eller AVIF. [PNG eller JPG](https://gradiently.design/sv/guide/png-vs-jpeg) och [WebP jämfört med PNG och JPG](https://gradiently.design/sv/guide/webp-images) går djupare. 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. **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. **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. ```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 ``` Kör dem på en okomprimerad master, aldrig på en fil som redan gått igenom förlustbehäftad komprimering. 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](https://gradiently.design/sv/guide/css-background-image) visar hur du lägger gradienter i lager med en liten brusstruktur, och [optimera bilder för webben](https://gradiently.design/sv/guide/lighthouse-image-performance) går igenom vad Lighthouse letar efter. ## FAQ ### Hur komprimerar jag bilder utan att förlora kvalitet? Ändra storlek till den storlek bilden visas i, använd förlustfri PNG eller WebP för grafik och förlustbehäftad JPG, WebP eller AVIF med hög kvalitet för foton. Jämför i 100 % zoom innan du sänker inställningen. ### Varför ger komprimering bandning i gradienter? Förlustbehäftad komprimering slår ihop färger som är nästan identiska, och en mjuk gradient består nästan helt av nästan identiska grannar, så färgsträckor faller ihop till synliga ränder. ### Vilken är den bästa JPEG-kvaliteten? Runt 80 till 85 för fotografier och 90 till 95 för grafik med text eller gradienter. Kvalitetssiffror varierar mellan verktyg, så kontrollera resultatet i 100 % zoom. ### Minskar brus verkligen bandning? Ja. Fint brus bryter upp stegen mellan färgerna så att ögat läser en len ramp, och det ger komprimeraren struktur att behålla i stället för platta ytor att slå ihop. ### Bör jag komprimera PNG-filer? Förlustfri PNG-optimering är alltid säker. Undvik att reducera en gradient-PNG till en palett på 256 färger, vilket ger bandning.