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 un video
I file GIF di grandi dimensioni non sono efficaci per la pubblicazione di contenuti animati. Convertendo le GIF di grandi dimensioni in video, puoi risparmiare notevolmente sui e la larghezza di banda. Potresti usare video MPEG4/WebM per le animazioni e i file 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
.
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
Sostituire l'immagine GIF con un video
Le GIF animate hanno tre caratteristiche chiave che un video deve replicare:
- Vengono riprodotti automaticamente.
- Riproducono in loop continuamente (di solito, ma è possibile impedirlo).
- Sono in silenzio.
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 GIF alla rete CDN delle immagini, che restituirà un video HTML5.
Indicazioni specifiche per stack
AMP
Per i contenuti animati, utilizza
amp-anim
per ridurre al minimo la CPU
quando i contenuti sono fuori schermo.