via the flickr page of schoschie comes the interesting discovery that Google is using a CSS sprite on it’s Google search pages :
I had left styles disabled by accident (from the Develop menu in Safari 4) and was surprised to see that Google apparently uses CSS sprites on its search page.
So, what are these “elf’s” you talk of and why is this important?
In “Olden” video game days, to reduce the memory load, the game developers used to place all the small images and graphics in one common image. If a particular image needs to be shown, then only the portion of the common image containing that particular image will be revealed while the rest will be masked. Much more details over on wikipedia Sprite (computer graphics).
Today, of course we have the web and all this powerful hard to throw at problems. “We don’t need no optimization!!” Do we? Sadly we do need at least some.
Take a look at this Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests from the Yahoo! User Interface Blog. Conclusion :
popular web sites spend between 5% and 38% of the time downloading the HTML document. The other 62% to 95% of the time is spent making HTTP requests to fetch all the components in that HTML document (i.e. images, scripts, and stylesheets). The impact of having many components in the page is exacerbated by the fact that browsers download only two or four components in parallel per hostname, depending on the HTTP version of the response and the user’s browser. Our experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.
in 2005 an article, on a List Apart, alerted us (okay: me!) to the use of Spirts CSS Sprites: Image Slicing’s Kiss of Death, where it revived the sprite technique of old into new and shinny css sprites, taking advantage of the background-position CSS property to show only part of the large common image.
This has two advantages :
- reducing HTTP requests (as noted in the YUI post)
- reducing the over all file size!!  All image formats have a certain amount of overhead, and the more images you have , the more quickly that overhead adds up.
Links to check out for creating your own CSS Sprites :CSS Sprites Generator and Project Fondue CSS Sprite Generator
So back to Google! This is the Sprite that they are using located at http://www.google.com/images/nav_logo4.png:
.
By my rough count that’s 38 sub images!! (and, yes there are logo3, logo2 and logo png files). the original logo png file was 4.94 KB (5063 bytes) and 4 images, the current one is 6.95 KB (7121 bytes) and ten times the number of images for 2k of files and still only one http request!
I’ll leave it as an exercise to what the css might look like, but the important point is Google use of CSS sprite makes it that much easy to justify. (“see boss/client, this is the way Google does it!”) In the same way the Google using Ajax in Gmail started the mainstream of that technique!
Interesting that this is not the first person to notice Google use of CSS Sprites, see Google’s Sprite Image is a Thing of Beauty from last year (june 2008) about the history of Google’s evolving PNG sprite image.
Update : if your are serious about making your web pages fast really read and think about Best Practices for Speeding Up Your Web Site, and read Dave Shea (mezzoblue) about Sprite Optimization
Update April 2009 : Chris Brainard (aka Flowering Mind) has released a Sprite Creator which reduces some of the time consuming and tedious work of building the css that refers into your CSS Sprite image. Via Ajaxian.
For the last few weeks three lines showed up below the search page title. The ” + – x ” boxes must have been misaligned by one pixel. That’s how I discovered the sprite. They seem to have fixed it now.
Pingback: New google sprite: July 2009 » malcolm coles