1. Design & Illustration
  2. GIF

10 modi per ottimizzare una GIF animata

by
Read Time:8 minsLanguages:
This post is part of a series called Animation in Adobe Photoshop.
How to Create an Animated Pixel Art Sprite in Adobe Photoshop
Create Your Own Animated Pre-loader in Photoshop

Italian (Italiano) translation by Roberta C (you can also view the original English article)

GIF è il formato standard per la compressione di immagini con ampie aree di colore a tinta unita e dettagli nitidi come quelli dei loghi o della tipografia. Essendo un formato di immagine con profondità di 8 bit  sarebbe sparito dal web dopo l'introduzione dei formati JPEG e PNG, ma GIF è ancora un formato di file web favorito grazie alle sue proprietà di animazione. In questo tutorial, vedremo da vicino tutte le opzioni disponibili per convertire un video in un'animazione GIF e come ottimizzare le dimensioni del file. Iniziamo!

A proposito, se lavori spesso con gif animate, potrebbe esserti utile una soluzione automatizzata: l'azione di Photoshop Gift Export disponibile su Envato, che ti permette di prendere più immagini, caricarle automaticamente in Photoshop ed esportarle come GIF.


1. Tagliare l'animazione 

Prima di tutto è necessario aprire il file video con Photoshop. Per la maggior parte del tempo non avrai bisogno tutta la sequenza per l'animazione GIF, quindi è possibile tagliare il video nel pannello Timeline. Attiva l'opzione Loop e cerca di trovare un buon posto per ritagliare il video.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

2. Ridurre le dimensioni dell'immagine

Puoi ridurre le dimensioni dell'immagine dal menù Immagine o farlo più tardi da Salva per Web. Io preferisco farlo all'inizio dalla finestra di dialogo Dimensione Immagine, in quanto si risparmia una notevole quantità di tempo quando poi si apre la finestra Salva per Web. Il tuo livello video verrà trasformato in un Oggetto Avanzato se si ridimensiona l'immagine, ma non ti preoccupare, non influirà sul nostro lavoro.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

3. Salva per Web

La cosa che preferisco di questa opzione è che non dobbiamo fare alcuna conversione dal pannello Timeline per poter salvare un'animazione, Salva per Web farà tutto il lavoro per noi, una volta selezionato il formato di file GIF come output. Si noti che le opzioni di animazione verranno visualizzate nell'angolo inferiore destro della finestra di dialogo. Nel caso in cui si decida di ridurre ulteriormente le dimensioni dell'immagine si può farlo di nuovo da qui.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

4. Ridurre la quantità di fotogrammi

Puoi ulteriormente ridurre le dimensioni della GIF riaprendo di nuovo in Photoshop il file GIF esportato e cancellando ogni secondo o terzo fotogramma dal pannello Timeline.  Quindi dovresti selezionare tutti i fotogrammi rimanenti e aumentare la loro durata per compensare la perdita di fotogrammi. Se non fai questa compensazione l'animazione verrà riprodotta più velocemente rispetto all'originale. Una volta pronti, è possibile salvare la nuova versione, che dovrebbe essere molto più piccola rispetto all'originale.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

5. Numero di Colori

L'opzione più rilevante per ottimizzare le dimensioni di un file GIF è il numero di colori utilizzati nella tabella dei colori. La quantità massima di colori è 256, che proviene dalla limitazione di profondità di 8 bit. In generale è buona una palette con 64 colori o meno, ma a seconda del video originale potrebbe essere necessario aumentare il numero di colori per ottenere un risultato migliore.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

6. Quale Algoritmo di Riduzione Colore Scegliere?

  • Percettivo per creare una tabella colori personalizzata dando priorità ai colori ai quali l'occhio umano è una maggiormente sensibile.
  • Selettivo per creare una tabella colori simile a quella percettiva, ma favorendo ampie aree di colore e la preservazione dei colori per il Web. Questa tabella colori di solito produce immagini con la massima integrità del colore. (Selettiva è la scelta predefinita).
  • Adattivo per creare una tabella colori personalizzata a partire dai colori dello spettro che appaiono più comunemente nell'immagine. Ad esempio, un'immagine con solo sfumature di verde e blu produce una tabella di colore composta principalmente da verdi e azzurri. La maggior parte delle immagini concentrano i colori in particolari aree dello spettro.
  • Restrittiva utilizza lo standard 216‑colori, la tabella colori sicuri per il Web comune per i pannelli di Windows e Mac OS a 8 bit (256). Questa opzione garantisce che nessun browser dithering  venga applicato ai colori quando l'immagine viene visualizzata utilizzando il colore a 8 bit. Se l'immagine contiene meno di 216 colori, i colori inutilizzati vengono rimossi dalla tabella.
10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

7. Dithering

Poiché i file GIF contengono un numero limitato di colori, potremmo voler imitare i colori mancanti con quelli disponibili utilizzando il dithering. Dal menu "Dithering", scegliamo uno degli algoritmi per tale imitazione. Il metodo di "Diffusione" ci permette di regolare la quantità di dithering. Con gli algoritmi "Pattern" e "Rumore" non c'è niente di regolare. Maggiore è il dithering di un'immagine, più grande sarà la dimensione del file. Il dithering aggiunge pixel di colore diversi e prossimi per simulare i colori secondari o gradazioni omogenee nel colore. Alcune immagini devono contenere dithering per poter essere visualizzate bene, ma è meglio utilizzare la minor quantità di dithering possibile per mantenere i file di piccole dimensioni.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

8. Web Snap, Con Perdita di Dati, Trasparenza e Interlacciatura

  • Web Snap è usato per aiutare a prevenire il dithering di un browser. È fatto sostituendo alcuni dei colori con quelli Web-safe. Più saranno i colori Web-safe di un'immagine GIF, minore sarà il dithering del browser. Un valore pari a 0% non cambierà tutti i colori, mentre un valore di 100% cambierà tutti i colori nell'immagine con quelli Web-safe.
  • La compressione Lossy toglie informazione visiva, e può ridurre la dimensione del file.
  • Se l'immagine contiene una Trasparenza, selezionate trasparenza per mantenere i pixel trasparenti; deselezionate trasparenza per riempire i pixel trasparenti con un colore opaco.
  • I file GIF interlacciati vengono caricati da un browser in diversi passaggi (come il JPEG progressivo).


9. Confrontare le Versioni Originale e Ottimizzata

Una volta fatte le modifiche personalizzate è possibile controllare la differenza di dimensione del file e qualità utilizzando la vista a 2 finestre.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File

10. Anteprima, Salva Preset e Ottimizza la Dimensione del File

Se sei soddisfatto delle impostazioni dai un'occhiata alla GIF finale in un browser con l'opzione Anteprima e non dimenticare di salvare le impostazioni come predefinite. È inoltre possibile specificare un limite di dimensione file dal Menu Ottimizza e, una volta applicato, Photoshop cercherà di adattarsi a questa dimensione con la migliore qualità di immagine possibile.

10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File10 Ways to Optimize a GIF File
One subscription.
Unlimited Downloads.
Get unlimited downloads