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 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.
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)
发布评论
评论（6）
是的，这是一个很好的技术。
可以减少HTTP请求的数量，这是一种页面优化技术。
中的第一条规则
雅虎加速网站的最佳实践
是
最小化 HTTP 请求
当您需要更改精灵内图像的尺寸时，您必须重新计算图像的偏移量。但我不认为这是一个巨大的负担。
几乎所有现代浏览器都支持它。
这也是一篇关于 CSS Sprites 的好文章
CSS Sprites：它们是什么，为什么它们很酷以及如何使用它们
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
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
它适用于 IE 6 Safari Opera 8+ 和 FF2+。
您应该阅读以下内容：
Gif 压缩
它解释了 GIF（和其他图像文件）是如何压缩的压缩的。
例如，在“行”而不是“列”中显示相同的数据会大大减少空间使用。
此外，您可以预加载所有图像，并且交换图像时不会有任何延迟。
另一个优点是您可以使用一个精灵进行“红色”设计，使用另一个精灵进行“蓝色”设计。
然而，有一个缺点：
大多数浏览器都会缓存图像精灵。
因此，在更新精灵时您可能会遇到麻烦。
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.
这是一项很棒的技术，但您必须非常小心地执行它，以便它在每个浏览器中都能正常工作。
这是可以做到的，并且是一个很好的优化技巧，但一如既往，在执行此操作时请注意它在 IE、Firefox 和 Chrome 中的工作原理。
缺点是它不能总是使用，并且您必须坚持跨浏览器 CSS 支持的最小公分母。
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.
如果做得好，它应该可以在所有浏览器（甚至 IE6）中正常工作。
我能想到的最大的缺点是，如果一个精灵中有太多图像，并且只需要更改其中一个图像的尺寸，则可能会导致您必须更改大量 CSS（因为其他图像的偏移量）也可能会改变）
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)
我遇到的一个缺点是 CSS 精灵在许多浏览器中似乎无法正确打印
One downside i've run into is that CSS sprites don't seem to print properly in many browsers
当然，因为它节省了大量的 http 请求，这对于您的网站加载时间非常重要。
查看此页面：
http://www.tutorialrepublic.com/css-tutorial/ css-sprites.php
它有很好的解释以及您需要了解的有关 CSS Sprite 的所有信息。
Of course, because it saves lot of http request, that very important for your website loading time.
Check out this page:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
It has a great explanation and everything you need to know about CSS Sprite.