Ti è mai capitato di vedere una GIF animata su un servizio come Imgur o Gfycat, di ispezionarla negli strumenti di sviluppo e di scoprire che in realtà era un video? C'è un buon motivo per questo. Le GIF animate possono essere davvero enormi.
Per fortuna, questo è uno di quei casi in cui puoi fare relativamente poco lavoro per ottenere enormi vantaggi in termini di prestazioni di caricamento. Convertendo le GIF di grandi dimensioni in video, puoi risparmiare notevolmente sulla larghezza di banda degli utenti.
Misura prima
Utilizza Lighthouse per verificare se sul tuo sito sono presenti GIF che possono essere convertite in video. In DevTools, fai clic sulla scheda Audit e seleziona la casella di controllo Prestazioni. Poi esegui Lighthouse e controlla il report. Se sono presenti GIF che possono essere convertite, dovresti visualizzare un suggerimento per "Usare formati video per i contenuti animati":
Crea video MPEG
Esistono diversi modi per convertire le GIF in video.
FFmpeg è lo strumento utilizzato in questa guida.
Per utilizzare FFmpeg per convertire la GIF my-animation.gif in un video MP4, esegui il seguente comando nella console:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Questo comando indica a FFmpeg di utilizzare my-animation.gif come input, indicato dal
-i flag, e di convertirlo in un video chiamato my-animation.mp4.
Il codificatore libx264 funziona solo con i file con dimensioni pari, ad esempio 320 x 240 pixel. Se la GIF di input ha dimensioni dispari, puoi includere un filtro di ritaglio per evitare che FFmpeg generi un errore "altezza/larghezza non divisibile per 2":
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Crea video WebM
Sebbene l'MP4 esista dal 1999, il WebM è un formato di file relativamente nuovo, rilasciato inizialmente nel 2010. I video WebM sono molto più piccoli dei video MP4, ma non tutti i browser supportano il formato WebM, quindi è consigliabile generare entrambi.
Per utilizzare FFmpeg per convertire my-animation.gif in un video WebM, esegui il seguente comando nella console:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Confronta la differenza
Il risparmio sui costi tra una GIF e un video può essere piuttosto significativo.
In questo esempio, la GIF iniziale è di 3,7 MB, rispetto alla versione MP4, che è di 551 KB, e alla versione WebM, che è di soli 341 KB.
Sostituisci l'immagine GIF con un video
Le GIF animate hanno tre caratteristiche principali che un video deve replicare:
- Vengono riprodotte automaticamente.
- Vengono riprodotte in loop continuo (di solito, ma è possibile impedire il loop).
- Sono silenziose.
Fortunatamente, puoi ricreare questi comportamenti utilizzando l'elemento <video>.
<video autoplay loop muted playsinline></video>
Un elemento <video> con questi attributi viene riprodotto automaticamente, in loop continuo,
senza audio e in linea (ovvero non a schermo intero), tutti i comportamenti tipici
delle GIF animate. 🎉
Infine, l'elemento <video> richiede uno o più elementi secondari <source>
che rimandano a diversi file video tra cui il browser può scegliere, a seconda
del supporto del formato del browser. Fornisci sia WebM sia MP4, in modo che se un browser non supporta WebM, possa utilizzare MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Effetto su Largest Contentful Paint (LCP)
È importante notare che, sebbene gli elementi <img> siano candidati per LCP, gli elementi <video> senza un'immagine poster non sono candidati per LCP. La soluzione nel caso dell'emulazione delle GIF animate è non aggiungere l'attributo poster ai tuoi elementi <video>, perché l'immagine non verrà utilizzata.
Cosa significa questo per il tuo sito web? Ti consigliamo di continuare a utilizzare un elemento <video> anziché una GIF animata, ma tenendo presente che questi contenuti non saranno candidati per LCP e verrà utilizzato il candidato più grande successivo. Poiché le GIF e gli elementi <video> sono in genere più grandi e quindi più lenti da scaricare, il passaggio a un candidato LCP diverso probabilmente migliorerà persino l'LCP del sito.