Is css-sprite a good technique?

Question

1. is css-sprite good technique? I read about its pros at http://spriteme.org/ and have also I seen a lot of questions about css sprites here in stackoverflow.

2. What are its cons?

3. Will it work in all browsers as claimed in their site?

Answer 1

Its a great technique, but you have to be real carefull as how you do it so it works correctly in every browser.

It can be done and is a good optimizing tip, but as always, pay attention as how it works in IE, Firefox and Chrome while you are doing it.

The cons are that it can't be used always, and you have to stick to the least common denominator for cross browser css support.

Answer 2

Yes, it is a good technique.

You can reduce the number of HTTP requests and it is a page optimization technique.

The first rule in

Best Practices for Speeding Websites by Yahoo

is

Minimize HTTP Requests

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

When you need to change the dimensions of the images inside the sprite then you have to recalculate the offsets for the images. But I don't think this is a huge burden.

It is supported by almost all modern browsers.

This is also a good article on CSS sprites

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Answer 3

Done right, it should work fine in all browsers (even IE6).

The biggest con I can think of is that if you have too many images in one sprite, and need to change the dimensions for just one of them, it can cause you to have to change a lot of CSS (since the offsets for other images will probably change as well)

Answer 4

It worked for IE 6 Safari Opera 8+ and FF2+. You should read this:

Gif Compression

It explains how GIF (and other image files) are compressed. For example displaying the same data in "rows" instead of "columns" reduces the space usage dramatically.

Furthermore you preload all images and there is no delay if you swap images.

Another plus is that you can use one sprite for a "red" design and another sprite for a "blue" design.

However there is one disadvantage:

Most of the browsers cache the image sprites. So you might running into troubles when it comes to updating the sprite.

Answer 5

One downside i've run into is that CSS sprites don't seem to print properly in many browsers

Answer 6

Some good resources to read and know:

• CSS Sprites: Image Slicing’s Kiss of Death