Using sprites to display responsive images

So far, our examples all have something in common: they work with individual images. This is fine for those that may only appear once or twice at the most, but what if they appear frequently throughout your site? It seems pointless to have to call them each time. Fortunately, we can get around this with the use of image sprites.

Note

For a discussion on how image sprites work, take a look at a useful article by Chris Coyier at http://css-tricks.com/css-sprites/.

For the uninitiated, image sprites are a way of combining lots of (ideally, small) images into one larger one then using CSS style rules to display the relevant part of that image. We typically might use background-position to position the image; using values in pixels, this works perfectly well. We can use the same principle with responsive sprites but with one key difference: we use percentage values instead, not pixels! Let's take a look at how to do it using some battery icons as an example:

1. Start by extracting a copy of imagesprites.html from the code download that accompanies this book. It contains some simple markup with <img> references to some battery icons that we will use in our demo.

   Note

   At this point, you may notice the long string of random characters—these are data URIs; they were generated using the responsive sprite image creator service at http://responsive-css.spritegen.com/. For now, it's enough to know that these are the images converted into a format that reduces the need to continually request images from the server.

2. In a separate file, add the following code, saving it as imagesprites.css in the css subfolder of our project folder:

   #demo img { display: block; margin: 1em auto; }
   
   .battery { background-position: 0 0%; background-size: 100%; }
   .battery-charge { background-position: 0 25%; background-size: 100%; }
   .battery-full { background-position: 0 50%; background-size: 100%; }
   .battery-half { background-position: 0 75%; background-size: 100%; }
   .battery-plug { background-position: 0 100%; background-size: 100%; }
   
   .battery, .battery-charge, .battery-full, .battery-half, .battery-plug
   { max-width: 100%; background-size: 100%; background-image: url('../img/index.png'); }

3. From the code download, extract a copy of index.png from the img folder. This is our sprite image that has been premade using the CSS Sprites service from earlier in this exercise. Save it in the img subfolder of the project folder. The battery icons used were from http://www.fatcow.com/free-icons. If you have others you would prefer to use, please alter the code accordingly.
4. If we preview the results, we should expect to see our responsive sprite image appear. If we resize the screen, it automatically updates the position of the image as shown in this screenshot:
   

However, there are some drawbacks that we need to be aware of when using this approach:

• If we try to decode the base64 URIs given in the code, it doesn't appear to produce a valid image—what gives?
• The use of long URIs in HTML makes it harder to read
• It makes it very difficult, if not impossible, to adapt this code for use with @media queries or to use retina-based images

To see how awkward it is and to see the resulting changes in code required to remove the use of data URIs from the HTML markup, take a look at imagesprites2.html and imagesprites2.css in the code download that accompanies this book. Notice how the CSS has significantly changed.

Let's change tack—a key concept of responsive design is to determine the available viewport we can use when displaying content. Let's see what this means, when working with images.