# Animerte GIF-er: små, jevne og i tråd med merkevaren

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

GIF er gammelt, begrenset og fortsatt overalt: i e-post, chat, dokumenter og README-filer. Jobb med begrensningene i stedet for mot dem, så kan det se overraskende bra ut.

## The short version

- En animert GIF kan inneholde høyst 256 farger i hvert bilde, og derfor får myke gradienter ofte striper eller prikker.
- De viktigste spakene for filstørrelsen er pikselmålene, antall bilder og hvor mye av bildet som endrer seg mellom bildene.
- For de fleste designede GIF-er er 10 til 15 bilder i sekundet i visningsstørrelsen en god balanse mellom jevnhet og vekt.
- En egen palett laget ut fra selve animasjonen gir langt bedre farger enn en generisk nettpalett.
- Bruk GIF der video ikke kan spilles av, som i e-post, og MP4 eller WebM overalt ellers.

En god **animert GIF** er liten fordi den er planlagt rundt formatets begrensninger: en beskjeden pikselstørrelse, 10 til 15 bilder i sekundet, en fargepalett bygget ut fra selve animasjonen og så lite endring i bildet som mulig. GIF lagrer høyst 256 farger per bilde og komprimerer langt dårligere enn video, så den samme loopen som er en lett MP4, kan bli en tung GIF. Bruk formatet der det er eneste mulighet, først og fremst i e-post og enkelte chat- og dokumentverktøy, og lag det med omhu.

## Hva en GIF kan og ikke kan

| Begrensning | Hva det betyr for designet ditt |
| --- | --- |
| 256 farger per bilde | Gradienter, bilder og myke skygger må presses inn i en liten palett |
| Gjennomsiktighet er av eller på | Ingen myke kanter: kantutjevnede former får en glorie mot uventede bakgrunner |
| Bildeforsinkelse i hundredels sekunder | Nøyaktig 30 fps er umulig; 10, 20, 25 eller 50 fps går opp |
| Ingen lyd | Budskapet må fungere uten lyd, noe som uansett er god praksis |
| Enkel komprimering | Filene vokser raskt med størrelse, lengde og bevegelse |

Hver GIF-avgjørelse kommer tilbake til disse fem faktaene.

