Utilizzare formati video per i contenuti animati

La sezione Opportunità del report Lighthouse elenca tutte le GIF animate, insieme al risparmio stimato in secondi ottenuto convertendo queste GIF in video:

Uno screenshot del controllo Usa i formati video per i contenuti animati di Lighthouse

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.

Risorse