31 December 2008

I just came across something that isn’t especially amazing or new, but I thought clever enough. I think Zeldman or ALA mentioned a technique like this some time ago for alternate img:hover states.

Google’s search pages load this 1 single image for their logo and all the UI parts and pieces, using CSS to crop the images as needed, which seems to me as 100% more efficient than managing a pool of tiny images.

Would’ve, should’ve, and likely will. Thanks Google.

Update 1/1: Google has a few more image sets, here, here, and here. I’m not sure if these are used somewhere else, or are just old sets.

Update 1/27: Dave Shea has more info and a few more examples of other sites that use this CSS sprite method with comments discussing pros and cons.