精灵与图像切片

Question

I don't have much experience with the sprite approach to images ( http://www.alistapart.com/articles/sprites ). Anyone care to share some pros/cons of sprites vs. old-school slices?

Answer 1

The main advantage of sprites is that the browser has to request less pictures from the webserver. That reduces the number of HTTP requests and makes it possible to compress the parts of the design more effectively. These two points also represent the disadvantages of sliced images.

Here you can see some good examples how sprites improve the loading speed of web pages:

http://css-tricks.com/css-sprites/

Answer 2

Pros:

• It's far easier on the server to serve a single large image than many small ones.
• It's (slightly) faster for a web browser to load such an image.
• Browsers only load images as they needs them - if you are using multiple images in a rollover, the browser would "pause" the first time you roll over the element. This can be solved using sprites, because there is only one image to load.

Cons:

• It's kind of a pain to code (more so than using multiple images at least)

Answer 3

One often overlooked downside of using CSS sprites is memory footprint:

https://web.archive.org/web/20130605000516/http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/

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).

When sprites get loaded into the browser, they are stored uncompressed. A 26 KB file can uncompress to take up a whopping 75 MB of RAM. You should be mindful of using sprites with very large dimensions.

There's also the issue of what happens in browsers with poor CSS support (legacy browsers). The sprites may end up totally broken.

Answer 4

Sprites

Pros:

• Less HTTP connections to the server
• Faster loading on broadband

Cons:

• No encapsulation: If you want to change one image, you have to change the sprite
• It is difficult to setup individual images in CSS without a tool
• Don't degrade: If the browser don't support CSS, you are in trouble

Answer 5

CSS Sprites:

Pros:

• Graceful degrade in unsupported browsers (text can be shown when background images for links are not allowed)
• Fewer HTTP requests
• Each image has a separate overhead like color table so image slicing will be having more overhead than CSS sprites

Cons:

• Poses a problem if images are turned off in the browsers (rare case though)

Image slicing:

Pros:

• User perceives a faster load since loaded piece by piece.
• Load on demand like when the user places his mouse on the image

Cons:

• The webpages might have a large size on the client side even thought it might not be the case on the server side.

Answer 6

Look into using a CSS sprite generator (we use SmartSprites ). That way you can do slices locally, and have your build process generate a spritemap. It's the best of both worlds.

Also is SmartSprites isn't for you, there's definitely others, however I like it because it reduces the amount of work up front AND during changes.

Answer 7

Cons - slower on older browsers/ maybe not working on them with hover effect (opera6) - if not used correctly can get very/too huge (group them adequately!) - tedious work to set them up

Pros - less bytes transfered, because one big image is smaller then all individual images combined (one header/ color table) - less http requests

Answer 8

The main drawback of sprites is it makes it hard to read/maintain/modify your CSS. It can be difficult to remember the exact pixel offsets within the sprite.

Answer 9

pros using sprites : since it is using 1 images for all, it require less load on http server.

cons: - hard to code. you must know the coordinate each images inside sprites so you can display it correctly. once you change the size of the image, you need to adjust all ... - big images could creates long waited page to display. while using images, user with slow internet connection can see one by one.

best practices. use it for example roll over images.

Answer 10

I prefer going the middle ground of grouping similar images (normal, hover, selected page, the parent page of selected page) than having all the images in one file. To make these, you image slice like normal in Photoshop or Illustrator, open the files up and combine them with a shortcut key. I wrote the Photoshop script that combines images into CSS sprites . You will have multiple HTTP connections, but won't have the load delay on hover.