Categories
CSS

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:

Then:
Google's Sprite Image

Now:
Google Sprite 107

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


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



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



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



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



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



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


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


Google Sprite 65
April 12, 2011 – http://www.google.com/images/nav_logo65.png


Google Sprite 70
May 05, 2011 – http://www.google.com/images/nav_logo70.png


Google Sprite 72
May 09, 2011 – http://www.google.com/images/nav_logo72.png


Google Sprite 79
July 15, 2011 – http://www.google.com/images/nav_logo79.png


Google Sprite 82
July 20, 2011 – http://www.google.com/images/nav_logo82.png


Google Sprite 83
July 29, 2011 – http://www.google.com/images/nav_logo83.png


Google Sprite 85
September 14, 2011 – http://www.google.com/images/nav_logo85.png


Google Sprite 86
September 14, 2011 – http://www.google.com/images/nav_logo86.png


Google Sprite 89
September 20, 2011 – http://www.google.com/images/nav_logo89.png


Google Sprite 91
October 9, 2011 – http://www.google.com/images/nav_logo91.png – Lightened some colors


Google Sprite 95
October 28, 2011 – http://www.google.com/images/nav_logo95.png – Added a tick sprite and down-arrow


Google Sprite 99
December 5, 2011 – http://www.google.com/images/nav_logo99.png


Google Sprite 100
December 7, 2011 – http://www.google.com/images/nav_logo100.png


Google Sprite 101
December 7, 2011 – http://www.google.com/images/nav_logo101.png – Added new window sprites


Google Sprite 102
January 26, 2012 – http://www.google.com/images/nav_logo102.png – Changed arrows to carat-style instead of triangles; removed button borders, added “return” sprite. Reduced logo drop shadow & thickness, This is the first of the new “unified” look.


Google Sprite 103
February 17, 2012 – http://www.google.com/images/nav_logo103.png – added G+1 red buttons


Google Sprite 104
February 24, 2012 – http://www.google.com/images/nav_logo104.png – added info circle


Google Sprite 105
March 03, 2012 – http://www.google.com/images/nav_logo105.png


Google Sprite 107
March 16, 2012 – http://www.google.com/images/nav_logo107.png


Google Sprite 110
May 02, 2012 – http://www.google.com/images/nav_logo110.png


Google Sprite 111
May 10, 2012 – http://www.google.com/images/nav_logo111.png


Google Sprite 113
June 11, 2012 – http://www.google.com/images/nav_logo113.png


Google Sprite 114
June 25, 2012 – http://www.google.com/images/nav_logo114.png

Sprite image 115

October 22, 2019 https://www.google.com/images/nav_logo115.png

You can’t get much more efficient than that…

By Zack Katz

Zack Katz is the founder of GravityKit and TrustedLogin. He lives in Leverett, Massachusetts with his wife Juniper.

10 replies on “Google's Sprite Image is a Thing of Beauty”

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

Comments are closed.