CSS Sprites

I'm not a stranger to sprites but I primarily limit my usage of them. I don't toss every image into a sprite. I tend to just stick with navigation majority of the time although very rarely have I had a project that required extras.

I used to do headings but after Cufon/@font-face came to play I no longer do that.

• How often do you use sprites?
• Do you use them for EVERY image (backgrounds included but excluding those you need to repeat)?
• Or just a few here and there?
• Does it really make THAT big of a difference when it comes to shaving off some load time?

I've got a client right now that wants to have ALL non-repeating images put into a single sprite. Truthfully, it's a huge pain in the ass right now as the site is already fully developed.. So I'm having to ensure that a.) I'm grabbing all images, b.) the code isn't going to conflict with the already existing styles. And I really just don't see the point in having 60+ images in a single sprite file... but I've never been one that used that many images in the first place ;\.

I use sprites for layout only.

I wouldn't recommend using them for images that are displayed as actual images on the site, but I've seen it done. :S

One thing to bear in mind is if your client ever wants edit one of the images to a large/smaller size.. that'll be quite the fudgecaked situation.. messing up the styling completely.

Though the amount of time you save from compressing alone is worth it.

Like Dan, I only use sprites for layout images. Sprites are really useful but there are more noticeable ways of speeding up the website then what you'd gain by sticking together all the images into one sprite.

It's also not worth it if you're going to be making regular changes to the images. I do think there is one place they should always be used and that's with hover events, makes things much smoother.

In your clients case unless all of the images are loaded on the same page I really doubt that a sprite is necessary. I definitely wouldn't put 60+ in a single sprite that would be a nightmare to create & edit.

I only use sprites for icons and repeated patterns.

I use sprites, more and more recently. I sprite almost all images, it does save up loading speed and you get maximum quality (if you're saving with PNG).

Here is one example:


but with time, I get better at it and know which elements to sprite and which elements to keep separated.

As for the editing, I always keep an organized PSD file with all images so I could easily edit, also with ruler guides so I could get the height, width, X and Y coordination of the specific image.

And the CSS coding, isn't that hard, it's all about background positioning the hard part is just getting each image's coordination.

wow. sprites that large are surely going to have a negative effect?

I usually do sprites but I am always trying to keep best balance between loading speed and number of files. It means that I sometimes prefer to have 2 different sprites, each one for example 50 kB, than one with weight of 200 kB. But I am usually fine with one.

Aziz, I would think hard on whether that's the correct application of sprites. The whole aim of sprites is to decrease the number of HTTP requests to images. The more requests = the longer page load it will take.

Now the problem with making such a huge sprite image is not the number of HTTP requests. It is the question of size. On page load the browser will only have to make one request for images, the sprite, but it will take a long time to load. Granted, it will probably take less time than requesting each image separately, but it will still take some time. The problem with this is that while the image is loading no image is displayed. Just text. The whole image has to be loaded before background positions can be used and an image is displayed. Using a few, smaller sprite images would both reduce the number of HTTP requests than normal and to provide images of a weight that's quickly renderable.

I use sprites quite often, as with the above, mainly for navaigation, logo and common images that repeat throughout the site (the whole purpose of sprites). Between the combination of sprites and then using a CDN to push all the content to the customers, we get pretty great speeds on sites and would never go back to regular images. Add in a little gzip/mod_deflate, and the site really starts to sing!

I pretty much only use them for nav graphics that have a hover state.

I'm surprised to hear that people use such large sprites, with so many images packed into one file. I suppose overall load time might be a little faster (?), but I would think that the *apparent* load time would seem slower for the user, since as mentioned nothing will display until the entire image is loaded. At least with multiple files they can be downloading simultaneously and showing up as they come in. I haven't done any actual testing of this though, so maybe I'm wrong.