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 th...