Ti è mai capitato di vedere una GIF animata su un servizio come Imgur o Gfycat, di ispezionarla nei tuoi strumenti di sviluppo e di scoprire che in realtà si trattava di un video? C'è un motivo valido. Le GIF animate possono essere molto grandi.
Fortunatamente, questa è una di quelle aree di prestazioni di caricamento in cui puoi fare relativamente poco per ottenere enormi vantaggi. Convertendo le GIF di grandi dimensioni in video, puoi risparmiare molto sulla larghezza di banda degli utenti.
Misura prima
Usa Lighthouse per verificare la presenza di GIF da convertire in video sul tuo sito. In DevTools, fai clic sulla scheda Controlli e seleziona la casella di controllo Rendimento. Quindi, esegui Lighthouse e controlla il report. Se hai GIF che possono essere convertite, dovresti visualizzare il suggerimento "Usa 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 indica a FFmpeg di prendere my-animation.gif come input, rappresentato dal flag
-i, e di convertirlo in un video chiamato my-animation.mp4.
Il codificatore libx264 funziona solo con file di dimensioni pari, come 320 x 240 px. 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
Creare video WebM
Sebbene il formato MP4 esista dal 1999, WebM è un formato file relativamente nuovo, inizialmente rilasciato nel 2010. I video WebM sono molto più piccoli dei video MP4, ma non tutti i browser supportano WebM, quindi ha senso generarli entrambi.
Per utilizzare FFmpeg per convertire my-animation.gif in un video WebM, esegui questo comando nella console:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Confronta la differenza
I risparmi sui costi tra una GIF e un video possono essere piuttosto significativi.
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 chiave che un video deve replicare:
- Vengono riprodotti automaticamente.
- Si loop continuamente (di solito, ma è possibile evitarlo).
- Sono silenziosi.
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 infinito, senza audio e in linea (ovvero non a schermo intero), tutti i comportamenti caratteristici 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 dei formati del browser. Fornisci sia WebM che MP4, in modo che se un browser
non supporta WebM, può tornare a MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Effetto sulla visualizzazione più grande con contenuti (LCP)
Tieni presente che, sebbene gli elementi <img> siano candidati per l'elemento LCP, gli elementi <video> senza un'immagine poster non sono candidati per l'elemento LCP. La soluzione nel caso dell'emulazione di GIF animate non è aggiungere l'attributo poster agli elementi <video>, perché l'immagine in questione rimarrà inutilizzata.
Che cosa significa per il tuo sito web? Il consiglio è di continuare a utilizzare un <video> anziché una GIF animata, ma tenendo presente che questi contenuti multimediali non saranno considerati candidati per l'LCP e verrà utilizzato il candidato più grande successivo. Poiché le GIF e i <video> sono in genere più grandi e quindi più lenti da scaricare, il passaggio a un'altra LCP candidata potrebbe persino migliorare la LCP del sito.