La sezione Opportunità del report Lighthouse elenca tutte le GIF animate, insieme al risparmio stimato in secondi ottenuto 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. Se converti le GIF di grandi dimensioni in video, puoi risparmiare molto sulla larghezza di banda degli utenti. Anziché il formato GIF potresti usare video MPEG4/WebM per le animazioni e PNG/WebP per le immagini statiche. In questo modo userai meno byte di rete.
Creare 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 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.
Creare video WebM
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 il seguente comando nella 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 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>
<source src="my-animation.webm" type="video/webm" />
<source src="my-animation.mp4" type="video/mp4" />
</video>
Utilizza un servizio che converte le GIF in video HTML5
Molte CDN di immagini supportano la conversione di video in GIF in HTML5. Carichi un'immagine GIF nella CDN di immagini, che restituirà un video HTML5.
Indicazioni specifiche per stack
AMP
Per i contenuti animati, usa
amp-anim per ridurre al minimo l'utilizzo di CPU
quando i contenuti sono fuori dallo schermo.
Drupal
Valuta la possibilità di caricare la GIF su un servizio che possa renderla disponibile per l'incorporamento come video.