Come si usa
- Trascina una GIF nell’area di rilascio, fai clic per sceglierne una oppure incolla un’immagine.
- Lascia Converti in su Mantieni originale e Larghezza massima su Dimensioni originali per conservare l’animazione.
- Controlla la dimensione originale e quella codificata: le GIF animate crescono in fretta.
- Copia l’output come tag img o background-image CSS, oppure prendi la versione data URI, Base64 puro o Markdown.
Il formato GIF
GIF (Graphics Interchange Format, tipo MIME image/gif) risale al 1987. Ogni fotogramma usa una palette di al massimo 256 colori, compressa senza perdita con LZW. La trasparenza è del tipo tutto o niente: una voce della palette può essere contrassegnata come trasparente, ma non esiste l’opacità parziale. Un file può contenere molti fotogrammi con ritardi individuali e un numero di ripetizioni, ed è per questo che GIF è diventato il formato delle brevi animazioni.
Il Base64 di una GIF inizia con R0lGODlh per la versione più diffusa GIF89a, oppure con R0lGODdh per la più vecchia GIF87a.
Conservare l’animazione
Se mantieni il formato originale, lo strumento codifica i byte del file così come sono. Il data URI si anima quindi esattamente come il file, sia che lo usi in un tag <img> sia come sfondo CSS.
La conversione in PNG, JPEG o WebP, o l’impostazione di una larghezza massima, ridisegna l’immagine nel browser e resta solo il primo fotogramma. È utile quando vuoi un’anteprima statica di un’animazione, ma per la versione animata lascia disattivate entrambe le opzioni.
Quando i data URI GIF hanno ancora senso
- Piccoli indicatori di caricamento e icone di stato animate nei CSS.
- Il classico pixel trasparente 1x1, usato come
srcsegnaposto. Occupa solo qualche decina di byte e ben meno di 100 caratteri Base64. - Disegni al tratto semplici con pochi colori, per i quali GIF è compatto.
Le animazioni grandi non sono adatte. Una GIF di reazione da 2 MB diventa circa 2,7 MB di testo che non può essere messo in cache separatamente; un file video ospitato online o un WebP animato è molto più leggero.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Domande frequenti
La mia GIF sarà ancora animata dopo la codifica Base64?
Sì, purché tu mantenga il formato originale e non la ridimensioni. Base64 memorizza il file completo, compresi tutti i fotogrammi e l’impostazione di ripetizione.
Perché la mia GIF ha smesso di muoversi dopo la conversione?
La conversione in PNG, JPEG o WebP, o il ridimensionamento, rielabora l’immagine partendo dal primo fotogramma. Lo strumento non può creare file PNG o WebP animati, quindi mantieni la GIF originale per conservare il movimento.