Perché le GIF vanno male in fase di estrazione

Most bad GIFs are decided before any GIF software is opened. Someone extracts every frame of a five-second clip, gets 150 images, assembles them, and ends up with a 14 MB file that a chat app refuses to embed. L'istinto è quindi quello di comprimerlo più forte, il che lo rende fangoso senza renderlo molto più piccolo.

Il problema reale è a monte. Una GIF non è un codec video: non ha compensazione del movimento, nessuna previsione inter-frame degna di questo nome e un limite massimo di 256 colori per fotogramma. Every frame is close to a standalone image. Questo singolo fatto guida ogni decisione di seguito.

Quindi la sequenza su cui riflettere è: decidere prima il conteggio dei fotogrammi, poi la tavolozza e solo dopo preoccuparsi della compressione.

Passaggio 1: scegli l'intervallo di campionamento

La domanda non è "quanti fotogrammi ha la sorgente" ma "di quanti fotogrammi ha effettivamente bisogno il movimento". Alcuni punti di partenza approssimativi:

  • 10–12 fps — l'impostazione del cavallo di battaglia. Abbastanza fluido per gesti, demo dell'interfaccia utente e la maggior parte dei clip di reazione. Su una sorgente a 30 fps, ovvero ogni terzo fotogramma; a 60 fps, ogni 5.
  • 15 fps — per movimento continuo in cui 12 inizia a lampeggiare, come una panoramica della fotocamera o un oggetto che rimbalza.
  • 5–8 fps — per contenuti simili a diapositive: un grafico in costruzione, un prima/dopo, uno zoom lento. Spesso sembra intenzionale piuttosto che economico.
  • 24+ fps : raramente ne vale la pena. La dimensione del file raddoppia all'incirca rispetto a 12 fps e la maggior parte degli spettatori non riesce a capirlo in una piccola immagine in loop.

In the estrattore di frame, utilizza la modalità "Frame Rate (FPS)" e inserisci il divisore: 3 per ogni terzo fotogramma, 5 per ogni quinto. Il conteggio dei fotogrammi si aggiorna durante la digitazione, ovvero il numero che prevede effettivamente la dimensione del file.

Verifica di integrità prima dell'estrazione: moltiplica il numero di fotogrammi previsto per circa 30–60 KB. Si tratta di un valore realistico per un fotogramma GIF largo 480 pixel dopo la riduzione della tavolozza. Sessanta frame occupano circa 2-3 MB. Se questo supera il tuo budget, taglia i fotogrammi adesso: è molto più efficace che comprimerli in un secondo momento.

Passaggio 2: mantieni la durata breve

GIF non ha un caso d'uso di lunga durata. Da due a quattro secondi coprono quasi tutto ciò che funziona come un loop e il punto del loop conta più della lunghezza: una clip che termina vicino a dove è iniziata viene letta come continua, mentre una che taglia a metà movimento attira l'attenzione sulla cucitura di ogni ripetizione.

Utilizza il cursore dell'intervallo di tempo per tagliare prima dell'estrazione anziché eliminare i fotogrammi in seguito. I timestamp sono visibili mentre trascini, così puoi posizionare il punto di stacco nella stessa posa del punto di inizio.

Passaggio 3: comprendi il limite di 256 colori

Questo è il vincolo che sorprende le persone e vale la pena comprenderlo piuttosto che combatterlo.

Ogni frame GIF viene indicizzato in una tavolozza di massimo 256 colori. Il tuo video sorgente ne ha milioni. Qualcosa deve eliminare la differenza e il modo in cui lo fa determina l'aspetto del risultato.

Due strategie, e quella giusta dipende interamente dal contenuto:

  • Dithering disperde i pixel dei colori della tavolozza adiacente per simulare quelli mancanti. I gradienti – cieli, luci soffuse, ombre su un viso – sopravvivono molto meglio con esso. Il costo è uno schema di macchioline visibile e un file notevolmente più grande, perché quel rumore annulla la compressione.
  • No dithering produce aree di colore piatte e pulite e file molto più piccoli. Ideale per registrazioni di schermate, demo dell'interfaccia utente, disegni al tratto e qualsiasi cosa con ampie regioni uniformi. Sui gradienti fotografici produce bande nette.

Practical rule: screen content, no dithering. Riprese della telecamera, dithering in corso. Se non sei sicuro, esportali entrambi e guardali nelle dimensioni reali: la differenza è evidente e richiede un minuto.

Questo è anche il motivo per cui estrarre in PNG è la scelta giusta anche se la GIF finale ha 256 colori. Ogni artefatto JPEG nell'origine diventa un colore su cui la tavolozza deve spendere una voce. L'inserimento di fotogrammi puliti e senza perdite nel passaggio della tavolozza fornisce al quantizzatore un punto di partenza migliore.

