# GIF animate: leggere, fluide e coerenti con il brand

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

La GIF è vecchia, limitata e ancora ovunque: email, chat, documenti e README. Se lavori con i suoi limiti invece che contro, può venire sorprendentemente bene.

## The short version

- Una GIF animata può contenere al massimo 256 colori per fotogramma, ed è per questo che i gradienti morbidi spesso mostrano bande o puntini.
- Le leve più forti sul peso di una GIF sono le dimensioni in pixel, il numero di fotogrammi e quanta parte dell’immagine cambia da un fotogramma all’altro.
- Per la maggior parte delle GIF progettate, da 10 a 15 fotogrammi al secondo, alla dimensione in cui verrà mostrata, sono un buon equilibrio tra fluidità e peso.
- Generare una palette personalizzata dall’animazione stessa dà colori molto migliori di una palette web generica.
- Usa la GIF dove il video non può partire, come nelle email, e MP4 o WebM ovunque altro.

Una buona **GIF animata** è leggera perché è pensata attorno ai limiti del formato: una dimensione in pixel contenuta, da 10 a 15 fotogrammi al secondo, una palette di colori ricavata dall’animazione stessa e la minor parte possibile dell’immagine che cambia. La GIF salva al massimo 256 colori per fotogramma e comprime molto meno bene del video, quindi lo stesso loop che è un MP4 leggero può diventare una GIF pesante. Usala dove è l’unica opzione, soprattutto email e alcuni strumenti di chat e documenti, e curala con attenzione.

## Che cosa può e non può fare una GIF

| Limite | Che cosa significa per il tuo progetto |
| --- | --- |
| 256 colori per fotogramma | Gradienti, foto e ombre morbide vanno compressi in una palette piccola |
| La trasparenza è accesa o spenta | Niente bordi morbidi: le forme con antialiasing mostrano un alone su sfondi inattesi |
| Ritardi dei fotogrammi in centesimi di secondo | I 30 fps esatti non sono possibili; 10, 20, 25 o 50 fps dividono in modo pulito |
| Nessun audio | Il messaggio deve funzionare in silenzio, cosa che comunque è una buona pratica |
| Compressione semplice | I file crescono in fretta con dimensioni, durata e movimento |

Ogni decisione sulle GIF torna a questi cinque fatti.

