Leggerai questo articolo in: 2 minuti

Ieri per la sezione Ispirazione vi ho segnalato questo articolo, una bellissima raccolta del fotografo Jamie Beck. Come promesso, oggi vi svelo come queste vengono realizzate ed alcune ottimizzazioni su di esse.

Sicuramente avrete intuito che stiamo parlando di gif animate.

Come si crea una gif animata?

Una gif animata non è altro che una serie di immagini mostrate in sequenza, diciamo che il principio di realizzazione non è diverso da quello usato quando si creano i cartoni animati.

L’idea fondamentalmente è quella di creare diversi fotogrammi fatti di immagini statiche, diversificati da piccole variazioni che riunite in successione creano l’effetto movimento.

Come creare una gif animata

Per realizzare una gif animata avremo bisogno di un software di fotoritocco come ad esempio Photoshop.

Potete quindi immaginare la pazienza, la bravura e la fantasia di chi si cimenta in un lavoro del genere. A tal proposito dovreste apprezzare ancora di più le fotografie di Jamie Beck.

Piuttosto che sulla realizzazione di queste immagini, quello su cui vorrei soffermarmi è un modo per ottimizzarle sul web.

Come si ottimizza una gif animata?

Per immagini complesse, se si vuole creare un qualche effetto, sicuramente le dimensioni del file saranno consistenti, se aggiungiamo il fatto che dovranno essere mostrate su di un sito, andiamo incontro ad un problema.

Grosse immagini animate e tempi di caricamento sul web non vanno molto d’accordo!

Ottimizzazione immagini gif animate

Per caso ho scoperto la tecnica che viene adottata quando queste fotografie vengono mostrate sul web, per ridurre i tempi di caricamento.

Diciamo che l’idea è quella di non avere un’unica gif animata, ma bensì, dividere la parte animata da quella statica.

Successivamente attraverso i css andare poi a ricomporre l’immagine.

Codice Html:

1
<img width="500" height="700" alt="" src="the-gif.gif">

Codice Css:

1
img {background:url(the-jpg.jpg) no-repeat;}

Ovvero, andremo a sovrapporre la gif animata all’immagine statica!

Per capire meglio

Questa è l’immagine originale così come si può vedere su fromme-toyou. Il suo peso è 387.5 kb.

Se noi ora andiamo a ritagliare questa immagine escludendo la parte animata, otteniamo un peso di 152.7 kb.

La nostra parte animata peso di 66.7 kb.

Così facendo la nostra immagine animata passa da 387,5 kb a 219,4 kb ovvero andiamo a risparmiare 173,1 Kb.

A fronte di una singola immagine può sembrare nulla, immagina quanto si possa guadagnare in termini di peso su una serie di immagini animate così ottimizzate grazie all’uso del css.

Ti è piaciuto questo articolo? Non dimenticare id condividerlo con i tuoi amici!

[adsense]