# Animerade GIF-filer: små, mjuka och i ditt varumärke

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

GIF är gammalt, begränsat och fortfarande överallt: i mejl, chatt, dokument och README-filer. Arbeta med formatets gränser i stället för mot dem, så kan det se förvånansvärt bra ut.

## The short version

- En animerad GIF kan rymma högst 256 färger i varje bildruta, vilket är varför mjuka gradienter ofta får band eller fläckar.
- De största spakarna för GIF-filens storlek är pixelmått, antal bildrutor och hur mycket av bilden som ändras mellan rutorna.
- För de flesta designade GIF-filer är 10 till 15 bilder per sekund i den storlek den visas i en bra balans mellan mjukhet och vikt.
- En egen palett som genereras från själva animationen ger mycket bättre färg än en generisk webbpalett.
- Använd GIF där video inte kan spelas, till exempel i mejl, och MP4 eller WebM överallt annars.

En bra **animerad GIF** är liten eftersom den är planerad efter formatets gränser: en måttlig pixelstorlek, 10 till 15 bilder per sekund, en färgpalett byggd från själva animationen och så lite som möjligt som ändras i bilden. GIF lagrar högst 256 färger per bildruta och komprimerar mycket sämre än video, så samma loop som är en lätt MP4 kan bli en tung GIF. Använd den där den är enda alternativet, främst i mejl och vissa chatt- och dokumentverktyg, och gör den med omsorg.

## Vad en GIF kan och inte kan

| Begränsning | Vad det betyder för din design |
| --- | --- |
| 256 färger per bildruta | Gradienter, foton och mjuka skuggor måste pressas in i en liten palett |
| Transparens är på eller av | Inga mjuka kanter: kantutjämnade former får en gloria mot oväntade bakgrunder |
| Fördröjning mellan rutor i hundradelar av en sekund | Exakt 30 bilder per sekund är inte möjligt, medan 10, 20, 25 eller 50 går jämnt upp |
| Inget ljud | Budskapet måste fungera ljudlöst, vilket ändå är god praxis |
| Enkel komprimering | Filerna växer snabbt med storlek, längd och rörelse |

Varje beslut om en GIF leder tillbaka till de här fem fakta.

