# Animoitu GIF: pieni, sulava ja brändisi näköinen

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

GIF on vanha ja rajallinen, mutta yhä kaikkialla: sähköpostissa, keskusteluissa, dokumenteissa ja README-tiedostoissa. Kun huomioit sen rajat, lopputulos voi näyttää yllättävän hyvältä.

## The short version

- Animoidun GIFin jokaisessa ruudussa voi olla enintään 256 väriä, joten pehmeät liukuvärit usein raidoittuvat tai muuttuvat pilkullisiksi.
- GIFin tiedostokokoon vaikuttavat eniten pikselimitat, ruutujen määrä ja ruutujen välillä muuttuvan kuvan osuus.
- Useimmissa suunnitelluissa GIFeissä 10-15 ruutua sekunnissa todellisessa näyttökoossa tasapainottaa sulavuuden ja tiedostokoon.
- Animaatiosta muodostettu oma paletti tuottaa paljon paremmat värit kuin yleinen verkkopaletti.
- Käytä GIFiä siellä, missä video ei toistu, kuten sähköpostissa, ja muualla MP4:ää tai WebM:ää.

Hyvä **animoitu GIF** pysyy pienenä, koska se suunnitellaan muodon rajojen mukaan: maltillinen pikselikoko, 10-15 ruutua sekunnissa, animaatiosta muodostettu väripaletti ja mahdollisimman pieni muuttuva alue. GIF tallentaa enintään 256 väriä ruutua kohden ja pakkaa paljon videota tehottomammin. Sama silmukka voi siis olla kevyt MP4 ja raskas GIF. Käytä sitä harkiten siellä, missä muuta vaihtoehtoa ei ole, lähinnä sähköpostissa sekä joissakin keskustelu- ja dokumenttityökaluissa.

## Mihin GIF pystyy ja mihin ei

| Rajoitus | Merkitys suunnitelmallesi |
| --- | --- |
| 256 väriä ruutua kohden | Liukuvärit, valokuvat ja pehmeät varjot täytyy sovittaa pieneen palettiin |
| Läpinäkyvyys on joko päällä tai pois | Ei pehmeitä reunoja: reunapehmennettyjen muotojen ympärille syntyy kehä odottamattomalla taustalla |
| Ruutuviiveet sekunnin sadasosina | Täsmällinen 30 fps ei onnistu; 10, 20, 25 ja 50 fps jakautuvat tasan |
| Ei ääntä | Viestin on toimittava äänettömänä, mikä on muutenkin hyvä lähtökohta |
| Yksinkertainen pakkaus | Tiedostot kasvavat nopeasti koon, keston ja liikkeen mukana |

Jokainen GIFiä koskeva päätös palautuu näihin viiteen seikkaan.

