Convertire GIF in video HTML5 per ridurre le dimensioni mantenendo alta la qualità

Condividi

SOMMARIO ARTICOLOle immagini in formato GIF sono molto utilizzate, o quantomeno vorremmo poterle utilizzare spesso rispetto alle immagini statiche. Il problema principale di questo formato riguarda la pesantezza del file, con conseguente rallentamento nel caricamento delle pagine. Vediamo dunque come convertire gif in video mediante l’utilizzo di HTML5, risparmiando fino al 98% nelle dimensioni pur mantenendo inalterata la qualità dell’immagine.

Vogliamo prendere spunto da un recente post pubblicato da Jeremy Wagner sulla guida developers di Google per riassumere un pò la questione riguardante le GIF, la pesantezza e la qualità.

Ebbene, sappiamo quanto le GIF animate siano spesso preferibili alle immagini statiche. Non solo per la facilità di realizzazione, quanto anche per la dinamicità che offrono rispetto ad una noiosa immagine statica, oltre che alla funzionalità cross-browser.

Consideriamo però che, per fortuna, il web continua ad evolversi così come ogni cosa sulla terra e ad oggi possiamo affermare che in quanto ad animazioni le GIF sono decisamente limitate rispetto ai tanti altri formati che abbiamo a disposizione. Questo non solo per il limite di 256 colori, ma anche (e soprattutto) per il problema che le GIF attualmente non sfruttano le tante nuove tecnologie che il web ci offre.

Questo porta alla conseguenza di uno dei problemi più grossi delle GIF animate, la pesantezza. Pochi secondi di animazione possono arrivare a far pesare l’immagine parecchi megabytes, con conseguente rallentamento nelle pagine web.


Ecco perchè anche i tanti strumenti online che offrono la riduzione di dimensioni delle GIF animate si appoggiano al linguaggio HTML5, riducendo il file di parecchio, mantenendo la qualità alta e migliorandone anche la fluidità della riproduzione.

Convertire GIF in video

Andiamo a vedere nel dettaglio alcune delle principali tecniche che ci consentiranno di utilizzare il linguaggio HTML5 in sostituzione delle GIF. Vedremo come convertire gif in video ed utilizzarli nelle nostre pagine web, esamineremo anche i pro ed i contro, quindi partiamo subito.

Per prima cosa dobbiamo convertire i file GIF in formato video e dato che il formato MP4 è attualmente quello più supportato dalla maggior parte dei browser ci rifaremo a questa impostazione.

convertire gif in video

Possiamo anche scegliere il formato webM, unico problema di quest’ultimo è la compatibilità con alcuni browser. Possiamo comunque sfruttare la proprieta <video> che supporta risorse multiple, quindi rimandare al formato webM per i browser che lo supportano mentre utilizzare il formato MP4 per tutti gli altri.

Convertire gif in video online

Esistono diverse possibilità per convertire una GIF in video, una di queste riguarda i servizi online; alcuni dei migliori sono ezgif, che però al momento sembra non supportare il formato webM. Un altro strumento online parecchio funzionale è convertio, che non solo supporta sia MP4 che webM, ma ha parecchi altri formati a disposizione.

Convertire gif in video con ffmpeg

Ffmpeg è uno strumento open-source gratuito, disponibile sia per Windows, Mac e Linux, molto utilizzato non solo per la conversione da gif a video, ma anche per l’elaborazione di files multimediali. ffmpeg funziona con il terminale, quindi se non lo avete installato sul vostro sistema vi consiglio di farlo. Le istruzioni sono reperibili direttamente sul sito del produttore.

Una volta installato eseguite il seguente comando sul terminale

which ffmpeg

Dovreste ricevere l’avviso seguente

/usr/bin/ffmpeg

Convertire gif in MP4

Una volta installato ffmpeg per convertire la tua gif in formato mp4 ti basterà aprire il terminale ed eseguire il seguente comando, ricordati di sostituire il-mio-file.gif ed il-mio-file.mp4 con il nome della tua immagine GIF ed il nome del file mp4 che desideri dare al tuo video.

ffmpeg -i il-mio-file.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p il-mio-file.mp4

Puoi anche includere un filtro crop per file che sono di dimensioni superiori ai 320×240 px, ovvero le dimensioni supportate dall’encoder libx264

ffmpeg -i il-mio-file.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p il-mio-file.mp4

Convertire gif in webM

Per convertire gif nel formato webM con ffmpeg utilizza il seguente comando :

ffmpeg -i il-mio-file.gif -c vp9 -b:v 0 -crf 41 il-mio-file.webm

Includere il video in una pagina web

Una volta convertita la tua GIF in video puoi includerla in una qualsiasi pagina web grazie all’elemento <video> . Considerando le caratteristiche di una gif, ovvero l’autoplay, l’assenza di audio ed il loop continuo possiamo riproporre le stesse caratteristiche assegnando le varianti autoplay loop muted e playsinline

<video autoplay loop muted playsinline></video>

E, come accennato in precedenza, possiamo includere sia la versione in MP4 che quella in webM dando istruzioni di far avviare il formato adatto in base al browser di navigazione :

<video autoplay loop muted playsinline>
  <source src="il-mio-file.webm" type="video/webm">
  <source src="il-mio-file.mp4" type="video/mp4">
</video>

E buona fortuna!

Informazioni Autore

Salvatore Maniscalco

Designer, sviluppatore, creativo. Nel settore della comunicazione dal 2008, gestisce i progetti con l'entusiasmo del primo giorno. Appassionato di scrittura, lettura e musica. Contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo