Spritesheets, Spritesheets Everywhere

Here’s something fun to do if you’re ever feeling REALLY bored. Try searching for something on Google. Then, on the result page, use Chrome (or some other browser if you must) and inspect the images used on the page. You may be surprised to find that most of the images on the Google results page are contained in a single png like the one above.

That’s right! Where game developers may use sprite sheets to optimize their rendering, Google uses sprite sheets to optimize their results page. Sprite sheets on the web? What’s that all about?

In GPU terms, minimizing the number of textures used to draw a scene is important for speeding up rendering by minimizing the overhead of switching textures. Web browsers generally don’t have to worry about performance at that level, although NaCL is getting there.

Instead of packing images to improve rendering speed, high performance pages like Google’s search result page use sprite sheets to minimize the overhead of requesting multiple images from a server. Browsers and servers allow only a finite number of simultaneous requests. So, if you have to load a lot of files at once, it’s pretty likely you’ll have some images waiting for previous requests to finish before they even start loading.

This is similar to another common aspect in game development: minimizing load times. In order to reduce loading times, game engines often pack files into large collections of assets that can be read in all-at-once. For disc-based systems this is particularly important since seeking for a file on disc can be remarkably slow and having to jump from one sector of a disc to another can prevent the drive from spinning up to its highest speed. This packing of data into larger files is eerily similar to how the Google results page packs several images into a single file in order to avoid the overhead of starting requests for each individual asset.

For further ideas on how much of a difference sprite sheets can make for a website, especially for an HTML-based game, check out the this page.

With social games bringing a more web development-like mindset into game development, it’s kind of comforting to see classic game development techniques working their way into web development. While most sites probably won’t bother with the extra effort required to use CSS sprite sheets, some performance-conscious sites certainly will take advantage of them. Just look at this image from the Bing result page to see what I mean:

Looks kind of familiar, right?

Share this Article:
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Print