Image sprites are a staple of web design. They let designers gather all their frequently used interface images and icons all into one single image to be used throughout the site. This is done to reduce the overall image size (in terms of file size) but mainly to make the images load faster by getting all those pixels with fewer http requests. Putting all your images in a sprite also means using the sprite as a background image for all the elements that need it, which is as easy as assigning a class to an element. Sometimes as a web designer, I get curious to see how really big sites like Facebook, Google+, and Pinterest use sprites in the design of their sites (Twitter doesn’t use sprites, but rather a custom icon font). Then I start to think about how dramatically different the sprites I make look and work.
Here are the sprites of the sites, all of which use multiple sprites for different areas/pages of the site. For convenience, I have put each site’s sprites together on one big sprite (how cool is that?).
Facebook uses five main sprites for their pages as far as I could tell. The sprite that surprises me the most is the sprite in the upper right that has the giant gradient drop-down menus. Also, many of the icons on the site are just used as inline images and not as sprites at all.
Google also has five sprites, one of which is really tall, which is very close to how I make sprites (except I prefer horizontal, but it makes no difference). The other sprites are quite small and I would think they could combine them, as many similar images are used in different sprites.
Pinterest has just two sprites and they have included larger icons to cover all bases with retina and high density screens. I also love that their first image in their main sprite is a big ol’ Facebook icon. They also seem to have many duplicates especially with their logo (I spy two that are the same size and color).
Here are the five sprites I designed for nibl. I use minimal colors and have a sprite dedicated to social media and sharing. The two larger sprites at the bottom are complimentary and with their larger icons, I can reuse them all over the site.
Nests of Icons
I noticed that each of the sites uses a sprite that has all the images tucked away and fitting as close together as possible. Nesting the images almost touching makes the file size a bit smaller. I think there is a big trade-off in terms of using the sprite when all the images are right up against each other. For one thing, you need a fair amount of extra markup in order to compensate for all the images having no empty space around them. In order to use the sprite on a button that is larger than the icon itself, you would have to include the markup for the button and an extra element (maybe a pseudo ::before or ::after if you’re clever) with exact size of the part of the sprite you want to show. You then have to position that extra element to get it to fall where you want. It’s a bit of extra work, and it can easily make style sheets more messy and bloat your markup.
Space it Out
For the nibl sprite sheets, I maintain a healthy grid around my icons and images, which means I don’t have to result to extra elements. With enough room around my icons and careful sprite planning, I can use the sprite as a background image directly on the div or button that I need without an extra element. Since they are spaced out far enough the problem of seeing all the other images in the sprite showing up on the edges of the button is solved. In other words, the extra space allows me to isolate the image I need on larger elements.
Now it is true that my sprites are larger in file size than if they were tightly nested, but when you properly save and compress a .png file, all the extra transparent space is compressed to almost 0 kilobytes. So the difference in file size is mostly negligible, especially when paired the benefits of less markup. So will manually curating your sprites into perfect grids make sense for your project?
With nibl specifically, I have the luxury of getting more colors out of my sprites with the use of opacity. For example, my main sprite for nibl (top 3 icon rows) only uses a dark grey, white, and nibl orange for the color of the icons. With that dark grey, I can have all sorts of lighter greys just by adjusting the opacity value in my style sheet. That way I can use the same image for a normal state and for a hover state. This really only works if you have a white (or other appropriate) background color. This technique, however, could also be applied to heavily nested sprite sheets and would knock out the need for extra versions of each icon.
Let me know how you work with sprites…I’m always curious to see how designers handle the task.