Qual È la Differenza tra una GIF e un Video?
Una GIF è un file immagine che contiene una serie di frame e un ritardo per ciascuno. Browser e app la mostrano come un'immagine: parte da sola, va in loop e non ha audio né controlli.
Un file video, come l'MP4, contiene frame compressi da un codec (di solito H.264) più una traccia audio opzionale. Un player lo mostra con i controlli per pausa, avanzamento e volume.
Quindi una GIF è un'animazione, ma non un video. Molti siti chiamano “GIF” i brevi loop senza audio anche quando distribuiscono file MP4, perché l'esperienza è la stessa.
Confronto Diretto
| Caratteristica | GIF | MP4 (H.264) |
|---|---|---|
| Compressione | Per frame (LZW, senza temporale) | Temporale (predizione inter-frame) |
| Colori | 256 per frame | 16,7 milioni |
| Dimensione animazione 5s | 3–10 MB | 200–500 KB |
| Risparmio tipico | — | 90–95% più piccolo |
| Audio | Nessuno | Opzionale (AAC) |
| Trasparenza | 1-bit (sì/no) | Non supportata (H.264) |
| Frame rate massimo | ~50 fps (di solito 10–15) | 60+ fps |
| Riproduzione automatica | Automatica (sempre) | Con attributi autoplay+muted |
| Loop | Flag loop integrato | Tramite attributo loop in HTML |
| Supporto browser | 100% (dal 1995) | 100% (video HTML5) |
| Supporto e-mail | La maggior parte dei client (vecchi Outlook: solo il primo frame) | Quasi nessuno |
| Punteggio Lighthouse | Segnalato come problema | Alternativa consigliata |
Perché la GIF È Così Inefficiente
La GIF è stata progettata nel 1987 per le immagini statiche. Il supporto alle animazioni fu aggiunto nel 1989 con GIF89a, ma la compressione non fu mai pensata per i contenuti in movimento. Ecco perché i file GIF sono enormi:
- Nessuna compressione temporale: ogni frame è memorizzato come un'immagine completa. Se hai 150 frame di un gatto che saluta, la GIF memorizza 150 immagini separate. Gli encoder possono saltare le aree invariate, ma tutto ciò che si muove viene memorizzato di nuovo in ogni frame.
- Limite di 256 colori: ogni frame può usare solo 256 colori da una palette. I contenuti fotografici richiedono il dithering (pattern di pixel per simulare i colori mancanti), che in realtà aumenta il peso del file perché i pattern dithered si comprimono male.
- Solo compressione LZW: la GIF usa solo la compressione spaziale (all'interno di ogni frame). L'MP4 usa sia la compressione spaziale che quella temporale (tra i frame), molto più efficiente per le animazioni.
L'MP4 con H.264 risolve tutti e tre i problemi: memorizza solo ciò che cambia tra i frame, supporta 16,7 milioni di colori e utilizza la compressione video più avanzata disponibile. Il risultato sono file 90–95% più piccoli con una qualità visiva migliore.
Impatto sulle Prestazioni Web
La differenza di prestazioni tra GIF e MP4 su un sito web è drammatica e misurabile:
| Metrica | Pagina con GIF da 5 MB | Pagina con MP4 da 400 KB |
|---|---|---|
| Tempo di caricamento (4G) | ~4 secondi | ~0,3 secondi |
| Tempo di caricamento (3G) | ~15 secondi | ~1,2 secondi |
| Banda per 100K visualizzazioni | 500 GB | 40 GB |
| Prestazioni Lighthouse | Avviso segnalato | Nessun problema |
| Impatto LCP | Significativo (ritarda il rendering) | Minimo |
| Consumo dati mobile | 5 MB per visita | 0,4 MB per visita |
Google Lighthouse
Il controllo Lighthouse di Google segnala esplicitamente le GIF animate con la raccomandazione: “Usa formati video per i contenuti animati.” Non è un suggerimento — è classificata come “opportunità” con il risparmio stimato visualizzato. Correggere questa segnalazione migliora direttamente il punteggio di performance.
Core Web Vitals
Una GIF di grandi dimensioni impatta due Core Web Vitals che Google usa per il ranking nei risultati di ricerca:
- Largest Contentful Paint (LCP): se la GIF è l'elemento più grande above the fold, ritarda l'LCP fino al download e alla decodifica completa della GIF. Una GIF da 5 MB su mobile può portare l'LCP oltre la soglia di 2,5 secondi.
- Cumulative Layout Shift (CLS): se le dimensioni della GIF non sono specificate, il layout della pagina si sposta quando la GIF viene caricata ed espansa alle sue dimensioni reali.
Come Sostituire la GIF con MP4 sul Tuo Sito
L'HTML per far comportare un MP4 esattamente come una GIF animata:
<video autoplay loop muted playsinline>
<source src="animation.mp4" type="video/mp4">
</video>
Ogni attributo ha uno scopo specifico:
autoplay— avvia la riproduzione automaticamente quando visibileloop— ricomincia quando arriva alla fine (come la GIF)muted— senza audio (richiesto da tutti i browser per il funzionamento dell'autoplay)playsinline— riproduce inline invece che a schermo intero su mobile Safari
L'esperienza utente è identica a quella di una GIF: l'animazione si avvia automaticamente, va in loop all'infinito e non produce suono. Ma il file è 10–20 volte più piccolo e la qualità è migliore.
Con fallback WebM per file ancora più piccoli
<video autoplay loop muted playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>
WebM (VP9) è tipicamente 20–30% più piccolo di MP4 (H.264). I browser che supportano WebM lo utilizzeranno; gli altri ricadranno su MP4. Entrambi hanno una copertura browser del 100% combinata.
Quando Continuare a Usare la GIF
Nonostante la sua inefficienza, la GIF è ancora la scelta giusta in situazioni specifiche:
E-mail marketing
I client di posta elettronica HTML hanno un supporto video quasi nullo. Nessun tag <video>, nessun autoplay, nessun MP4. La GIF è l'unico modo per includere contenuti animati nelle e-mail. La maggior parte dei client di posta riproduce la GIF animata; Outlook 2007–2019 per Windows mostra solo il primo frame. Non esiste alternativa per questo caso d'uso.
Piattaforme di messaggistica
Slack, Discord, Microsoft Teams e WhatsApp hanno funzionalità GIF dedicate con anteprima inline, ricerca (tramite GIPHY/Tenor) e rendering speciale. Caricare un MP4 su queste piattaforme funziona, ma non attiva la stessa esperienza GIF inline. Se la piattaforma si aspetta una GIF, usa la GIF.
Icone animate semplici ed elementi UI
Animazioni molto piccole e semplici (spinner di caricamento, segni di spunta, micro-interazioni) sotto i 50 KB sono accettabili come GIF. La differenza di dimensioni è trascurabile e la semplicità della GIF (nessun elemento <video> necessario, funziona nel tag <img>) la rende comoda per gli sviluppatori.
Requisiti di trasparenza
La GIF supporta la trasparenza a 1 bit (completamente trasparente o completamente opaco). L'MP4 H.264 non supporta affatto la trasparenza. Se hai bisogno di un'animazione sovrapposta su uno sfondo variabile, GIF o WebP/AVIF animati sono le tue opzioni. Nota che la trasparenza a 1 bit della GIF crea bordi frastagliati — per animazioni trasparenti smooth, WebM (VP9 alpha) è superiore.
Altri Formati Animati
| Formato | Dimensione (anim. 5s) | Colori | Trasparenza | Supporto Browser |
|---|---|---|---|---|
| GIF | 3–10 MB | 256 | 1-bit | 100% |
| MP4 (H.264) | 200–500 KB | 16,7M | No | 100% |
| WebM (VP9) | 150–400 KB | 16,7M | Canale alpha | ~96% |
| WebP animato | 500 KB–2 MB | 16,7M | Canale alpha | ~97% |
| Sequenza AVIF | 100–300 KB | 16,7M | Canale alpha | ~95% |
| APNG | 2–8 MB | 16,7M | Alpha completo | ~96% |
| Lottie (JSON) | 5–50 KB | Illimitati | Sì | Tramite libreria JS |
Miglior sostituto complessivo della GIF sul web: MP4 (H.264) — supporto universale, dimensioni file più piccole nella pratica, qualità eccellente. Aggiungi WebM come sorgente primaria per file ancora più piccoli.
Migliore per animazioni trasparenti: WebM (VP9 alpha) o WebP animato.
Migliore per animazioni vettoriali (icone, illustrazioni): Lottie — infinitamente scalabile, file incredibilmente piccoli, ma richiede un runtime JavaScript.
Checklist di Migrazione: da GIF a MP4
Se stai sostituendo le GIF su un sito esistente:
- Audit: trova tutte le GIF animate sul tuo sito. Controlla le dimensioni — concentrati prima sulle GIF oltre i 500 KB.
- Converti: usa il nostro convertitore o FFmpeg (
ffmpeg -i anim.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" output.mp4). - Sostituisci l'HTML: cambia
<img src="anim.gif">in<video autoplay loop muted playsinline>. - Aggiungi dimensioni: includi gli attributi
widtheheightsull'elemento video per evitare il layout shift (CLS). - Verifica: testa la riproduzione automatica su Chrome, Firefox, Safari e browser mobile.
- Misura: esegui Lighthouse prima e dopo per confermare il miglioramento delle prestazioni.
Come Trasformare una GIF in un Video (e Viceversa)
Da GIF a MP4 (questa pagina)
- Carica la GIF nel convertitore qui sopra.
- Converti. Ogni frame viene mantenuto e codificato in H.264 (CRF 23, ottimizzato per le animazioni) in un MP4 predisposto per avviare la riproduzione prima del download completo.
- Scarica l'MP4. Non ha traccia audio, perché le GIF non ne hanno.
Da video a GIF
Usa il convertitore MP4 in GIF. Conserva i primi 30 secondi a 480 px di larghezza e 10 frame al secondo.
FFmpeg
Il comando GIF in MP4 usato qui: ffmpeg -i input.gif -movflags +faststart -pix_fmt yuv420p -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" -c:v libx264 -crf 23 -tune animation output.mp4. Il filtro scale arrotonda larghezza e altezza a numeri pari, come richiesto da H.264 con questo formato pixel.