Often times our designs carry elements like icons, image roll-overs, and decorated CTAs. CSS sprites come in very handy to achieve all those things.

This guide covers how to use CSS sprites, but before that we’ll also learn what is an image sprite and how to create one.

What is a CSS Sprite

We need to know about an image sprite before we start talking about CSS sprites. An image sprite is a compilation of different image assets that we want to use on our web application.

These images could fit in any of the below given cases…

  • Icon assets like social media, fancy bullets etc.
  • Different states for a button roll-over
  • A fixed background eg. a logo

After generating a spritesheet, we can use it further in our UI with the help of some simple CSS properties.

It’s also that using image sprites doesn’t fit in the modern-day web designer’s workflow. People now consider using icon fonts or SVG sprites rather than using CSS image sprites.

Why use CSS Sprites?

Whenever you open a website in your web browser, all its files eg. HTML, JavaScript, images etc. start to load up.

More the files, more will be the number of requests made to load the website in the browser.

More the requests, more will be the load time of the website. Now, this high load time is the enemy of UX and SEO.

Using separate images for site’s assets would result in increased number of requests. Therefore, we need to create a combined version of all those images files to cut down the number of request to one. Hence, the net load time would also improve.

This one combined PNG version of all those different images would be our image sprite. People also call an image sprite as spritesheet sometimes.

Individual images are for screenshots, photos, diagrams, graphs, avatars. PNG sprites are for non-repeatable backgrounds.

Summarizing the need of CSS sprites

  • Load time of a web page is proportional to the number of requests sent while loading
  • Most of the requests are in form of images
  • It is always better to have the number of requests on web as low as possible–to make a website load faster

How to create a PNG Sprite in Photoshop

Find it difficult to use Photoshop? Here are some easier alternatives.

I have 4 icons to demonstrate the sprite creation, each of 100×100 pixels dimensions. We are going to create a horizontal sprite image, i.e. a sprite in which the graphics flow from left to right.

  1. Import all the graphics in one PSD using File > Scripts > Load files into stack; choose files
    Loading files into stack in Photoshop
  2. Now, since we have 4 icons each of 100×100 pixels, select Image > Canvas Size and make the canvas width of 400px (4×100)
    Photoshop's Load layers screen
  3. Using the New Guide Layout option in the View, make a guide layout with the following settings
    Altering the canvas size in Photoshop
  4. Select “Move’; make sure “Snap” and “Snap To Document Bounds” are enabled
    Changing view's snap settings in Photoshop
  5. Align each icon accordingly by holding the shift key and the left mouse key
    Creating a new guide layout for CSS sprite in Photoshop
  6. Export the file as a PNG-28 image
    The final PNG / CSS sprite created in Photoshop

And we are done creating sprite. Here is how it looks like.

The code part

Let’s write some CSS first.

The sprite we created above relies completely on CSS background properties. The basic set-up goes as given below…

.sprite {
  background-image: url(/path/to/sprite.png);
  background-size: 400% 100%;
  background-repeat: no-repeat;
}

What we did above is set our sprite sheet as our icon’s background with CSS background properties. The catch here is to fit the icon part of the sprite to the icon element.

Since we have 4 icons in the sprite, the size of our icon element’s background should be 4-times the regular size, i.e. 400%.

But it still doesn’t make much sense unless it carries some size.

.sprite {
  background-image: url(/path/to/sprite.png);
  background-size: 400% 100%;
  background-repeat: no-repeat;
  width: 75px;
  height: 75px;
}

What about making it full-proof for smaller screens? Is doing a responsive CSS sprite possible? Let’s see what we can do.

.sprite {
  background-image: url(/path/to/sprite.png);
  background-size: 400% 100%;
  background-repeat: no-repeat;
  width: 75px;
  height: 75px;
  max-width: 100%;
}

We want a selector for each of our icons which could render the respective icon whenever it is used. We’ll be using CSS backround-position property to shift our PNG sprite to the right spot.

Now, what could be the right position for the cat, frog, lion, and the mouse icon? If we look for four equidistant values between 0 and 100, we’ll end up into these values: 0, 33.33, 66.66, 100.

The final CSS

Because our sprite image rolls from left to right, we don’t need to worry about the y-coordinate at all. All the four values that we calculated above will act as the x-coordinate for the positioning.

.sprite {
  background-image: url(/path/to/sprite.png);
  background-size: 400% 100%;
  background-repeat: no-repeat;
  width: 75px;
  height: 75px;
  max-width: 100%;
}

.sprite--cat {
  background-position: 0 0;
}

.sprite--frog {
  background-position: 33.333% 0;
}

.sprite--lion {
  background-position: 66.666% 0;
}

.sprite--mouse {
  background-position: 100% 0;
}

The HTML

The markup part is going to be simple, four divisions with CSS sprite classes to each. It’d look something like the below HTML.

<div class="sprite sprite--cat"></div>
<div class="sprite sprite--frog"></div>
<div class="sprite sprite--lion"></div>
<div class="sprite sprite--mouse"></div>

With the above markup and styles combined, here is how it looks like.

A rather prettier CSS Sprites demo

In conclusion

Wrapping up, that was our responsive CSS sprite sheet implementation. The demo works well on all modern web browsers, and of course on mobile phones too.

In case you are not so okay with the Photoshop part, here are some online CSS sprite generators to make it easy for you.

The above mentioned online services allow you to create PNG sprites hassle-free. You can upload your graphics on Spritegen and then save the graphic and code within a few moments.

On the other hand, Icomoon provides you with a variety of preloaded icons to choose from. After selecting icons, you can download the code and the sprite in a zipped archive.

Your precious thoughts, questions, and suggestions are always invited. Icons used in this article are provided by Freepik.

Read further