Selaimet myös hidastavat erittäin lyhyitä ruutuviiveitä pyydetystä. Suuri kuvataajuus tuottaa siksi usein suuremman tiedoston, joka ei edes toistu nopeammin. [Kuvataajuus selitettynä](https://gradiently.design/fi/guide/frame-rate-explained) kertoo, miksi kuvataajuudella on merkitystä.

## Näin pidät animoidun GIFin pienenä

Tiedostokoko määräytyy enimmäkseen ennen vientiä. Nämä keinot on järjestetty niiden tavallisen vaikutuksen mukaan.

1. **Tee kuva todelliseen näyttökokoon** Sähköpostin 600 px leveänä näytettävän otsakekuvan ei tarvitse olla GIFinä 1200 px leveä, jos tiedostokoko on tiheän näytön terävyyttä tärkeämpi. Leveyden puolittaminen vähentää pikselit noin neljäsosaan.
2. **Lyhennä silmukkaa** Siististi toistuva kahden tai kolmen sekunnin silmukka voittaa kymmenen sekunnin katkonaisen. Jokainen ruutu kasvattaa tiedostoa.
3. **Laske kuvataajuutta** 10-15 fps riittää hitaasti liikkuville väreille ja tekstille. Hidas liike tarvitsee vähemmän ruutuja kuin nopea.
4. **Liikuta pienempää osaa kuvasta** GIF-kooderi voi tallentaa vain muuttuvat pikselit. Paikallaan pysyvä teksti hitaasti liikkuvan alueen päällä on paljon kevyempi kuin kokonaan liikkuva kuva.
5. **Rajoita värejä** Jos suunnitelma käyttää vain 64 väriä, 64 värin paletti on pienempi ja näyttää samalta.

## Paletit, rasterointi ja raidoittuminen

Kun ruudussa on yli 256 väriä, kooderin on valittava. Se voi pyöristää jokaisen pikselin lähimpään palettiväriin, jolloin liukuväriin syntyy näkyviä raitoja. Tai se voi **rasteroida** eli ripotella vierekkäisiä värejä luodakseen vaikutelman välisävyistä. Rasterointi näyttää etäältä tasaisemmalta ja läheltä rakeiselta. Se myös kasvattaa tiedostoa, koska kuvio muuttuu ruudusta toiseen.

- Alkuperäinen suunnitelma: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Pyöristetty liian harvoihin väreihin: `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%)`

Liioiteltu esimerkki raidoittumisesta. Oikeissa GIFeissä on enemmän sävyaskelia, mutta ne näkyvät silti laajoissa, hienovaraisissa liukuväreissä.

- **Muodosta paletti animaatiosta.** Omista ruuduista tehty paletti käyttää 256 paikkaansa todellisiin väreihisi yleisen värivalikoiman sijaan.
- **Käytä animaatiossa järjestettyä rasterointia.** Kiinteä kuvio, kuten Bayer, pysyy paikoillaan ruutujen välillä, joten se väreilee vähemmän ja pakkautuu paremmin kuin virheen diffuusio.
- **Suosi vahvempia ja lyhyempiä liukuvärejä.** Kahden läheisen värin liukuväri suurella alueella on hankalin. Suurempi kontrasti pienemmällä alueella raidoittuu vähemmän.
- **Lisää rakeisuutta tarkoituksella.** Pieni tekstuuri peittää sävyaskelia, mutta kasvattaa tiedostoa. Kokeile molempia.

[Liukuvärin raidoittuminen](https://gradiently.design/fi/guide/gradient-banding) käsittelee samaa ongelmaa still-kuvissa ja sen korjaamista lähteessä.

## Toimivat vientiasetukset

Jos muutat videon GIFiksi, FFmpegin kaksivaiheinen palettimenetelmä tuottaa paljon paremmat värit kuin yksi käsittelykerta. Ensimmäinen komento muodostaa paletin leikkeestä, toinen käyttää sitä. Gifsicle voi pienentää tiedostoa vielä lisää.

```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 ja 600 px leveys sopivat sähköpostin otsakekuvaan. stats_mode=diff ja diff_mode=rectangle painottavat liikkuvia alueita.

| Käyttö | Leveys | Kuvataajuus | Kesto |
| --- | --- | --- | --- |
| Sähköpostin otsakekuva | 600-1200 px | 10-15 fps | 2-5 sekuntia |
| Keskustelureaktio tai tarra | 240-480 px | 10-15 fps | 1-3 sekuntia |
| Dokumentin tai READMEn demo | 800-1200 px | 10-20 fps | Niin lyhyt kuin demo sallii |
| Dia tai esitys | 960-1920 px | 15-20 fps | 3-6 sekuntia |

Lähtökohtia. Sähköpostin otsakekuvat suunnitellaan kokoon 1200×600 ja näytetään 600 px leveinä. Valitse leveys terävyyden ja tiedostokoon tärkeyden mukaan.

## Pidä GIF brändisi näköisenä

Pieni paletti paljastaa erityisen hyvin, onko brändin värit valittu huolella. Läheiset sävyt sulautuvat, ja hienovaraisiin muutoksiin perustuva tausta voi hajota tasaisiksi portaiksi. GIFinä parhaiten toimivat brändit käyttävät selkeää pohjaväriä, yhtä tai kahta vahvaa korostusväriä sekä niin suurta tekstiä, että se kestää pienen paletin.

Tervetulosähköpostin otsakekuva, jossa kiitos liittymisestä hitaasti liikkuvan liukuvärin päällä

GIF-otsakekuva sähköpostiin: suuret sanat, yksi pohjaväri ja hidas väriliike, jolloin harva pikseli muuttuu.

Neliönmuotoinen animaatio, jossa sana julkaistu vahvan liukuvärin päällä

Yhden sanan neliö keskusteluihin ja dokumentteihin. Vähän elementtejä, vahva kontrasti ja lyhyt silmukka.

Gradientlyn Pro vie GIFejä MP4:n ja WebM:n rinnalla, joten voit suunnitella kerran ja lähettää GIFin sähköpostityökaluun ja videon someen. Liikkuva tausta on sinulle kuuluva Mark, joten vastaanottajan GIF näyttää brändiltäsi valmissilmukan sijaan. Sähköpostin varakuvista kertoo [animoidut sähköpostin otsakekuvat](https://gradiently.design/fi/guide/animated-email-header).

### Vältä

- GIFiä verkkosivulla, jossa video toimisi
- Vientiä kaksinkertaisena ja pienennystä HTML:llä ilman tarkistusta
- 30 fps hitaalle väriliikkeelle
- Tekstiä, joka ilmestyy vasta viimeiseen ruutuun
- Pehmeitä läpinäkyviä reunoja tuntemattomalla taustalla

### Tee näin

- GIF sähköpostiin ja kuvia tarvitseviin työkaluihin; MP4 tai WebM muualle
- Valitse koko harkiten ja tarkista tiedostokoko
- 10-15 fps ja lyhyt, siististi toistuva silmukka
- Ensimmäinen ruutu, joka toimii myös still-kuvana
- Tasainen tausta, joka sopii sijoituspaikkaansa

Jos valitset tiedostomuotoa GIFin viimeistelyn sijaan, aloita artikkeleista [GIF vai MP4](https://gradiently.design/fi/guide/gif-vs-mp4) ja [MP4 vai WebM](https://gradiently.design/fi/guide/mp4-vs-webm).

## FAQ

### Miten pienennän animoidun GIFin?

Pienennä pikselimittoja, lyhennä silmukkaa, laske kuvataajuus noin 10-15 fps:ään ja pidä suurin osa kuvasta paikallaan. Animaatiosta muodostettu paletti ja gifsiclen kaltainen optimointityökalu auttavat lisää.

### Miksi liukuvärit näyttävät raidallisilta GIFissä?

GIF-ruudussa voi olla enintään 256 väriä, joten pehmeä liukuväri pyöristetään sävyaskeliksi. Oma paletti, järjestetty rasterointi ja pieni rakeisuus vähentävät vaikutusta.

### Mikä kuvataajuus sopii animoituun GIFiin?

10-15 fps sopii useimpiin suunniteltuihin GIFeihin. GIFin ruutuviiveet määritetään sekunnin sadasosina, joten esimerkiksi 10, 20 ja 25 fps jakautuvat tasaisemmin kuin 30.

### Pitäisikö käyttää GIFiä vai MP4:ää?

Käytä MP4:ää tai WebM:ää kaikkialla, missä video toistuu, sillä tiedostot ovat pienempiä ja värit parempia. Käytä GIFiä sähköpostiin ja työkaluihin, jotka hyväksyvät vain kuvia.

### Voiko GIFin tausta olla läpinäkyvä?

Voi, mutta jokainen pikseli on joko täysin läpinäkyvä tai täysin peittävä, joten pehmeisiin reunoihin tulee näkyvä reunus. Sovita reunaväri kuvan tulevaan taustaan.