Hai mai visto una GIF animata su un servizio come Imgur o Gfycat, ispezionata negli strumenti per sviluppatori per poi scoprire che la GIF era davvero un video? C'è un una buona ragione. Le GIF animate possono essere addirittura enorme.
Per fortuna, questa è una delle aree delle prestazioni di caricamento un po' di lavoro da dedicare alla realizzazione di grandi guadagni. Convertendo le GIF di grandi dimensioni in puoi risparmiare molto sui video larghezza di banda larga.
Misura prima
Usa Lighthouse per verificare la presenza di GIF da convertire in video sul tuo sito. Nella DevTools, fai clic sulla scheda Controlli e seleziona la casella di controllo Prestazioni. Poi esegui Lighthouse e controlla il report. Se sono presenti GIF che possono essere convertite, dovresti vedere il suggerimento formati video per contenuti animati"
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 il
questo comando nella tua console:
ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Questo indica a FFmpeg di prendere my-animation.gif come input, rappresentato dal
-i e convertirlo in un video con nome my-animation.mp4.
Il codificatore libx264 funziona solo con file che hanno dimensioni pari, come 320 px per 240 px. Se la GIF di input ha dimensioni strane, puoi includere un filtro di ritaglio evitare che FFmpeg generi un valore "height/width non divisibile per 2" errore:
ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4
Creare video WebM
Mentre MP4 esiste dal 1999, WebM è un formato file relativamente nuovo rilasciato inizialmente nel 2010. 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 questo comando
nella tua console:
ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm
Confronta la differenza
Il risparmio sui costi tra una GIF e un video può essere molto significativo.
In questo esempio, la GIF iniziale è di 3,7 MB, rispetto alla versione MP4, che è di 551 KB e la versione WebM, che è di soli 341 KB.
Sostituisci l'immagine GIF con un video
Le GIF animate hanno tre tratti principali che un video deve replicare:
- Vengono riprodotti automaticamente.
- Si loop continuamente (di solito, ma è possibile evitarlo).
- Sono in silenzio.
Fortunatamente, puoi ricreare questi comportamenti utilizzando l'elemento <video>.
<video autoplay loop muted playsinline></video>
Un elemento <video> con questi attributi viene riprodotto automaticamente, si ripete all'infinito
non riproduce l'audio, ma la riproduzione in linea (non a schermo intero),
comportamenti previsti per le GIF animate. 🎉
Infine, l'elemento <video> richiede uno o più elementi secondari <source>
puntano a diversi file video tra cui il browser può scegliere, a seconda
il supporto dei formati del browser. Fornisci sia WebM che MP4, in modo che se un browser
non supporta WebM, può tornare a MP4.
<video autoplay loop muted playsinline>
<source src="my-animation.webm" type="video/webm">
<source src="my-animation.mp4" type="video/mp4">
</video>
Effetto sulla visualizzazione più grande con contenuti (LCP)
Tieni presente che mentre gli elementi <img> sono candidati per LCP, gli elementi <video> senza un'immagine poster non sono candidati LCP. La soluzione nel caso dell'emulazione di GIF animate non è aggiungere l'attributo poster agli elementi <video>, perché l'immagine in questione rimarrà inutilizzata.
Che cosa significa per il tuo sito web? È consigliabile continuare a utilizzare un elemento <video> invece di una GIF animata, ma tenendo presente che questi contenuti multimediali non saranno candidati per la condizione LCP e verrà utilizzato il secondo candidato più grande. Poiché le GIF e i file <video> sono in genere più grandi e molto più lenti da scaricare, il passaggio a un candidato LCP diverso probabilmente migliorerà anche la metrica LCP del sito.