Passaggio 4: abbina il ritardo del fotogramma all'intervallo estratto

Le GIF non memorizzano una frequenza fotogrammi. Memorizzano un ritardo per fotogramma, in centesimi di secondo, ed è qui che molte GIF finiscono per essere riprodotte alla velocità sbagliata.

L'aritmetica è semplice: ritardo = 100 ÷ i tuoi fps target.

  • 12 fps → ritardo 8 (0,08 s)
  • 10 fps → ritardo 10 (0,10 s)
  • 15 fps → ritardo 7 (arrotondato a 6,67)
  • 5 fps → ritardo 20 (0,20 s)

Due cose da sapere. Innanzitutto l'arrotondamento è reale: 15 fps non possono essere espressi esattamente, quindi il loop si sposta leggermente. Per tutto ciò in cui il tempismo conta, preferisci 10, 12,5, 20 o 25 fps, che dividono in modo netto. In secondo luogo, la maggior parte dei browser blocca silenziosamente i ritardi inferiori a 2 (0,02 s) fino a 10, quindi una GIF creata a 50 fps verrà riprodotta a 10 fps per la maggior parte degli spettatori, a cinque volte la dimensione del file e senza alcuna fluidità.

Passaggio 5: taglia le dimensioni, nell'ordine che funziona

If the file is still too big, apply these in order. Each one costs less quality per byte saved than the one after it.

  1. Riduci le dimensioni. Dimezzare la larghezza dimezza il numero di pixel. Una GIF di 480 pixel di larghezza va bene per la maggior parte dei contesti di incorporamento; 800+ sono raramente necessari.
  2. Elimina fotogrammi. Passare da 15 a 10 fps rimuove un terzo dei dati per un cambiamento che la maggior parte degli spettatori non registrerà.
  3. Abbrevia la clip. Ruthlessly. Quasi ogni GIF ha un secondo all'inizio o alla fine senza fare nulla.
  4. Riduci la tavolozza al di sotto di 256. 128 o anche 64 colori sono spesso invisibili sullo schermo e significativamente più piccoli.
  5. Disattiva il dithering se lo avevi e il contenuto può sopportarlo.

Nota che "comprimere più forte" non è nell'elenco. GIF's compression is lossless LZW — there is no quality dial. Tutto quello che puoi fare è decidere innanzitutto quali dati includere.

Quando non dovresti affatto creare una GIF

Vale dirlo chiaramente, perché fa risparmiare molto sforzo:

  • Qualsiasi cosa superiore a circa cinque secondi. Un MP4 o WebM sarà una frazione delle dimensioni con una qualità migliore. La maggior parte delle piattaforme che accettano "GIF" ora le convertono comunque in video internamente.
  • Contenuti fotografici con molte sfumature. 256 colori semplicemente non sono sufficienti, e nessun trucco con la tavolozza risolve il problema.
  • Tutto ciò che richiede audio. GIF non ne ha e il loop sembrerà sbagliato se la sorgente avesse un ritmo.
  • Tutto ciò che supera gli 800 pixel di larghezza. A quel punto la penalità dimensionale è abbastanza grave da far sì che il video sia la risposta corretta.

GIF trova il suo posto esattamente in una situazione: un ciclo breve, silenzioso, a riproduzione automatica che deve funzionare ovunque senza un lettore. Per questo è ancora imbattuto, a condizione che i frame da utilizzare siano stati scelti deliberatamente.

Un esempio pratico

Supponiamo che tu voglia una GIF di un Interazione dell'interfaccia utente di tre secondi da una registrazione dello schermo a 60 fps, inferiore a 1 MB.

  1. Ritaglia ai 3,2 secondi che contengono l'interazione, con l'ultimo fotogramma vicino al primo.
  2. Estratto in modalità FPS con N = 5: ogni quinto fotogramma di 60 fps dà 12 fps, circa 38 fotogrammi. PNG output.
  3. Assembla al ritardo 8, dithering disattivato (è contenuto dello schermo con colori piatti).
  4. Ridimensiona a 600 pixel di larghezza se la sorgente era più grande.
  5. Controlla il risultato. Circa 38 fotogrammi di contenuti semplici dell'interfaccia utente in genere sono ben al di sotto di 1 MB. In caso contrario, rilascia la tavolozza a 128 colori prima di toccare qualsiasi altra cosa.

Il tutto richiede pochi minuti e ogni passaggio è una decisione che hai preso piuttosto che un'impostazione predefinita che hai ereditato.