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:

Screenshot del controllo Utilizza formati video per i contenuti animati di Lighthouse

Perché dovresti sostituire le GIF animate con i 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 la 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 questo comando nella console:

ffmpeg -i my-animation.gif my-animation.mp4

In questo modo, FFmpeg prende my-animation.gif come input, indicato dal flag -i, e lo converte 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 è consigliabile generare entrambi i formati.

Per utilizzare FFmpeg per convertire my-animation.gif in un video WebM, esegui questo 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.
  • Vengono riprodotti in loop continuo (di solito, ma è possibile impedire il loop).
  • Sono silenziose.

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>

Utilizzare un servizio che converte le GIF in video HTML5

Molte CDN di immagini supportano la conversione da GIF a video HTML5. Carichi una GIF sulla CDN delle immagini e la CDN delle immagini 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 mentre i contenuti sono fuori dallo schermo.

Drupal

Potresti caricare la tua GIF su un servizio che la renda disponibile per l'incorporamento come video.

Risorse