Advertisement
HTML/CSS

CSS Sprite Sheets: Best Practices, Tools and Helpful Applications

by

Using CSS sprites, instead of a collection of smaller individual images, will improve your web pages' performance and keep things more organized. Let's take a look at some best practices and some helpful tools for your sprite-making workflow.

The name sprite might remind you of gaming sprites; retro console games and even browser-based games these days:

Angry Birds

and in CSS terms the role sprites play is more or less the same. A sprite is one large file containing multiple images for your website, saving loading time and web space.

A Simple Sprite
Sprite from The Next Web

Best Practices

The essential point of using CSS Sprite Sheets is that the server only has to send one image file containing all your images, not a host of individual ones - and through CSS you can display any little segment from that file as a background to an element.

Some would have it that using individual images can 'fool' the eye into thinking the page is loading faster; images popping up as they load might appear to be good progress. This is a false benefit however, a genuinely faster loading page is always preferable.

The other disadvantage with this method is that each individual image is, as we have mentioned, a separate image file. Therefore each image the server has to get counts as a separate HTTP Request. It's important to keep the number of HTTP Requests on your site as low as possible, as browsers can only make a limited number of requests to any one server simultaneously.

Combining your images into a single file will not only significantly lower the number of HTTP Requests, but will also decrease the total file size of the images.

Webdesign Tuts' Sprite Sheet
Webdesigntuts+ uses Sprite Sheets, find out how to view them with SpriteMe later on!

Different Approaches: Before or After?

There are two common approaches when creating your sprite sheets – making them before or after building your site.

You can put all your images into a sprite sheet from the ground upwards as you create your site. You will update your CSS to suit, as you go along. This is what we'll refer to as the before method.

Alternatively, you can create all your images as separate files, which makes editing them much more straightforward. Once your site is built and all images prepared, you can quickly and easily compile either manually, or use one of a number of tools to do all the work for you (about which I’ll go into more detail later on). This, we'll refer to as the after approach.

If you’re completely new to sprite sheets or new to web design, the ‘after’ method is definitely the recommended option.

If you’re completely new to sprite sheets or new to web design, the after method is definitely the recommended option. You can keep any PSDs or files for each individual image separately, make any changes, then run the application of your choice. What’s more, if you’re unsure about how to write all the CSS for your images, then most sprite generating aplications will produce the accompanying CSS too.

Most of these applications are completely free, another bonus!

Let's have a look at some tips and tools to help you with sprite sheets. It will then be up to you to choose whichever approach you find most suitable.

Note: most of the following hints assume you'll make your sprites beforehand.


Tip 1: Keep it Organized

When laying out your images in Photoshop (or whatever you use to layout your sprite sheet) it’s a good idea to try and organize things as clearly and easily as possible. Try to always round up to the nearest 10 pixels, or work with a certain amount of space for each image if they’re all a similar size. When it comes to writing out all the accompanying CSS, you won’t have to keep measuring coordinates, and you’ll be less likely to forget the numbers involved.

Using 'simpler' figures also means that in Photoshop it will be much easier to use 'snap-to' grids, or draw out grid lines to keep things organised and simple to understand.


Tip 2: Wait Until Everything's Right

If you put all your images into the sprite sheet, spend ages writing out all the CSS and then decide one of the images needs editing, it could cause serious problems. If the image sizing has to be changed, then your sprite sheet's layout may need to be altered and realigned – which means you’ll have to spend absolutely ages altering all of your accompanying CSS.

This is another reason you might be more interested in starting with individual images and then using an application to do all the hard work for you. After that, if you need to do some editing, just re-run the application and it’ll all be done. What more could you want?


Tip 3: Labeling is Vital

If you use Photoshop or other similar image editors, then it is a good idea to keep each sprite's layers nicely labelled and grouped, so everything is perfectly clear should you (or anyone else) need to understand it later on.

Your labels should be clear and concise, easy for anyone and everyone to understand.

This should be fairly common practice for most designers, but do not put off the labelling - do it as soon as you create the sprite. Just imagine how much time you could save with labelling if you had a huge sprite sheet and couldn't find the appropriate layers - it could end up becoming extremely frustrating.

Similarly, labelling is vital for your sprite's CSS. Labels are definitely needed to confirm which sprite is being selected by the code - and all the above principles still apply. If you're designing a template for selling on sites like Themeforest, then any CSS (let alone Sprite Sheet CSS) should be clearly labelled, seeing as potential users may not have as great an understanding of CSS as you do.


Tools to Help

There is a massive range of tools to make your sprite sheet generation as easy as possible. When you create and design with a range of individual images, compile them all into one sprite sheet at the end - the 'after' method.

