Web Design: animated photos

Recently I found an interesting article on the Smashing Magazine about CSS, HTML and JavaScript tools. The thing that struck me was at the very end of the article and it was referring to a blog called From Me to You. The remarkable thing about it, is that the author creates animated photos. Let me explain to you by showing the following photo:

Look closely at the tomatoes: there are drops of water falling onto them. Now that's an animated gif, isn't it? It weights 218kb, which is a lot. However there's a trick in order to create those animated photos, by keeping the weight lower and thus not wasting bandwidth.

The trick

The trick is very simple and when I understood it, I immediately thought "Why didn't I think about it before?".
Basically we can use CSS to style an element (an img tag) with a background image attribute. The img tag will have a src with the animated gif. Something like:

<img alt="" src="the-gif.gif"> 

and the style like:

img {
     padding: 472px 396px 60px 140px;
     background:url(the-jpg.jpg) no-repeat;
}

The above code is explained by www.css-101.org. The difficult part of the process is the creation of the animated gif, which needs to fit perfectly on the jpg. A little glitch will be immediately noticed... however with some little tricks, we can create good results. Then we must be very careful with the padding in the style: the values will determine where the animated gif will stay.


Using the above solution, we can reduce dramatically the weight of animated gifs, while the resulting effect is surely impressive.

I hope you find the information useful. Happy coding to all of you!