I recently ran into an interesting CSS Sprite. It contains what appears to be all of a web app’s site’s icons. What was interesting was the fact that it’s a 32 Bit PNG at 1500 x 1500 pixels- many of which are empty. Here’s what it looks like shrunk down for easy consumption and the empty space colored pink for emphasis.

As you can see there’s an awful lot of empty space. It’s mostly empty space. Between the huge dimensions and the empty space at how they would affect memory usage and front end performance.

I did a couple of tests. One was looking at the memory footprint of five sample pages in Chrome and the other was measuring download times with WebPageTest.

I’ll go through each of the variations I tried and then we’ll look at the results.

Won’t that be fun?

Read the rest of this entry »