# Billedkomprimering uden at ødelægge gradienter

[Canonical HTML page](https://gradiently.design/da/guide/image-compression)

Fotos klarer hård komprimering. Gradienter gør ikke. Her er årsagen til, at en blød overgang bliver til striber, og de præcise indstillinger, der holder den blød, mens filen forbliver lille.

## The short version

- Billedkomprimering gør filer mindre enten uden tab, ved at gemme de samme pixels mere effektivt, eller med tab, ved at kassere detaljer.
- Bløde gradienter lider mest under komprimering med tab, fordi nabofarver smelter sammen til synlige bånd og blokke.
- Mørke, subtile gradienter får bånd først, fordi et 8-bit-billede har meget få forskellige værdier mellem to nære mørke farver.
- Et let lag korn eller dithering skjuler bånd bedre end nogen kvalitetsindstilling, fordi det bryder trinene op.
- Til grafik med gradienter eksporterer du PNG eller lossless WebP eller bruger JPG i kvalitet 90 eller højere med chroma subsampling slået fra.

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

En overgang med meget få trin: `linear-gradient(90deg, #14101f 0%, #2a2147 100%)`

Nære mørke farver over et stort område: den klassiske risiko for bånd. På en god skærm kan du allerede her se svage lodrette trin.

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](https://gradiently.design/da/guide/gradient-banding), og mørke og pastelagtige overgange viser det mest.

### Får let bånd

- Mørke overgange mellem nære farver
- Lyse pasteller over et stort område
- Helt rene digitale flader
- Brede formater som en hero på 1920×1080

### Klarer sig godt

- Lyse overgange med fjerne farvestop
- Gradienter med korn eller tekstur
- Livlige fotos og illustrationer
- Små billeder med korte farvestrækninger

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

| Format | Indstilling til gradientgrafik | Indstilling til fotos | Noter |
| --- | --- | --- | --- |
| PNG | Uden tab, fuld farve | Sjældent det bedste valg | Undgå at reducere til 256 farver på gradienter |
| JPG | Kvalitet 90 til 95, subsampling slået fra (4:4:4) | Kvalitet 80 til 85 | Rediger og gem aldrig en JPG igen og igen |
| WebP | Uden tab, eller med tab 85 til 90 | Med tab 75 til 80 | Det bedste standardvalg til din egen hjemmeside |
| AVIF | Med tab i høj kvalitet, test omhyggeligt | Middel kvalitet | Mindste filer, langsommere at kode |

Kvalitetstal kan ikke sammenlignes mellem formater eller engang mellem værktøjer, så brug dem som steder at begynde at teste.

### 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](https://gradiently.design/da/guide/grainy-gradients) viser, hvor meget du skal bruge.

En bred mørk hero til en hjemmeside med en blød gradient og en kort overskrift, der illustrerer risikoen for bånd

En ren mørk overgang på 1920×1080 er det billede, der oftest får bånd efter komprimering.

En bred hero til en hjemmeside med en tekstureret, kornet gradient bag den samme overskrift

Med et fint korn i overfladen overlever den samme slags overgang komprimeringen og læses som et materiale.

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](https://gradiently.design/da/guide/css-noise-texture). 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. **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. **Vælg formatet efter indholdet** Tekst, logoer og gradienter: PNG eller lossless WebP. Fotos: JPG, WebP eller AVIF. [PNG eller JPG](https://gradiently.design/da/guide/png-vs-jpeg) og [WebP kontra PNG og JPG](https://gradiently.design/da/guide/webp-images) går dybere.
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. **Komprimer én gang, fra masteren** Behold en ukomprimeret master. Hver ny eksport kommer fra den, aldrig fra en tidligere JPG.
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.

```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 ukomprimeret master, aldrig på en fil, der allerede har været igennem komprimering med tab.

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](https://gradiently.design/da/guide/css-background-image) viser, hvordan du lægger gradienter i lag med en lille korntekstur, og [optimering af billeder til nettet](https://gradiently.design/da/guide/lighthouse-image-performance) gennemgår, hvad Lighthouse leder efter.

## FAQ

### Hvordan komprimerer jeg billeder uden at miste kvalitet?

Skalér til den størrelse, billedet vises i, brug PNG eller WebP uden tab til grafik, og brug JPG, WebP eller AVIF med tab i høj kvalitet til fotos. Sammenlign ved 100 % zoom, før du sænker indstillingen.

### Hvorfor giver komprimering bånd i gradienter?

Komprimering med tab slår farver sammen, der er næsten identiske, og en blød gradient består næsten udelukkende af næsten identiske naboer, så strækninger af farve falder sammen til synlige striber.

### Hvad er den bedste JPEG-kvalitetsindstilling?

Omkring 80 til 85 til fotografier og 90 til 95 til grafik med tekst eller gradienter. Kvalitetstal varierer mellem værktøjer, så tjek resultatet ved 100 % zoom.

### Reducerer korn virkelig bånd?

Ja. Fint korn bryder trinene mellem farver op, så øjet ser en jævn rampe, og det giver komprimeringen tekstur at beholde i stedet for flader at slå sammen.

### Skal jeg komprimere PNG-filer?

PNG-optimering uden tab er altid sikker. Undgå at reducere en PNG med gradient til en palet på 256 farver, som giver bånd.