I browser inoltre trattano i ritardi di fotogramma molto brevi come più lenti di quanto richiesto, quindi spingere una GIF verso frame rate alti spesso dà un file più grande che non va nemmeno più veloce. Per capire perché il frame rate conta, vedi [il frame rate spiegato](https://gradiently.design/it/guide/frame-rate-explained).

## Come tenere leggera una GIF animata

Il peso del file si decide soprattutto prima di esportare. Queste sono le leve, in ordine di quanto contano di solito.

1. **Dalle la dimensione in cui sarà mostrata** Un’intestazione email mostrata a 600 px di larghezza non deve essere larga 1200 px come GIF, se il peso conta più della nitidezza sugli schermi ad alta densità. Dimezzare la larghezza riduce i pixel a circa un quarto.
2. **Accorcia il loop** Due o tre secondi che ripartono bene valgono più di dieci secondi che non lo fanno. Ogni fotogramma aggiunge peso.
3. **Abbassa il frame rate** Da 10 a 15 fps bastano per un colore che scorre piano e per il testo. Il movimento lento richiede meno fotogrammi di quello veloce.
4. **Muovi meno parte dell’immagine** Gli encoder GIF possono salvare solo i pixel che cambiano. Un testo fermo su un’area che si muove lentamente pesa molto meno di un’intera immagine in movimento.
5. **Limita i colori** Se il progetto usa solo 64 colori, una palette da 64 colori pesa meno e ha lo stesso aspetto.

## Palette, dithering e banding

Quando un fotogramma ha più di 256 colori, l’encoder deve scegliere. Può arrotondare ogni pixel al colore di palette più vicino, e allora i gradienti si spezzano in bande visibili, oppure può usare il **dithering**, che sparge pixel di colori vicini per simulare le sfumature intermedie. Il dithering sembra più morbido da lontano e granuloso da vicino, e fa crescere i file perché il disegno cambia da un fotogramma all’altro.

- Come progettato: `linear-gradient(90deg, #3b0764 0%, #a21caf 50%, #f9a8d4 100%)`
- Arrotondato a troppi pochi colori: `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%)`

Una visione esagerata del banding. Le GIF vere hanno più passaggi di così, ma sui gradienti ampi e delicati i gradini si vedono lo stesso.

- **Costruisci la palette dall’animazione.** Una palette generata dai tuoi fotogrammi spende i 256 posti per i colori che usi davvero, non per un set generico.
- **Usa il dithering ordinato per le animazioni.** Un disegno fisso come Bayer resta fermo tra un fotogramma e l’altro, quindi vibra meno e comprime meglio della diffusione dell’errore.
- **Preferisci gradienti più decisi e più corti.** Un gradiente tra due colori vicini su una grande area è il caso peggiore. Più contrasto su un’area più piccola produce meno bande.
- **Aggiungi grana di proposito.** Un po’ di texture nel progetto nasconde i gradini, anche se aggiunge peso. Prova entrambe le strade.

Lo stesso problema nelle immagini fisse, e come risolverlo alla fonte, è nel [banding dei gradienti](https://gradiently.design/it/guide/gradient-banding).

## Impostazioni di esportazione che funzionano

Se hai un video e ti serve una GIF, il metodo a due passaggi con palette di FFmpeg dà colori molto migliori di un passaggio unico. Il primo comando costruisce una palette dalla tua clip, il secondo la usa. Poi Gifsicle può togliere altro peso.

```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 e una larghezza di 600 px vanno bene per un’intestazione email. stats_mode=diff e diff_mode=rectangle favoriscono le parti dell’immagine che si muovono.

| Uso | Larghezza | Frame rate | Durata |
| --- | --- | --- | --- |
| Intestazione email | da 600 a 1200 px | da 10 a 15 fps | da 2 a 5 secondi |
| Reazione o sticker in chat | da 240 a 480 px | da 10 a 15 fps | da 1 a 3 secondi |
| Demo in documenti o README | da 800 a 1200 px | da 10 a 20 fps | Il più breve che la demo permette |
| Slide o presentazione | da 960 a 1920 px | da 15 a 20 fps | da 3 a 6 secondi |

Punti di partenza. Le intestazioni email si progettano a 1200×600 e si mostrano a 600 px di larghezza, quindi scegli la larghezza in base a cosa conta di più, nitidezza o peso.

## Come tenere una GIF coerente con il brand

Poiché la palette è così piccola, la GIF è particolarmente brava a rivelare se i colori del tuo brand sono stati scelti con cura. I colori vicini per tonalità si fondono, e uno sfondo che si regge su variazioni sottili può crollare in gradini piatti. I brand che rendono meglio in GIF puntano su un colore di fondo chiaro, uno o due accenti forti e testo abbastanza grande da sopravvivere a una palette ridotta.

Intestazione di email di benvenuto con la scritta grazie di essere con noi su un gradiente che si muove lentamente

Pensata per un’intestazione email in GIF: parole grandi, un solo fondo, colore che si muove piano così cambiano pochi pixel.

Grafica animata quadrata con la sola parola pubblicato su un gradiente deciso

Un quadrato con una sola parola per chat e documenti. Pochi elementi, contrasto deciso, un loop breve.

Gradiently esporta GIF nel piano Pro insieme a MP4 e WebM, così progetti una volta sola e poi passi la GIF al tuo strumento email e il video ai social. Poiché lo sfondo in movimento è un Mark che ti appartiene, la GIF nella casella di qualcuno assomiglia al tuo brand e non a un loop da archivio. Per le email in particolare, leggi [le intestazioni email animate](https://gradiently.design/it/guide/animated-email-header) per le regole di ripiego.

### Da evitare

- Una GIF su un sito dove un video potrebbe partire
- Esportare al doppio della dimensione e lasciare che l’HTML la riduca, senza controllare
- 30 fps per una lenta deriva di colore
- Testo che compare solo nell’ultimo fotogramma
- Bordi morbidi trasparenti su uno sfondo sconosciuto

### Da fare

- GIF per email e strumenti che richiedono immagini; MP4 o WebM altrove
- Scegliere la dimensione di proposito e controllare il peso del file
- Da 10 a 15 fps, un loop breve e pulito
- Un primo fotogramma che funziona anche da immagine fissa
- Uno sfondo pieno che corrisponde a dove verrà messa

Se stai scegliendo tra formati e non rifinendo una GIF, parti da [GIF o MP4](https://gradiently.design/it/guide/gif-vs-mp4) e [MP4 o WebM](https://gradiently.design/it/guide/mp4-vs-webm).

## FAQ

### Come rendo più leggera una GIF animata?

Riduci le dimensioni in pixel, accorcia il loop, abbassa il frame rate a circa 10-15 fps e tieni ferma gran parte dell’immagine. Aiutano ancora una palette costruita dall’animazione e un passaggio in un ottimizzatore come gifsicle.

### Perché i gradienti in una GIF sembrano a strisce?

Un fotogramma GIF può contenere al massimo 256 colori, quindi un gradiente morbido viene arrotondato a gradini. Una palette personalizzata, il dithering ordinato e un po’ di grana riducono l’effetto.

### Che frame rate deve avere una GIF animata?

Da 10 a 15 fps vanno bene per la maggior parte delle GIF progettate. Poiché i ritardi dei fotogrammi GIF si impostano in centesimi di secondo, valori come 10, 20 o 25 fps dividono in modo più pulito di 30.

### Meglio GIF o MP4?

Usa MP4 o WebM ovunque un video possa partire, perché i file sono più leggeri e il colore è migliore. Usa la GIF per le email e per gli strumenti che accettano solo immagini.

### Una GIF può avere lo sfondo trasparente?

Sì, ma ogni pixel è o del tutto trasparente o del tutto pieno, quindi i bordi morbidi mostrano una frangia visibile. Abbina il colore del bordo allo sfondo su cui starà.