Websites these days not only have to beautifully designed, they also need to be fast. One great way to speed up your sites is to make use of CSS sprites

In this guide we will create a CSS sprite, similar to this
Creating Css Sprites.png

Step 1: Collect Background Images

First, look at your site and save all images that appear on every page e.g. Social Media buttons, logos, promotional banners and so on. Store them in a folder that is easy to locate

Step 2: Head Over To WeAreKiss (Sprite Generator)

Go to http://wearekiss.com/spritepad. Create an account or you will be unable to store your sprite, which is critical

Next, open the blank sprite page and drag and drop all images that we stored in step 1 onto the blank box:

Drag And Drop Css Sprite Creation.png

The images will all be on top of each other, so you need to re-arrange them.

Make sure to not waste too much space. An average website will have enough images to cover most of the white space.

Step 3: Download And DIV Creation

Simply hit the Download button and you will receive a sprites.png and sprites.css

1. Open Photoshop and save the sprites.png “for web” CTRL + ALT + SHIFT + S . Change the JPG quality to about 52. Depending on your file, you may have to increase that to 62. In my case, 52 was high enough to get decent image quality.

2. You can save it as either JPG or PNG, it does not matter, transparency is NOT an issue here

3. Now comes the critical step that you may get wrong initially: Do NOT use images tags and assign them the class names.

Let’s say you have a button, you cannot simply append the class name to your image tags. Images always require the src attribute. Instead you need to remove the entire image tag and replace it with a div tag. The sprite generator will use the image name as the class name, so instead of removing the entire tag you can simply replace the parts before and after the image filename and remove the extension.

EXAMPLE CSS Sprite Assigned via DIV tag

ORIGINAL IMAGE WITHOUT SPRITE:

<a href="/myfacebook"><img src="/images/facebook.png" alt="facebook"/></a>

WRONG CONVERSION:

<a href="/myfacebook"><img class="facebook" alt="facebook" /></a> 

CORRECT CONVERSION:

<a href="/myfacebook"> <div class="facebook"></div></a> 

Sidenotes: Semantic Meaning Of Image vs. DIV

Some webmasters have reported that it is possible to use a 1px spacer file (empty file) for the image source and then you can keep the image tag.

Always keep in mind, you may lose the semantic meaning of some images when converting an img tag to a div tag. That’s why you should only convert less important images like buttons. I would probably not convert your site logo just to be safe.

Last Steps: Insert CSS & Cleaning Up

Lastly, copy and paste the generated CSS code into your header, either inline or in a CSS file itself. You may want to compress /minify the CSS before you paste it.

Now, all there is left to do is cleaning up. Compare the filesizes of all images combined with the sprite size. You may have to adjust the quality of the image if it’s larger than the files combined.

Also, make sure there are no unclosed div tags so the site validates.

All done. You now have a website with a tidy CSS sprite. Before you clear the pages and go live head over to webpagetest.org and run a test on a site without the CSS sprites. Then purge a page from the cache and run a test to compare the two.

Great, isn’t it: Not only are you users downloading less KB, the waterfall will also be shorter and you may increase your pageviews by 10% or more using CSS sprites.

Liked this guide? Share it below or ask a question.