# Animerede GIF'er: gør dem små, flydende og på brand

[Canonical HTML page](https://gradiently.design/da/guide/gif-maker-tips)

GIF er gammel og begrænset og findes stadig overalt: i mails, chat, dokumenter og README-filer. Arbejd med formatets grænser i stedet for imod dem, så kan den se overraskende god ud.

## The short version

- En animeret GIF kan højst rumme 256 farver i hvert billede, og derfor får bløde gradienter ofte bånd eller pletter.
- De største håndtag for en GIF's filstørrelse er pixelmål, antal billeder og hvor meget af motivet der ændrer sig fra billede til billede.
- Til de fleste designede GIF'er er 10 til 15 billeder i sekundet i den størrelse, den vises i, en god balance mellem flydende bevægelse og vægt.
- En brugerdefineret palette genereret ud fra selve animationen giver langt bedre farver end en generisk webpalette.
- Brug GIF, hvor video ikke kan afspilles, for eksempel i mails, og brug MP4 eller WebM alle andre steder.

En god **animeret GIF** er lille, fordi den er planlagt efter formatets grænser: en beskeden pixelstørrelse, 10 til 15 billeder i sekundet, en farvepalette bygget ud fra selve animationen og så lidt ændring i billedet som muligt. GIF gemmer højst 256 farver pr. billede og komprimerer langt dårligere end video, så den samme løkke, der er en let MP4, kan blive en tung GIF. Brug den, hvor den er det eneste valg, mest i mails og nogle chat- og dokumentværktøjer, og lav den omhyggeligt.

## Hvad en GIF kan og ikke kan

| Begrænsning | Hvad det betyder for dit design |
| --- | --- |
| 256 farver pr. billede | Gradienter, fotos og bløde skygger skal presses ind i en lille palette |
| Gennemsigtighed er enten til eller fra | Ingen bløde kanter: udglattede former får en glorie mod uventede baggrunde |
| Billedforsinkelser i hundrededele af et sekund | Præcis 30 fps er ikke muligt; 10, 20, 25 eller 50 fps går op |
| Ingen lyd | Budskabet skal virke uden lyd, hvilket alligevel er god praksis |
| Enkel komprimering | Filerne vokser hurtigt med størrelse, længde og bevægelse |

Hver eneste GIF-beslutning går tilbage til disse fem fakta.

Browsere behandler desuden ekstremt korte billedforsinkelser som langsommere end bedt om, så presser du en GIF mod høje billedhastigheder, får du ofte en større fil, der ikke engang afspilles hurtigere. Hvorfor billedhastighed overhovedet har betydning, kan du læse om i [billedhastighed forklaret](https://gradiently.design/da/guide/frame-rate-explained).

## Sådan holder du en animeret GIF lille

Filstørrelsen afgøres mest, før du eksporterer. Her er håndtagene i rækkefølge efter, hvor meget de som regel betyder.

1. **Gør den lige så stor, som den skal vises** En mailheader, der vises i 600 px bredde, behøver ikke være 1200 px bred som GIF, hvis vægt betyder mere end skarphed på skærme med høj tæthed. Halverer du bredden, bliver pixelantallet cirka en fjerdedel.
2. **Gør løkken kortere** To eller tre sekunder, der løber rent rundt, slår ti sekunder, der ikke gør. Hvert billede lægger vægt til.
3. **Sænk billedhastigheden** 10 til 15 fps er flydende nok til drivende farver og skrift. Langsom bevægelse behøver færre billeder end hurtig.
4. **Flyt mindre af billedet** GIF-indkodere kan gemme kun de pixels, der ændrer sig. Stillestående tekst over et langsomt bevægeligt område er langt lettere end et helt billede i bevægelse.
5. **Begræns farverne** Bruger designet kun 64 farver, er en palette på 64 farver mindre og ser ens ud.

## Paletter, dithering og bånddannelse

Når et billede har mere end 256 farver, må indkoderen vælge. Den kan runde hver pixel af til den nærmeste palettefarve, så gradienter trapper i synlige bånd, eller den kan **dithere**, hvor den spreder pixels i nabofarver for at efterligne mellemtonerne. Dithering ser blødere ud på afstand og kornet på tæt hold, og det gør filerne større, fordi mønsteret ændrer sig fra billede til billede.

- Som designet: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Rundet af til for få farver: `linear-gradient(90deg, #3b0764 0% 16.6%, #5b0f7a 16.6% 33.3%, #7e1594 33.3% 50%, #a21caf 50% 66.6%, #cc62c2 66.6% 83.3%, #f9a8d4 83.3% 100%)`

En overdrevet visning af bånddannelse. Rigtige GIF'er har flere trin end her, men på brede, subtile gradienter kan man stadig se trinene.

- **Byg paletten ud fra animationen.** En palette genereret ud fra dine egne billeder bruger de 256 pladser på farver, du faktisk bruger, ikke på et generisk sæt.
- **Brug ordnet dithering til animation.** Et fast mønster som Bayer bliver på plads fra billede til billede, så det flimrer mindre og komprimerer bedre end fejlspredning.
- **Vælg dristigere, kortere gradienter.** En gradient mellem to nære farver henover et stort område er det værste tilfælde. Mere kontrast over et mindre område giver mindre bånddannelse.
- **Tilføj korn med vilje.** Lidt tekstur i designet skjuler trinene, men lægger vægt til. Prøv begge dele.

Det samme problem i stillbilleder og hvordan du løser det ved kilden, står i [bånddannelse i gradienter](https://gradiently.design/da/guide/gradient-banding).

## Eksportindstillinger, der virker

Har du en video og skal bruge en GIF, giver FFmpegs palettemetode i to trin langt bedre farver end ét gennemløb. Den første kommando bygger en palette ud fra dit klip, den anden bruger den. Bagefter kan Gifsicle barbere mere vægt af.

```bash
# 1. Build a palette from the clip itself
ffmpeg -i loop.mp4 -vf "fps=12,scale=600:-1:flags=lanczos,palettegen=stats_mode=diff" palette.png

# 2. Use it, with ordered dithering that suits animation
ffmpeg -i loop.mp4 -i palette.png -lavfi "fps=12,scale=600:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=bayer:bayer_scale=3:diff_mode=rectangle" loop.gif

# 3. Optional: optimise further (lossy trades a little quality for size)
gifsicle -O3 --lossy=40 loop.gif -o loop-small.gif
```

fps=12 og en bredde på 600 px passer til en mailheader. stats_mode=diff og diff_mode=rectangle favoriserer de dele af billedet, der bevæger sig.

| Brug | Bredde | Billedhastighed | Længde |
| --- | --- | --- | --- |
| Mailheader | 600 til 1200 px | 10 til 15 fps | 2 til 5 sekunder |
| Chatreaktion eller sticker | 240 til 480 px | 10 til 15 fps | 1 til 3 sekunder |
| Dokument- eller README-demo | 800 til 1200 px | 10 til 20 fps | Så kort som demoen tillader |
| Slide eller præsentation | 960 til 1920 px | 15 til 20 fps | 3 til 6 sekunder |

Udgangspunkter. Mailheadere designes i 1200×600 og vises i 600 px bredde, så vælg bredden ud fra, om skarphed eller vægt betyder mest.

## Hold en GIF på brand

Fordi paletten er så lille, er GIF usædvanlig god til at afsløre, om dine brandfarver er valgt med omhu. Farver, der ligger tæt på hinanden i nuance, smelter sammen, og en baggrund, der bygger på subtile skift, kan falde sammen i flade trin. De brands, der ser bedst ud som GIF'er, læner sig op ad en tydelig grundfarve, en eller to kraftige accenter og skrift, der er stor nok til at overleve en lille palette.

Velkomstmailheader med teksten tak fordi du kom med over en langsomt bevægelig gradient

Designet til en GIF-mailheader: store ord, én bund og farve, der bevæger sig langsomt, så få pixels ændrer sig.

Kvadratisk animeret grafik med det ene ord sendt på en kraftig gradient

Et kvadrat med ét ord til chat og dokumenter. Få elementer, kraftig kontrast, en kort løkke.

Gradiently eksporterer GIF på Pro ved siden af MP4 og WebM, så du kan designe én gang og give GIF'en til dit mailværktøj og videoen til de sociale medier. Fordi den bevægelige baggrund er en Mark, der tilhører dig, ligner GIF'en i en andens indbakke dit brand og ikke en lagerløkke. Til mails i særdeleshed kan du læse [animerede mailheadere](https://gradiently.design/da/guide/animated-email-header) om reglerne for reserveløsninger.

### Undgå

- En GIF på et websted, hvor video kunne afspilles
- At eksportere i dobbelt størrelse og lade HTML skrumpe den uden kontrol
- 30 fps til en langsom farvedrift
- Tekst, der først vises i det sidste billede
- Bløde, gennemsigtige kanter på en ukendt baggrund

### Gør

- GIF til mails og værktøjer, der kræver billeder; MP4 eller WebM andre steder
- Vælg størrelsen med vilje og tjek filens vægt
- 10 til 15 fps og en kort, ren løkke
- Et første billede, der fungerer som stillbillede
- En ensfarvet baggrund, der passer til stedet, den skal ligge

Vælger du mellem formater i stedet for at pudse en GIF af, så start med [GIF eller MP4](https://gradiently.design/da/guide/gif-vs-mp4) og [MP4 eller WebM](https://gradiently.design/da/guide/mp4-vs-webm).

## FAQ

### Hvordan gør jeg en animeret GIF mindre?

Sæt pixelmålene ned, gør løkken kortere, sænk billedhastigheden til omkring 10 til 15 fps, og lad det meste af billedet stå stille. En palette bygget ud fra animationen og et gennemløb i en optimerer som gifsicle hjælper yderligere.

### Hvorfor ser gradienter stribede ud i en GIF?

Et GIF-billede kan højst rumme 256 farver, så en blød gradient rundes af i trin. En brugerdefineret palette, ordnet dithering og lidt korn dæmper alle effekten.

### Hvilken billedhastighed skal en animeret GIF have?

10 til 15 fps passer til de fleste designede GIF'er. Fordi GIF's billedforsinkelser angives i hundrededele af et sekund, går hastigheder som 10, 20 eller 25 fps mere rent op end 30.

### Skal jeg bruge GIF eller MP4?

Brug MP4 eller WebM, hvor video kan afspilles, for filerne er mindre og farverne bedre. Brug GIF til mails og til værktøjer, der kun tager imod billeder.

### Kan en GIF have en gennemsigtig baggrund?

Ja, men hver pixel er enten helt gennemsigtig eller helt dækkende, så bløde kanter får en synlig frynse. Vælg kantfarven, så den passer til baggrunden, den skal ligge på.