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 trickThe 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:
and the style like:
<img alt="" src="the-gif.gif">
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.
padding: 472px 396px 60px 140px;
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!