Webbläsare behandlar dessutom extremt korta fördröjningar mellan rutor som långsammare än begärt, så att pressa en GIF mot höga bildfrekvenser ger ofta en större fil som inte ens spelas snabbare. Varför bildfrekvens spelar roll från första början förklaras i [bildfrekvens förklarad](https://gradiently.design/sv/guide/frame-rate-explained).

## Så håller du en animerad GIF liten

Filstorleken avgörs mest innan du exporterar. Här är spakarna i den ordning de brukar spela störst roll.

1. **Gör den i den storlek den visas** En mejlrubrik som visas 600 px bred behöver inte vara 1200 px bred som GIF om vikten betyder mer än skärpan på täta skärmar. Att halvera bredden ger ungefär en fjärdedel av pixlarna.
2. **Korta ner loopen** Två eller tre sekunder som loopar rent slår tio sekunder som inte gör det. Varje bildruta ger extra vikt.
3. **Sänk bildfrekvensen** 10 till 15 bilder per sekund är mjukt nog för svävande färg och text. Långsam rörelse behöver färre rutor än snabb rörelse.
4. **Rör mindre av bilden** GIF-kodare kan lagra bara de pixlar som ändras. Stillastående text över ett långsamt rörligt område är mycket lättare än en hel bildruta i rörelse.
5. **Begränsa färgerna** Om designen bara använder 64 färger är en palett med 64 färger mindre och ser likadan ut.

## Paletter, dithering och bandning

När en bildruta har fler än 256 färger måste kodaren välja. Den kan avrunda varje pixel till närmaste palettfärg, vilket får gradienter att stegas upp i synliga band, eller så kan den **ditha**, alltså strö ut pixlar i angränsande färger för att fejka mellanlägena. Dithering ser mjukare ut på avstånd och kornigt på nära håll, och den gör filer större eftersom mönstret ändras från ruta till ruta.

- Som designad: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Avrundad till för få färger: `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 överdriven bild av bandning. Riktiga GIF-filer har fler steg än så här, men på breda, subtila gradienter syns stegen ändå.

- **Bygg paletten från animationen.** En palett som genereras från dina egna bildrutor lägger sina 256 platser på färger du faktiskt använder, inte på en generisk uppsättning.
- **Använd ordnad dithering för animation.** Ett fast mönster som Bayer ligger kvar mellan rutorna, så det skimrar mindre och komprimeras bättre än felspridning.
- **Föredra djärvare, kortare gradienter.** En gradient mellan två närliggande färger över en stor yta är värsta fallet. Mer kontrast över en mindre yta ger mindre bandning.
- **Lägg till korn med avsikt.** Lite textur i designen döljer stegen, men ger mer vikt. Testa båda.

Samma problem i stillbilder, och hur du löser det vid källan, finns i [gradientbandning](https://gradiently.design/sv/guide/gradient-banding).

## Exportinställningar som fungerar

Om du har en video och behöver en GIF ger FFmpegs palettmetod i två steg mycket bättre färg än ett enda pass. Det första kommandot bygger en palett från ditt klipp, det andra använder den. Därefter kan Gifsicle skala bort mer vikt.

```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 och 600 px bredd passar en mejlrubrik. stats_mode=diff och diff_mode=rectangle gynnar de delar av bilden som rör sig.

| Användning | Bredd | Bildfrekvens | Längd |
| --- | --- | --- | --- |
| Mejlrubrik | 600 till 1200 px | 10 till 15 bilder/s | 2 till 5 sekunder |
| Chattreaktion eller klistermärke | 240 till 480 px | 10 till 15 bilder/s | 1 till 3 sekunder |
| Demo i dokument eller README | 800 till 1200 px | 10 till 20 bilder/s | Så kort som demon tillåter |
| Bildspel eller presentation | 960 till 1920 px | 15 till 20 bilder/s | 3 till 6 sekunder |

Utgångspunkter. Mejlrubriker designas i 1200×600 och visas 600 px breda, så välj bredd efter om skärpa eller vikt betyder mest.

## Håll en GIF i ditt varumärke

Eftersom paletten är så liten är GIF ovanligt bra på att avslöja om dina varumärkesfärger är valda med omsorg. Färger som ligger nära varandra i nyans smälter ihop, och en bakgrund som bygger på subtila skiftningar kan falla samman i platta steg. Varumärken som ser bäst ut som GIF-filer lutar sig mot en tydlig grundfärg, en eller två starka accenter och text som är stor nog att överleva en liten palett.

Välkomstrubrik för mejl med texten tack för att du är med över en långsamt rörlig gradient

Designad för en mejlrubrik i GIF: stora ord, en grund, färg som rör sig långsamt så att få pixlar ändras.

Kvadratisk animerad grafik med det enda ordet levererat på en kraftig gradient

En kvadrat med ett enda ord för chatt och dokument. Få element, kraftig kontrast, en kort loop.

Gradiently exporterar GIF i Pro vid sidan av MP4 och WebM, så att du kan designa en gång och sedan ge GIF-filen till ditt mejlverktyg och videon till sociala medier. Eftersom den rörliga bakgrunden är en Mark som tillhör dig ser GIF-filen i någons inkorg ut som ditt varumärke i stället för en stockloop. För just mejl, läs [animerade mejlrubriker](https://gradiently.design/sv/guide/animated-email-header) om reservreglerna.

### Undvik

- En GIF på en webbplats där video skulle spelas
- Att exportera i dubbel storlek och låta HTML krympa den utan koll
- 30 bilder per sekund för en långsam färgdrift
- Text som bara dyker upp i sista bildrutan
- Mjuka genomskinliga kanter mot en okänd bakgrund

### Gör så här

- GIF för mejl och verktyg som kräver bilder, MP4 eller WebM i övrigt
- Välj storlek med avsikt och kontrollera filens vikt
- 10 till 15 bilder per sekund, en kort ren loop
- En första bildruta som fungerar som stillbild
- En enfärgad bakgrund som matchar där den hamnar

Om du väljer mellan format i stället för att putsa en GIF, börja med [GIF mot MP4](https://gradiently.design/sv/guide/gif-vs-mp4) och [MP4 mot WebM](https://gradiently.design/sv/guide/mp4-vs-webm).

## FAQ

### Hur gör jag en animerad GIF mindre?

Minska pixelmåtten, korta ner loopen, sänk bildfrekvensen till runt 10 till 15 bilder per sekund och håll det mesta av bilden stilla. En palett byggd från animationen och ett varv genom en optimerare som gifsicle hjälper ytterligare.

### Varför ser gradienter randiga ut i en GIF?

En GIF-bildruta rymmer högst 256 färger, så en mjuk gradient avrundas till steg. En egen palett, ordnad dithering och lite korn minskar effekten.

### Vilken bildfrekvens ska en animerad GIF ha?

10 till 15 bilder per sekund passar de flesta designade GIF-filer. Eftersom fördröjningen mellan GIF-rutor anges i hundradelar av en sekund går frekvenser som 10, 20 eller 25 jämnare upp än 30.

### Ska jag använda GIF eller MP4?

Använd MP4 eller WebM överallt där video spelas, eftersom filerna är mindre och färgen bättre. Använd GIF för mejl och för verktyg som bara tar emot bilder.

### Kan en GIF ha transparent bakgrund?

Ja, men varje pixel är antingen helt genomskinlig eller helt solid, så mjuka kanter får en synlig fransning. Matcha kantfärgen mot den bakgrund den ska ligga på.