Use Image Sprites in Responsive Image Grids

This tutorial will show you how to use image sprites in the Responsive Image Grid.

An image sprite, or CSS sprite, is a single image that contains a collection of images. Using image sprite will reduce the server overhead of having to fetch multiple images.

HTML

Basically the markup is the same as described in the demo 1 except the image element. Instead of using the IMG tag for each gallery image, now we should use other tags such as SPAN or DIV that will use the image sprite as their background image. For example:

View full HTML source code

CSS

• Cell dimensions

  Each image in the image sprite is 260 * 217 (pixels). So the aspect ratio of each cell should be: 217 / 260 = 0.83461538. So we have the following style to let each grid cell know its dimensions:

  .rig-img { background-image:url(img/web-ui.jpg); height:0; padding-top:83.461538%; }

• Background-position

  The image sprite combines 16 images that are aligned vertically. Each grid cell will specify a different background-position by the following percentage calculation:

  ( 100 / (total num of images - 1) ) * Zero-based index num of the image in the sprite

  For example, to show the 3rd image, it is 100 / (16 - 1) * 2 = 13.333, so the background-position should be:

  <span class="rig-img" style="background-position:center 13.333%;"></span>

View full CSS source code