CSS Sprites

[abidshahzad4u]

I want to use CSS Sprites for my web site.

Can someone tell me its pros and cons?

[Edouard_H]

In the 'pro' column, using sprites reduces the number of http requests to the server. If you use, say, 20 separate images for icons and backgrounds you can consolidate them into a single image therefore a single http request instead of 20.

The only 'con' that comes to mind is that it can be time consuming to create the image file. Measuring the placement of each individual element in the larger file helps greatly when writing the CSS though.

[birdbrain]

really smooooooooth rollovers. :)

[ChrisBolton]

The only con used to be the fact that when the user increased the text size in the browser, your elements grow and other background images start showing up in strange places. Now, as ALL browsers actually magnify the page when a user increases the text size, there are no cons, USE THEM and get faster page load time and less http requests.

I also find that it makes it easier to find and edit images when there are quite a few on just one file.