Come velocizzare le pagine web con immagini animate in GIF.

Come ottimizzare le immagini in formato GIF convertendole in video MP4 rendendole identiche a una animazione in GIF ma più leggere del 95%.

Il formato GIF è nato nel 1987 e originariamente non fu pensato per creare delle animazioni ma ben presto è questo l'utilizzo quasi esclusivo che ne viene fatto nella rete.

Si tratta di un formato molto semplice da utilizzare ma anche molto pesante basti pensare che una animazione in formato GIF di pochi secondi pesa almeno 2MB, 3MB o anche di più. Da qualche tempo anche Facebook e Twitter oltre a Google+ supportano questo formato ma in realtà le cose come vedremo stanno diversamente.

Le immagini in formato GIF possono essere ottimizzate utilizzando il plugin RIOT per Gimp o XnView ma si tratta di risparmi modesti in termini proporzionali. Inoltre l'ottimizzazione avviene con il metodo lossy vale a dire perdendo qualità nella animazione che potrebbe risultare sgranata.

Come alternativa si possono mostrare dei video in loop in formato MP4 al posto delle GIF che avranno lo stesso effetto delle animazioni. Il procedimento è il seguente:

1. Si converte la GIF in MP4 utilizzando dei software convertitori quali Format Factory, iWisoft Free Video Converter oppure applicazioni online come GIF to MP4 o Convertio.
2. Si utilizza il tag <video> del linguaggio HTML5 per mostrare l'animazione.

Facciamo un esempio pratico. Con questo codice

<img src="URL_IMMAGINE.gif" width="650" height="271" />

si può pubblicare una GIF in una pagina web. Ecco il risultato
 
 

L'immagine ha una pesantezza di 2,99MB. La GIF per essere pubblicata va postata per esempio su Google Foto per ricavarne l'URL diretto da sostituire a URL_IMMAGINE.gif del codice. Gli altri parametri in rosso sono la larghezza e l'altezza e possono essere personalizzati a piacere.

Se questa GIF la convertiamo in un video MP4 si otterrà un video pesante solo 148KB cioè il 95% più leggero della immagine in formato GIF. Tale video può essere caricato su Google Sites, su Dropbox o su Google Drive per ottenerne il link di download che può essere usato in questo codice

<video autoplay="autoplay" loop="loop" width="400" height="300">   <source src="URL_DOWNLOAD.mp4" type="video/mp4" />   <img src="URL_IMMAGINE.gif" width="400" height="300" /></video>

in cui oltre a scegliere le dimensioni si debbono incollare gli URL diretti o di download del video MP4 e della immagine in GIF. Con questo codice verrà mostrato il video in loop senza che siano visibili i controlli del player e quindi con un risultato del tutto identico a una immagine in GIF.

L'inserimento dell'indirizzo della immagine in GIF serve solo per aprirla nel caso in cui il browser di chi apre la pagina non supportasse il linguaggio HTML5 ma si tratta di una eventualità sempre più rara. Questa operazione viene fatta anche da Facebook e Twitter quando vengono pubblicate immagini animate in GIF. I due social per velocizzare i loro siti le convertono in video HTML5 anche se agli utenti appaiono come fossero immagini in GIF.

Ecco come viene mostrato il filmato MP4 che si ottiene dalla GIF precedente

Come vedete non si trovano differenze ed è questa la scelta migliore da fare quando si decide di pubblicare una immagine animata in formato GIF. Il codice precedente può essere usato anche per mostrare la GIF (o meglio il video MP4) in un widget HTML/Javascript di Blogger.

AGGIORNAMENTO: Il codice funziona in generale ma non viene più supportato da Blogger nativamente. Per visualizzare il video occorre cliccarci sopra con il destro del mouse per poi scegliere Visualizza comandi e poi cliccare sulla icona del Play. I player  HTML5 con i tag <audio> e <video> non vengono più riprodotti in automatico

Per adattare la larghezza della GIF ai dispositivi mobili si possono seguire le istruzioni del post

Come rendere responsive i video per la visualizzazione da mobile.