CSS Sprite Sheets: Best Practices, Tools and Helpful Applications
Reprinted from http://webdesign.tutsplus.com
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:
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.
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.
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.
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.
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.
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
Cho 