When CSS sprites would be good to use and when not

问题:

In what scenarios CSS sprites would be good to use and when not? Is it time saver or only server request saver?

I think bandwidth use will be same because image is same like ong big image but it's in a parts?

When and where use of css sprite is a time saving(in work) option ?

For navigation it's good for rollover pre-loading effect but not good for images disabled people?

What are other good usage which can save our time once and in future (if changes comes in design) both?

Edit: Sprites is only for css background so should we use images in background as much as possible to save sever request, is it good idea?

Update:

To implement takes more time then regular method and mostly client do not much worry about some slowness like http request. My question is can we save time in site making process and future maintenance of website using css sprite. or regular method is enough.

In nutshell my question is: “can CSS sprites save our designer and xhtml css coder time (I'm not talking about server request)?”

回答1:

• CSS sprites are best used for elements that have a fixed width and height. Otherwise, you need large empty spaces in your sprite image, which can (depending on file type) increase the size a bit.

• Due to the way different file formats compress images, sometimes a CSS sprite image will have a noticeably smaller file size than the total file size of separate images. That’s a nice bonus.

• As mentioned, sprites reduce the HTTP request overhead, which can help load time. I’ve never seen any numbers on the magnitude of this effect.

• Sprites will add a bit of time for your CSS developers. It shouldn’t affect your designers. But bear in mind that your developers code the site up once; the benefits of sprites apply every time someone looks at the site.

回答2:

It reduces the number of HTTP requests which will enhance site performance.

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.

In Minimize HTTP Requests

回答3:

CSS sprites are a time saver because it is a server request saver, as server requests are notably time-consuming. Using CSS sprites usually decreases your webpages' load/render time dramatically. There are times when they cannot be used, such as with background images repeating in two dimensions, but when you can use them, it's almost always worth the effort.

Of course you shouldn't sprite groups of images that are very big, especially if they're not very likely to be shown. Don't sprite an entire photo gallery into one big image, for instance =)

Other measures which amount to pretty much the same thing would be minifying, compressing and combining your scripts and styles into only one js file and one css file.

EDIT

With regards to your clarification, i'd say no, CSS sprites will always mean more work, never less, compared to just using the separate images as they are. I still wholeheartedly endorse their use, tho =)

回答4:

It will only reduce the number of requests but that will benefit both the server and the client. The server will not need to handle as many requests. The client, because it is limited in the number of parallel requests that it can make, will render faster as many of it's previous "requests" for the image will be served from its cache, allowing it to make the requests that it does need more expediently.

回答5:

Using sprites reduces the number of requests and thus also the network overhead. Loading a few sprite image is faster and uses less bandwidth even if the image data is the same (or even a bit more) than the individual images.

It needs a bit more work and some planning to combine the individual images into sprite collection images, so the development time is somewhat longer. The difference is less if you have it in the plan to start with rather than combining the separate images afterwards.

Any scenario where you have several same size background images that replace each other (or complement each other) is ideal for sprites.

回答6:

As long as you have something like a dynamic photoshop PSD file in the back, then the designer's maintenance won't be an issue. But if it is a static file like PNG/GIF, then maintenance will take more time as you cannot control the individual images separately anymore.

回答7:

Overall, sprites is a great idea. Use it for fixed width & height images that are less likely to be updated frequently.

回答8:

Sprites are always good to use. They help speed up the loading of web pages and prevent the blinking effect on navigation hovering.