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.

By Post Author

Comments are closed.