GIF animate: leggere, fluide e coerenti con il brand

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

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.

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. 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. 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. 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. 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. 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.

• 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.

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.

# 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

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.

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 per le regole di ripiego.

Se stai scegliendo tra formati e non rifinendo una GIF, parti da GIF o MP4 e MP4 o WebM.