One of the complaints of working with sprites is that it makes updating images harder. I think this process makes it much easier. I guess an even easier process would be to have a PSD of your sprite so you can update that directly without touching CSS. If you can pull that off, great. I personally feel more organized having individual graphics. SpriteMe also gives you CSS with the locations of all the sprites, so if you needed to change the size of images or add/delete them, you'll get those new numbers automatically.

If you have your own workflow for working with sprites, please share!

Related:Setting up sprites diagonally is rather clever. The idea is then you can use the sprite as a background image of a larger box without fear of other graphics in the sprite showing up. This is at the cost of a larger sprite file size because of the extra white space.

Why not both? Or do you have some evidence to share that that is ineffective? I used to agree in that I liked serving up viewable CSS. This site in particular I thought it was appropriate. But then I just found that CSS is far more typically viewed, when peaking around at other people’s stuff, through a tool like Firebug or Web Inspector where is just doesn’t matter how the formatting of the actual CSS file is done.

Diagonal sprites would only be used if you were in the circumstance where you needed to be applying background images to areas that were larger than the image itself. If you are in that situation a lot, give it a shot. And definitely read that linked article for the skinny on it.

1. container too tall? yeah, solves that. but so would a horizontal sprite.

2. container too wide? yeah, solves that. but so would a vertical sprite.

3. container too tall or too wide. yeah, solves that.

4. container too tall and too wide? does not solve that.

If you already know the problem you’re going to face, you can solve the problem (and save file size) much more easily by going some other route. Personally, I don’t often run into the “too tall or too wide” issue – if something isn’t going to be fixed dimensions, then I don’t necessarily know what either dimension will be: may be too tall and/or too wide, in which case, this wouldn’t help much at all.

I kinda think it does solve that though. If the sprite location is in the upper left of a box for example, that box can be infinitely wide and infinitely tall (to the right and down) without showing another part of an image in that sprite. Of course that depends on the location in the box and the diagonal that you choose. If you wanted to put the sprite in the top right corner, you’d need to reverse the angle of the sprite layout.

“The biggest problem with CSS sprites is memory usage. Unless the sprite image is carefully constructed, you end up with incredible amounts of wasted space. My favourite example is from WHIT TV’s web site, where this image is used as a sprite. Note that this is a 1299×15,000 PNG. It compresses quite well — the actual download size is around 26K — but browsers don’t render compressed image data. When this image is downloaded and decompressed, it will use almost 75MB in memory (1299 * 15000 * 4). If the image didn’t have any alpha transparency, this could be maybe optimized to 1299 * 15000 * 3, though often at the expense of rendering speed. Even then, we’d be talking about 55MB. The vast majority of this image is blank; there is nothing there, no useful content whatsoever. Just loading the main WHIT page will cause your browser’s memory usage to go up by at least 75+MB, just due to that one image.”

Granted the sprite site is pretty obscene, but it illustrates the point.

data:uris are a much better solution, on average. The two articles that Nicholas Zakas mentioned by cancel bubble are worth reading (I think he also has a project which compiles the data URIs for you).

There is no case I can think of where sprites are better than data:uris. This is particularly true if any significant traffic crosses the ocean.

Save one.

jQuery’s ThemeRoller provides the counter example. They generate images for icons and disclosure triangles. You can have as many as 5 or 6 different icon colors. By putting the icons for a single color in a single sprite, you get very efficient CSS.

The thing is that ThemeRoller is designed to use sprites for icons. If you’re just following Chris’ workflow, data uris are probably better choice.

This is similar to my own sprite workflow, but I feel the most time-consuming part is dealing with the re-made sprite. Instead of simply adding CSS for the new images, I’m forced to adjust the CSS for every image in the sprite.

I’m tempted to try the Photoshop technique, but while I’d save time updating the sprite, I would certainly lose the loads of time that SpriteMe saves upon sprite creation.

I think it adds about 10px of space between each sprite which is good practice anyway. It does it vertically, so if you have a zillion of them you could probably do better arranging your own grid. However, “speed” is a big part of workflow, so using an automated tool that takes about 30 seconds to use or handcrafting things which may take hours definitely needs to be taken into account.

i always make my own *sprite.psd, as most projects i work on go through many changes/revisions before they ever reach production.
also, this way when the client asks for *all* of my slices (which i am historically terrible keeping up with) i can just hand off the source file, and everyone is happy and full of glee.
also, i have always heard that horizontal sprites load faster, so i generally lay them out with distinct images placed side by side while related images (button states, custom form input bgs, et cetera) are placed vertically.
i also tend to make specific sprites for repeat-x and repeat-y images.
not sure if this is the best, it’s just how i roll, yo.

For generation of sprites, I use SmartSprites (http://csssprites.org/). It generates a sprite image based on comments in the CSS saying which images to change to sprites, and outputs a new stylesheet (with the sprites used). A lot nicer than SpriteMe or similar, IMO. :)

We keep a Fireworks PNG with all the separate elements and gridlines in an img/source folder, in source control. One vertical sprite for icons and other elements that will be displayed horizontally, with safe spacing, and a horizontal one if needed for flexible height elements. That way anyone can modify the sprites safely, and you can get exact positioning info from the FW file.

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.