Skip to main content

Posts

Showing posts from May, 2011

Martha Graham's Google doodle is not a video, is an image (a CSS sprite)

Today's Google doodle is featuring Martha Graham, an American modern dancer. The new doodle looks like a movie, but in fact it is only a CSS sprite.
The sprite is this one:  You may be wondering how is the animation/movie appearance achieved if it only uses this static image? 
The technique involves CSS sprites. A sprite is a composition of several images grouped together in order to reduce the number of required HTTP request to the server. This way a website with 50 images requires only one request for the large image composition. The entire doodle involves only one sprite, which speeds up loading a lot (compared to loading each frame separately). Google has used this technique to leverage data transfer from the servers and consequently make the animation load faster than a traditional video clip. 
So how is this sprite converted to an animation?
Pretend you are looking through pierced piece of paper, so that you can only look through the hole in the paper. Right behind the paper…