Google’s Sprite Image is a Thing of Beauty

Google Sprite changes over time:

If you want to know more about CSS sprites and how to put them together, feast your eyes on Google’s:

Here’s the history of Google’s PNG sprite image

Google's Sprite Image

http://www.google.com/images/nav_logo.png


Google's Sprite Image

http://www.google.com/images/nav_logo2.png


Google's Sprite Image

http://www.google.com/images/nav_logo3.png


Google's Sprite Image

http://www.google.com/images/nav_logo4.png


Google's Sprite Image

http://www.google.com/images/nav_logo5.png


Google's Sprite Image

http://www.google.com/images/nav_logo6.png


Google Image Sprite

http://www.google.com/images/nav_logo7.png


http://www.google.com/images/srpr/nav_logo8.png


http://www.google.com/images/srpr/nav_logo9.png



March 25, 2010 – http://www.google.com/images/srpr/nav_logo10.png



April 1, 2010 – http://www.google.com/images/srpr/nav_logo11.png



April 21, 2010 – http://www.google.com/images/srpr/nav_logo12.png



May 4, 2010 – http://www.google.com/images/srpr/nav_logo13.png


Google Sprite
July 2, 2010 – http://www.google.com/images/srpr/nav_logo14.png (Added a magnifying glass)


Google Sprite
July 16, 2010 – http://www.google.com/images/nav_logo15.png (Made logo bigger for Instant Search results layout)


Google Sprite
November 8, 2010 – http://www.google.com/images/nav_logo26.png (Added the Instant Preview images)


Google Sprite 27
November 15, 2010 – http://www.google.com/images/srpr/nav_logo27.png


Google Sprite 28
November 15, 2010 – http://www.google.com/images/nav_logo28.png


Google Sprite 29
November 16, 2010 – http://www.google.com/images/nav_logo29.png – seems to be color correction as well as logo size.


Google Sprite 34
January 14, 2011 – http://www.google.com/images/nav_logo34.png


Google Sprite 36
February 1, 2011 – http://www.google.com/images/nav_logo36.png – added star ratings and close x’s


Google Sprite 38
February 14, 2011 – http://www.google.com/images/nav_logo38.png – added another star


Google Sprite 39
March 24, 2011 – http://www.google.com/images/srpr/nav_logo39.png – added unhappy faces, hover state for happy face


Google Sprite 40
March 24, 2011 – http://www.google.com/images/nav_logo40.png


Google Sprite 41
April 09, 2011 – http://www.google.com/images/srpr/nav_logo41.png


You can’t get much more efficient than that…

Related posts:

  1. The Google +1 Sprite Animation
  2. How to prevent your Google background image from fading in slowly.
  3. Multiple Matte Colors for CSS Sprites

This entry was posted in CSS and tagged , , , , , , . Bookmark the permalink.
  • Pingback: Google Search Page with Styles Disabled Reveals CSS Sprites | False Positives

  • http://www.scrimshaw-photo.co.uk Sam Davies

    Hey,

    Check out the one I used on this site I built..

    http://www.ficr.com.au

    Although I stumbled across your blog searching for ‘image sprite SEO’ as I am concerned all the image replacement I have done is causing negative feedback from the google spiders….

    Sam

    • http://www.katzwebservices.com Zack Katz

      @Sam Davies: The sprite is good, but consider breaking it into multiple sprites. Too large a sprite can make your site appear to load slower rather than faster. Maybe consider having buttons, navigation, and text sprites. You’re still at only 3 requests, but the images will be smaller and will be loaded as available.

      In terms of search engines punishing you for it, they won’t; they’ll only punish you if you’re hiding spammy text in the text replacement.

  • http://www.facebook.com/profile.php?id=100000139686661 Arlo Barnes
    • http://www.seodenver.com Zack Katz

      Thanks – I also found a few more and have updated the page.

  • Miguel Angel Ambrosi

    How about this one: http://www.google.com.mx/options/i12.png

  • Miguel Angel Ambrosi

    How about this one: http://www.google.com.mx/options/i12.png

  • Pingback: Felipe Leiva » Optimizando la carga de nuestra web