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

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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

---

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