Here are some of the best Sprite Sheet generators:

  • Compass
    Price: Free!
    Compass includes a brilliant sprite and stylesheet generator, building the sprites from your individual images stored in a folder. Also related is Sass; a CSS preprocessor that makes your CSS clearer, more organized and easier to maintain. More info: http://enva.to/z12V70
    http://compass-style.org/
  • Lemonade
    Price: Free!
    Extremely simple and easy to use, Lemonade uses Sass as mentioned above. All you need to do is add a line of code to your Sass or SCSS Files and you're done - a sprite is generated. However, the developers have now moved on to work on Compass and Sass - so don't expect any updates to Lemonade anytime soon.
    http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html
  • SpriteMe
    Price: Free!
    A fantastic bookmarklet-based sprite sheet generator and viewer. It can be used to view any sprites used on any website. The best feature is that you can design your website using individual images, then run SpriteMe. It will quickly generate a sprite sheet that you can export and also generates the associated CSS for the new sprite. It even injects the sprite into the current page. If you're used to working with individual images, this offers the easiest transition to working with sprite sheets. I'll go into more detail about how to use SpriteMe later on.
    http://spriteme.org/
  • Fireworks CS6
    Price: Definitely not free!
    The latest version of Fireworks in Adobe's Creative Suite includes Sprite Sheet generation.
    More info: http://enva.to/IURM73
    http://www.adobe.com/devnet/fireworks/articles/css-sprites.html

  • Tools: An Introduction to SpriteMe

    SpriteMe is a free bookmarklet available from www.spriteme.org. It’s surprisingly simple to use, and has little bearing on the designing method you're used to. It will open up an overlay on the side of the screen where you can download images or sprite sheets from the website you’re using it on, or more importantly generate sprite sheets and accompanying CSS for you.

    A Demo of SpriteMe
    With SpriteMe you can view current sprite sheets already on a website, like Webdesigntuts+!

    Background images make pages look good, but also make them slower. Each background image is an extra HTTP request. There's a fix: combine background images into a CSS sprite. But creating sprites is hard, requiring arcane knowledge and lots of trial and error. SpriteMe removes the hassles with the click of a button. - www.spriteme.org

    As I've said before, if you're used to working with individual image methods, prefer that method, or can't be bothered with the hard work associated with sprite sheets, then SpriteMe is the answer.

    SpriteMe's Export CSS Page

    Although the Webdesigntuts+ site already has sprite sheets, SpriteMe could still improve things by combining them! You can see how the CSS is exported - with the alignment done already. All you have to do is copy, paste and change the URLs!

    It's as simple as creating your design with individual images, then running SpriteMe. It grabs all of the background images from your sites, groups them into sprites and generates the sprite sheet for you to download. Next it "injects the sprite into the current page", and "recomputes the CSS background-position" for you. If you want a better guide for using SpriteMe, find it at www.spriteme.org.

    SpriteMe's Savings Table

    Check out SpriteMe's Savings Table to clearly see how Sprite Sheets have saved many websites a lot of space and page loading times (in most cases...)


    Conclusion

    I hope I've persuaded you that Sprite Sheets are the way forward - saving space, lowering HTTP Requests and leading to a faster, more organized website.

    As for the methods for generating them, I would definitely recommend the 'after' method, and lean on one of the tools we discussed to do all the hard work.


    Other Resources

    • SpritePad
      An extremely simple way to make your own sprites - it's "lightning fast". Easily create your sprites and the CSS code is done for you - everything is drag and drop based.
      http://wearekiss.com/spritepad
    • Glue
      Glue is a simple command line tool for generating sprites.
      https://github.com/jorgebastida/glue
    • CSS Sprites
      A fantastic online sprite sheet generator. Upload your images, and before your eyes they are outputted as a sprite sheet, along the with CSS.
      http://css-sprit.es/
    • Sprite Cow
      Sprite Cow doesn't actually generate sprites, it helps you get the dimensions of images within a sprite sheet, and gives you the CSS. Very useful if you make sprite sheets yourself.
      http://www.spritecow.com/
    • SpriteRight
      SpriteRight is available on the Mac App Store, and is great for generating sprite sheets. Import your individual images or even import a stylesheet and it will get all the images for you. The CSS is created on the fly.
      http://spriterightapp.com/
    • Using CSS Sprites to optimize your website for Retina Displays by Maykel Loomans
Related Posts
  • Web Design
    eCommerce
    Taking Shopify Theme Development FurtherShopify thumb
    In this final part of our Shopify series we will look at how a deeper knowledge of Liquid will enable you to make your themes even more flexible. This will help you deliver richer and more imaginative store designs.Read More…
  • Web Design
    HTML/CSS
    Why I Choose Stylus (And You Should Too)Stylus thumb
    The world of front end web development has been steadily increasing its uptake of what we call "CSS Preprocessors", which extend the functionality of regular CSS. Arguably the two most well known, with the greatest user base, are LESS and Sass/SCSS. However there is a third preprocessor that hasn't received quite as much attention, and that's Stylus.Read More…
  • Code
    Creative Coding
    Adding Custom UI Themes to Wordpress Admin Using SassPreview image@2x
    With the release of WordPress 3.8 we now have a new feature for Admin UI themes. This means that every user can change the color scheme of his admin regardless of the the theme that’s being used on the front-end. To change the color scheme of your admin, go to Users > Your Profile. Here you’ll see eight predefined themes that you can select from. Select any theme from these themes and you’ll see the changes immediately. When you are done with selecting the theme, hit the “Update Profile” button.Read More…
  • Code
    Tools & Tips
    Working With LESS and the Chrome DevToolsLess devtools retina preview
    This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.Read More…
  • Web Design
    HTML/CSS
    Foundation's Sassy Styles ExplainedFoundation sass retina1
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Code
    Articles
    Web Assets - Tips for Better Organization and PerformanceWeb assets retina preview
    Remember back to when we had to spend a lot of time optimizing our project's assets (images, CSS, etc..)? Well today, users have a much faster Internet connection and it appears that we can afford to use bigger images or bigger flash files with a lot of video and pictures inside. However, with the rise of mobile development, we are again back in that same situation. It is extremely important to create well optimized sites, so that we have faster applications, which download less content and respond immediately. Read More…