La sezione Opportunità del report Lighthouse elenca tutte le GIF animate, insieme ai risparmi stimati in secondi ottenuti convertendo queste GIF in video:
Perché sostituire le GIF animate con i video
Le GIF di grandi dimensioni non sono efficaci per la pubblicazione di contenuti animati. Convertendo le GIF di grandi dimensioni in video, puoi risparmiare notevolmente sulla larghezza di banda utilizzata dagli utenti. Potresti usare video MPEG4/WebM per le animazioni e PNG/WebP per le immagini statiche anziché GIF per risparmiare byte di rete.
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 questo comando nella console:
ffmpeg -i my-animation.gif my-animation.mp4
Questo indica a FFmpeg di prendere my-animation.gif come input,
indicato dal flag -i,
e di convertirlo in un video chiamato my-animation.mp4.
Crea video WebM
I video WebM sono molto più piccoli dei video MP4, ma non tutti i browser supportano WebM, quindi ha senso generare entrambi.
Per utilizzare FFmpeg per convertire my-animation.gif in un video WebM,
esegui questo comando nella tua console:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Sostituisci l'immagine GIF con un video
Le GIF animate hanno tre caratteristiche chiave che un video deve essere replicato:
- Vengono riprodotti automaticamente.
- I loop vengono riprodotti in modo continuo (di solito, ma è possibile evitare che si ripetano).
- Sono silenziosi.
Fortunatamente, puoi ricreare questi comportamenti utilizzando l'elemento <video>.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
Usa un servizio che converte le GIF in video HTML5
Molte CDN immagine supportano la conversione di video da GIF a HTML5. Se carichi una GIF sulla CDN immagine, quest'ultima restituisce un video HTML5.
Indicazioni specifiche per lo stack
AMP
Per i contenuti animati, usa amp-anim per ridurre al minimo l'utilizzo di CPU quando i contenuti sono fuori schermo.