Sprites optimization

CSS SpritesAccording to Kissmetrics, “47 percent of visitors expect a website to load in less than 2 seconds, and 40 percent of visitors will leave the website if the loading process takes more than 3 seconds.” [Source] Wow, only 2-3 seconds! We have to deliver our content really quickly. While our back-end team is working every day on a back-end optimization, what can we do on a front-end?

One thing we can do on the front-end is reduce the number of HTTP requests by using image sprites. This will speed up the site’s loading time. In short: image spriting works by combining lots of images (sprites) into one large image (sprite sheet), to significantly reduce the number of requests made to the server. There are many online services to do this manually, like:

But we will use SASS and Compass as these tools are powerful, flexible and plus to all, they will do almost all the work for us.

First of all, we need to install Ruby + Compass & SASS gems and create a config.rb file with basic Compass settings. (If you don’t know how to do this, you can read this tutorial.) When this step is completed, we can start making sprites:

  1. Place all of your sprite images into one folder, and name that folder, for example, ‘images/sprites’
  2. Now import Compass and its utilities into our SASS file:
 @import ‘compass/utilities/sprites’ and @import ‘compass’
  3. Import our sprite images: 
@import “sprites/*.png”
  4. Now we are ready for the magic. Using your command line, run the following: ‘compass compile’
 and… Voilà! Our sprite sheet is ready!
  5. Now we can use icons from our just-compiled sprite sheet by simply including the sprite’s name and icon name, like this:
 @include icons-sprite(twitter)

Of course, this is just the most basic usage of SASS and Compass spriting utilities -there are lots of powerful “mixins” and techniques. We will talk about them another time.

As a small example of how useful sprite sheets can be: During our recent Radar Online site redesign, we replaced all image assets with sprite sheets. As you can see, we got great results! I hope the reduction of HTTP requests helped many people to have a better experience of using the Radar Online site.

Sprite optimization

So, if you are still not using sprite sheets, you should definitely try it!

About Nick Chernichenko

Front End developer at BoyleSoftware