Computer and Business Skills training

Sign Up
Home / HTML / HTML Sprite Sheets

Creating and Using a Sprite Sheet
in HTML and CSS - Part 1


Images are used all over a typical web page; for the logo, as icons, badges, buttons, and of course regular pictures. Some may have special effects such as rollover changes. A responsive page may swap out a smaller image with a larger one as the screen size increases, and vice versa.


Having all of these images can come at a cost, however. The browser has to go fetch each of these images the first time they're rendered. On network connections that are slower or have high latency, it may take some time for all the images to appear. There can also be a noticeable delay the first time a rollover is used. If a page's javascript is using window.onload instead of a DOM ready handler — such as jQuery's $(document).ready() function — there can be delays before the script starts.


Because of issues such as the above, particularly the rollover delay, a common technique was to use a preloading script that would fetch all the images before they were used. That way the image would already be available and the browser wouldn't need to fetch the rollover image when activating the effect. This technique has its advantages and disadvantages, but the main point is that it's not the only method available. If you have a lot of smaller graphics, like icons or buttons, it may be more optimal to use a sprite sheet instead.

Looking for HTML training class in Chicago or Los Angeles?


What's a Sprite Sheet?

The term sprite originated in 2D game design. A character to be animated had its animation drawn in cell-style frames. These frames were then consolidated into a single large image asset (the sprite sheet), as in this example:


sprite sheet

Image courtesy http://son-isaki.deviantart.com/art/ETA-Sprite-Sheet-Free-to-Use-416711648


The computer would then render the frames in rapid sequence just like in cell-based cartoon animation. The result was the character — called a sprite — appeared to be animated.


Using sprite sheets in web design


Web design applies the sprite sheet concept in a similar manner, just without the animation (most of the time, anyway). Instead of having dozens of small images that each require a round trip to the server to retrieve, all the graphics are placed onto a single large file like this one:


Courtesy http://www.wpzoom.com/wpzoom/new-freebie-wpzoom-developer-icon-set-154-free-icons/


The advantage to a sprite sheet over many separate smaller files is that the computer only needs to make a single request to the server to retrieve all of the icon image assets, instead of repeated smaller requests. Even though the single image is larger than the smaller separate files, the total retrieval time may be quicker depending on network latency.


In the example, each of the icons are 48x48px, evenly spaced. We need to know the offsets of each of the icon images we want to use. In Windows, we can open the PNG or JPG file in Paint and simply move the cursor crosshairs to line up with the top left corner of each icon. I've drawn some blue guidelines to illustrate what I'm referring to:


icons sample


In addition to the blue guidelines I also noted the x and y pixel offsets (from the top left corner of the image) for the icons I'll be using in this example. I wasn't too precise here, which is probaby why the numbers aren't at consistent intervals. Usually when making a sprite sheet like this one the icons will be evenly spaced, so calculating the offsets are much simpler.


Now that we know the offsets, we then have to set up a few classes in our CSS. The first class sets the background to the sprite map and defines the icon size:


.icon {
background: url('icons-punched.png') no-repeat;
width: 48px;
height: 48px;
display: inline-block;
}

Make sure those are proper single (or double) quotes, of course. Also note the display: inline-block setting. That's so the element you use as the container for the icon can have its width and height set but still be treated as inline content.


Next we define classes that adjust the position of the background for each specific icon we want to use:


.icon-facebook {
background-position: -80px -70px;
}
.icon-twitter {
background-position: -187px -70px;
}
.icon-envelope {
background-position: -80px -178px;
}

Notice that when we use background-position we use negative values for the x and y positioning. That's because when you set the positioning values, positive numbers move the item towards the opposite edge you're working from. So if you were to specify a positioning value of top: 50px, you're actually moving the item down (towards the bottom) by 50 pixels. A negative value has the opposite effect. So specifying left: -80px will actually move the item to the left 80 pixels. Specifying the x and y values of background-position as we did here is actually specifying the left and top edges respectively.


The last thing to do is to use these classes in our HTML. I'll use simple DIV elements here:


<div class="icon icon-facebook"></div> <div class="icon icon-twitter"></div> <div class="icon icon-envelope"></div>

This gives us the following in the browser:


browser sample


Pretty straightforward, huh?


we conclude with creating rollover effects and how to create your own sprite sheets.


You can learn more about this and other advanced techniques in our Advanced HTML/CSS course.


Related HTML/CSS Lessons

CSS specificity
Applying CSS to HTML


Onsite HTML/CSS training

Through our network of local trainers we deliver onsite HTML/CSS classes right across the country. Obtain a quotation for onsite HTML training.

To view a sample of our past students testimonials, please click on the following link: HTML training testimonials.


Why train with us?Need Group training quotation?Fresh Starbucks brewed every dayFREE Class Repeat with each course