About Image Sprites
Image sprites are images that consist of images inside them. Web designers often use image sprites because they decrease the load time of web pages, speed up the design process, and reduce clutter. Using CSS, you can define which part of the image sprite to display, also known as a sprite tween. This tutorial will explain how to create an image sprite and how to tween it with CSS.
Create an Image Sprite
When I create image sprites, I like to place my original images in the 1st row, my hover images in the 2nd row, and any other images in the rows to follow. Then, I begin a new column with each new image. So if I had 6 different images, each having an original and hover image, I would have a total of 12 images listed as a grid (6 columns and 2 rows).
Following this same example, the next thing to figure out is the height and width of each image. Your images do not have to be squares, but each image must have the same dimensions as the other images in the sprite. Let’s say I want each of my images to be 60 pixels in width by 60 pixels in height. Since I know that I have 6 columns, I need 360 pixels to be the total width of my image sprite (6 x 60). Likewise, since I have 2 rows, I know I want my sprite image to be 120 pixels in total height (2 x 60). Once you have your image sprite dimensions, all you need to do is add each image like a grid and save it.
Image Sprite Tweening in CSS
To create an image sprite tween, you just need to add few style attributes to an HTML element. First, create an HTML element with the class
.my-image. Next, in CSS, define the
background-image as the path to your sprite image. Set the
width attributes to match the dimensions of the images in your sprite. Then, set the
background-position attribute to decide which image is displayed.
background-position attribute will need 2 values to determine the position of the image to display. The first is the left position, and the second is the top position. Starting from the top left corner of the image sprite, decide which image you want to display by using the height and width of each image as increments. To display the Twitter logo, in the example below, I would use the
background-position:0 60px; for the original image. Then I would use
background-position:60px 60px for the hover image.
Here’s the code to perform the basic image tween.
High DPI Image Sprites
When you’re working with high DPI displays, like iPhone screens, using the original image can look blurry because it’s actually being stretched out to fit the device viewport. To remedy this, you can use a larger image and scale it down rather than allowing the device to upscale it.
In my example above, the image sprite was 360×120, for this example we are going to use the same image only bigger – 1800×600. Notice the image is the same proportions, it’s just scaled 5x larger. To use a high DPI image for your image sprites, all of the same rules apply except we will be adding the
Now for a little math. If we want to use the high DPI sprite, we need to maintain the same proportions but shrink the image, so here’s a simple formula.
- total columns × chosen width = x
- total rows × chosen height = y
The greater of x or y should be your background size in pixels. In our case, the formula equaled x or 360 (6 × 60). We just add
background-size:360px; and our image will resize the higher DPI image to match our scale.
Image Sprite Tween as a Sass Mixin
Now that you’ve got the basics down, let’s create a Sass mixin that does all of this for you. First, we need to create the mixin. A Sass mixin is basically a function that you can include anywhere in your SCSS. We want to be able to include this mixin so it will work for any image sprite and allow adjustments with ease. The mixin we’re creating has 6 parameters, or inputs, that define what the mixin will do.
The mixin is called
spriteTween() and it will later be accessible in SCSS by calling
@include spriteTween(). The 6 parameters define the width, height, column position, row position, column count, and row count. To use the mixin, you need to define these parameters. Just before you call the
spriteTween() mixin, you’ll need to define the background-image attribute so the mixin can use your image sprite. The code is listed below. If you want to skip this part, feel free, if not, I’ll explain how it works.
First, we define the incremental percentages
$rowPct. Since the position of the first image in our sprite is located at
0 0, we need to start from 0 rather than 1. To do this, we subtract 1 from each of the total number of columns and rows. We take these numbers and divide them by 100% to arrive at the incremental percentage. We will use this as our coordinate positions for each image.
Next, we get the input positions for the column selected and the row selected. We multiply these positions times the incremental percentages, defined above, to get the actual location to send to the
background-position attribute. Finally, there is a check for a high DPI image (see above). This defines
background-size to adjust for the proper image scale.
To use this mixin, first add the
background-image, then call it in SCSS and define the inputs. The nice thing about this mixin is that you can easily define multiple images at once without writing redundant SCSS. Note that the input positions for
$row must now be defined as coordinates. As before,
0 0 still points to the top left image, but now
0 1 will point to its hover state. Also,
1 0 points to the second original image, and
1 1 will point to the second image’s hover state… and so on. See the image below for more information.
Here’s the final code with the mixin.