Creating image sprites (Should know)

When building a large website, it is important to minimize the amount of images that a user has to download. This lowers the amount of HTTP requests that the browser needs to make and improves the loading time. Image sprites help you accomplish this by combining a group of images into a single image.

Sprites are a great way to group sets of icons or other similar graphics that are used in your template. If you are creating an interface for a bank, you may have icons for search, savings, checking, loans, advice, and more. Instead of saving these files individually, you can group them into a sprite to speed up the download.

In this recipe, we'll explain how to create an image sprite and how to make a Retina version. Then we'll add both versions to a test page using HTML and CSS.

Getting ready

To get started you'll want to gather four icons that are of the same size in your graphics editor. Look for icons that are large because your Retina image sprite will need to be 2x as large as the icons are displayed on screen. For our example, we'll be using icons that are 80 x 80 pixels.

How to do it...

1. First take the four images that you've collected and make sure that they are of the same size. Then create a new image that is 2x as tall and 2x as wide as each image (for 80 x 80 icons the new image would be 160 x 160). Place each icon in a quadrant of the new image so they fill the space. Save this image as a PNG inside the /images/ folder within the /retina/ folder with the filename [e-mail]. Then resize the image to 50 percent and save it as mySprite.png in the same folder.

   

2. Now we'll test the two versions of the sprites on a web page. Create an HTML document called spritesTest.html inside the /retina/ folder. Next, we'll add some CSS code to the basic HTML structure, using the measurements of a single one of your non-Retina icons (40 x 40 for this example). The background-size attribute should equal the full size of your small, non-Retina, sprite.

   <style>
   
   .icon {
     background: url(images/mysprite.png); 
     height: 40px;
     width: 40px;
   }
   .iconRetina {
     background: url(images/[e-mail]); 
     background-size: 80px 80px;
     height: 40px;
     width: 40px;
   }
   .icon1 {background-position: 0 0;}
   .icon2 {background-position: -40px 0;}
   .icon3 {background-position: 0 -40px;}
   .icon4 {background-position: -40px -40px;}
   
   </style>

3. This CSS code will let us set either regular or Retina icons depending on the class that we use. Now we'll add in the HTML code to display both the sprites so that we can compare them.

   <ul>
     <li class="icon icon1"></li>
     <li class="iconRetina icon2"></li>
     <li class="icon icon3"></li>
     <li class="iconRetina icon4"></li>
   </ul>

4. If you are working on a Retina device you will be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You will notice that icons 2 and 4 are much sharper than icons 1 and 3.

How it works...

Image sprites are large images that contain multiple smaller images. This image is then set to the background of an HTML element with a height and width equal to only one of the images in the sprite. This prevents all the images in the sprite from being displayed.

To determine which image in the sprite is displayed, background-position is changed. The first value of background-position is the X value and the second is the Y value. A negative X value slides the image to the left-hand side and a negative Y value slides the image up. To figure out the correct offset, count the number of pixels from the top-left corner (which is 0, 0) of your image to where the icon you'd like to display begins. Note that when any value in CSS is 0 you don't need to include px.

The Retina sprite works the same way, but the image is twice as large. To compensate for this difference, we set the background-size property to the dimensions of the smaller image. Now we have twice as many pixels inside of the same space for the Retina Display to create a sharp image.

There's more...

The background-size CSS property was added in CSS Version 3. This means it is not supported in older browsers such as Internet Explorer 7 and 8. In these browsers the background will be larger than intended, which is not ideal. To support these browsers, you'll want to only use Retina background images as part of a media query. We will cover this in more detail in the CSS Media Queries recipe.

Tips for creating image sprites

In our example we created an image sprite with four icons that were of the same size. This was only done for simplicity. When you create an image sprite for your website you can include images of all sizes. You might have two different sized sets of icons, a logo, graphics for a navigation menu, or backgrounds for tabs. When creating the sprite, it will save you time if you group similar sized images together so it will be easier to figure out the measurements for your CSS code.