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 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.

Risorse