We have probably all noticed the improved performance of Google‘s recently “caffeine”-powered website. One thing I noticed right away is the use of CSS image sprites all ver its pages. I have looked into it and realized they are also using several themes based on image sprites, and more recently, the now-famous 30th anniversary PacMan game also used it together with advanced CSS and javascript techniques. You can see this on their new results page, as well as on the More Google Products page for the Google Apps icons. It is very much in line with the principles behind Caffeine, especially faster page loading times, which the new Google will consider when indexing your page.
Here are a few of the sprite images I found Google is using:
Related articles:
- CSS Sprites: Useful Technique, or Potential Nuisance? (tc.eserver.org)
- Google Started Ranking Websites Based on Website Speed (shoutmeloud.com)
- Google Caffeine: A Detailed Test of the New Google (mashable.com)
- A Google Icon Game for Pac-Man’s Birthday (blogoscoped.com)
2 Responses to “Google embraces CSS image sprites on its new website”
Hey, thanks for spotting those. The one in the middle was mine. We recently “upgraded” to a 24bit PNG for the column of sprites, it wasn’t actually a huge file size saving, but we make around 40 less server calls when the page loads, which really helps reduce page latency. I’d recommend spriting to anyone who’s keen to hone their pages.
Thanks for spotting that I spotted those
It’s small details like this that make the web a better place for everyone. Great work BTW, I had a look at your impressive portfolio. We are now working with several partners in the UK, so if you need anything, we’d be glad to assist you.