Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Team Think Labs | CSS Sprite Sheets
single,single-post,postid-861,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive

CSS Sprite Sheets

I was working with a client on a small website and one of their requirements was that all buttons needed to be in a sprite sheet. I’ve never had that requirement before, so I was interested to find out why this was necessary. Turns out there are several good reasons to use CSS sprite sheets.

The first reason has to do with page loading speed. When a webpage loads, it has to download all assets that are required to display the page correctly. A lot of those assets are images, and for each image the browser has to request that asset from its host. So say you have 20 images, then the browser has to send and receive 20 different assets. But if you took all of those images and put them into one image (sprite sheet), you would save 19 requests for your page. Granted you’re loading one big image now instead of 20, so the load time isn’t 19x better, but it will be significantly faster. The best way to use sprite sheets is for buttons, or items that have multiple states.

The reason that buttons are the best case for sprite sheets is because when that sprite loads, it has loaded all the states for that button. So when the user rolls over a button, they won’t see a blank spot while the hover state image loads, the other state will have already been loaded with the sprite sheet. So not only are you saving HTTP requests, but you’re getting a better site experience for the end user. But enough talk of the benefits, lets see how to create and use sprite sheets.

Let’s take a look at the code first to understand how it works. If you have a sprite sheet ready to go, load it as the background image of your object. Then for another state, move the background-position property to line up with the preferred state. If you view the attached example, you’ll see this code.

  background-image: url("./images/myButtonSpriteSheet.png");
  background-position: 0px 0px;
  width: 150px;
  height: 40px;
  background-position: 0px -40px;

So now you’re only loading in one image instead of 2 individual images. Also something to notice is myButton.png is 5.9kB, myButtonHover.png is 6.9kB, so together they are 12.8kBs. myButtonSpriteSheet.png is only 11.8kBs. Not much of a difference with these 2 small buttons, but think about doing this across your entire site. Now you’ve seen the code, let’s create the image.

There are a couple ways you could do them. One way would be to use Photoshop to cut and paste each one of your images into one canvas and save as a single image. Then find the x and y offset for each image to place in your CSS code, (which is what I did for the attached example). There are also other tools that have been created that help this process. The first tool is perfect to use if you already have a website created and you want to utilize sprite sheets. It’s called SpriteMe, and is a javascript app that you can add to your bookmarks and click to run on any website.

SpriteMe will actually generate the image for you, and give you the updated css file for you to use! Quite handy. The second option is if you’re in the process of building your website and you have the images already done you can download TexturePacker. This program allows you to load in multiple images, or folders of images, and combine them into a sprite sheet. Texture packer even has the option of saving a data file, in this case CSS, that has all the information ready for using the generated sprite sheet.

Here’s the example files that I put together. Buttons were created using ButtonBuilder that Eric Smith posted about previously here.

Example Files:  CSS Sprite Sheets

Note: I don’t condone inline CSS, this is for example purposes only. :-)