Nettlesere behandler dessuten ekstremt korte bildeforsinkelser som tregere enn ønsket, så hvis du presser en GIF mot høy bildefrekvens, får du ofte en større fil som ikke engang spilles raskere. Hvorfor bildefrekvens betyr noe i utgangspunktet, finner du i [bildefrekvens forklart](https://gradiently.design/nb/guide/frame-rate-explained).

## Slik holder du en animert GIF liten

Filstørrelsen avgjøres stort sett før du eksporterer. Dette er spakene, sortert etter hvor mye de vanligvis betyr.

1. **Lag den i visningsstørrelsen** Et e-posthode som vises 600 px bredt, trenger ikke være 1200 px bredt som GIF hvis vekt betyr mer enn skarphet på tette skjermer. Halverer du bredden, får du omtrent en fjerdedel av pikslene.
2. **Gjør loopen kortere** To eller tre sekunder som looper rent, slår ti sekunder som ikke gjør det. Hvert bilde legger til vekt.
3. **Senk bildefrekvensen** 10 til 15 fps er jevnt nok for drivende farger og tekst. Langsom bevegelse trenger færre bilder enn rask bevegelse.
4. **La mindre av bildet bevege seg** GIF-kodere kan lagre bare pikslene som endres. Stillestående tekst over et område som beveger seg sakte, er langt lettere enn et helt bilde i bevegelse.
5. **Begrens fargene** Hvis designet bare bruker 64 farger, er en palett på 64 farger mindre og ser lik ut.

## Paletter, dithering og striper

Når et bilde har mer enn 256 farger, må koderen velge. Den kan runde hver piksel av til nærmeste farge i paletten, slik at gradienter brytes opp i synlige striper, eller den kan bruke **dithering** og strø ut piksler i nabofarger for å etterligne mellomtonene. Dithering ser jevnere ut på avstand og kornete på nært hold, og det gjør filene større fordi mønsteret endrer seg fra bilde til bilde.

- Slik den er designet: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Rundet av til for få farger: `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 av striper. Ekte GIF-er har flere trinn enn dette, men i brede, subtile gradienter synes trinnene likevel.

- **Bygg paletten ut fra animasjonen.** En palett laget av dine egne bilder bruker de 256 plassene på farger du faktisk bruker, ikke på et generisk sett.
- **Bruk ordnet dithering til animasjon.** Et fast mønster som Bayer ligger i ro mellom bildene, så det flimrer mindre og komprimeres bedre enn feildiffusjon.
- **Velg kraftigere, kortere gradienter.** En gradient mellom to nære farger over et stort område er det verste tilfellet. Mer kontrast over et mindre område gir færre striper.
- **Legg til korn med vilje.** Litt tekstur i designet skjuler trinnene, men det gir også mer vekt. Test begge deler.

Det samme problemet i stillbilder, og hvordan du løser det ved kilden, finner du i [striper i gradienter](https://gradiently.design/nb/guide/gradient-banding).

## Eksportinnstillinger som fungerer

Hvis du har en video og trenger en GIF, gir FFmpegs palettmetode i to trinn mye bedre farger enn én enkelt runde. Den første kommandoen bygger en palett av klippet ditt; den andre bruker den. Deretter kan Gifsicle skjære bort enda mer vekt.

```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 et e-posthode. stats_mode=diff og diff_mode=rectangle prioriterer de delene av bildet som beveger seg.

| Bruk | Bredde | Bildefrekvens | Lengde |
| --- | --- | --- | --- |
| E-posthode | 600 til 1200 px | 10 til 15 fps | 2 til 5 sekunder |
| Reaksjon eller klistremerke i chat | 240 til 480 px | 10 til 15 fps | 1 til 3 sekunder |
| Demo i dokumentasjon eller README | 800 til 1200 px | 10 til 20 fps | Så kort som demoen tillater |
| Lysbilde eller presentasjon | 960 til 1920 px | 15 til 20 fps | 3 til 6 sekunder |

Utgangspunkter. E-posthoder designes i 1200×600 og vises 600 px brede, så velg bredden ut fra om skarphet eller vekt betyr mest.

## Hold en GIF i tråd med merkevaren

Fordi paletten er så liten, er GIF uvanlig flink til å avsløre om merkevarefargene dine er valgt med omhu. Farger med nær fargetone smelter sammen, og en bakgrunn som bygger på subtile skift, kan falle sammen til flate trinn. Merkevarer som ser best ut som GIF, lener seg på en tydelig bunnfarge, én eller to sterke aksenter og tekst som er stor nok til å overleve en liten palett.

Velkomsthode i e-post med teksten takk for at du ble med over en gradient som beveger seg sakte

Designet for et GIF-hode i e-post: store ord, én bunn og farger som beveger seg sakte, så få piksler endres.

Kvadratisk animert grafikk med det ene ordet levert på en kraftig gradient

Et kvadrat med ett ord for chat og dokumenter. Få elementer, kraftig kontrast, en kort loop.

Gradiently eksporterer GIF på Pro i tillegg til MP4 og WebM, så du kan designe én gang og gi GIF-en til e-postverktøyet og videoen til sosiale medier. Fordi den bevegelige bakgrunnen er en Mark som tilhører deg, ser GIF-en i noens innboks ut som merkevaren din og ikke som en arkivloop. Gjelder det e-post spesielt, kan du lese [animerte e-posthoder](https://gradiently.design/nb/guide/animated-email-header) for reglene om reserveløsninger.

### Unngå

- En GIF på en nettside der video kunne spilt
- Å eksportere i dobbel størrelse og la HTML krympe den, uten å sjekke
- 30 fps for en langsom fargedrift
- Tekst som bare dukker opp i det siste bildet
- Myke gjennomsiktige kanter på en ukjent bakgrunn

### Gjør

- GIF for e-post og verktøy som krever bilder; MP4 eller WebM ellers
- Velg størrelsen med vilje og sjekk filvekten
- 10 til 15 fps og en kort, ren loop
- Et første bilde som fungerer som stillbilde
- En ensfarget bakgrunn som passer der den skal stå

Hvis du skal velge mellom formater i stedet for å finpusse en GIF, start med [GIF eller MP4](https://gradiently.design/nb/guide/gif-vs-mp4) og [MP4 eller WebM](https://gradiently.design/nb/guide/mp4-vs-webm).

## FAQ

### Hvordan gjør jeg en animert GIF mindre?

Reduser pikselmålene, gjør loopen kortere, senk bildefrekvensen til rundt 10 til 15 fps og hold det meste av bildet i ro. En palett bygget ut fra animasjonen og en runde gjennom et optimaliseringsverktøy som gifsicle hjelper ytterligere.

### Hvorfor får gradienter striper i en GIF?

Et GIF-bilde kan inneholde høyst 256 farger, så en myk gradient rundes av til trinn. En egen palett, ordnet dithering og litt korn reduserer alle effekten.

### Hvilken bildefrekvens bør en animert GIF ha?

10 til 15 fps passer til de fleste designede GIF-er. Fordi bildeforsinkelser i GIF angis i hundredels sekunder, går frekvenser som 10, 20 eller 25 fps bedre opp enn 30.

### Bør jeg bruke GIF eller MP4?

Bruk MP4 eller WebM overalt der video spilles, fordi filene er mindre og fargene bedre. Bruk GIF i e-post og i verktøy som bare godtar bilder.

### Kan en GIF ha gjennomsiktig bakgrunn?

Ja, men hver piksel er enten helt gjennomsiktig eller helt dekkende, så myke kanter får en synlig frynse. Tilpass kantfargen til bakgrunnen den skal ligge på.