我应该在我的网站上使用像精灵一样的缩略图技术吗？
在我正在创建的网站上，我有大约100种不同时间显示的缩略图（64x64）。在某些页面上，可能只显示5-15个缩略图。在其他情况下，所有100个都被加载。
On a website I'm creating, I have about 100 various thumbnails (64x64) that get displayed at different times. On some pages, only 5-15 thumbnails may be displayed. On others, all 100 are loaded.
我正在考虑使用像CSS sprites这样的技术来显示图像。也就是说，不是每个拇指都有图像标签，而是执行以下操作：
I'm considering using a technique like CSS sprites to display the images. That is, rather than have image tags for each thumb, do something like:
<span class=thumb1"></span>
然后使用CSS拍摄一张单个图像并缝合所有拇指也就是说，一张100张大拇指的图像（在这种情况下，640x640图像）。
And then use CSS to take a slice of one single image with all the thumbs stitched together. That is, one image with all 100 thumbs (in this scenario, a 640x640 image).
我的问题：
- 这是一个好主意吗？
- 如果是，我应该在
图像出现的所有页面上执行
，或只在页面
上包含所有图像？ - 除了精灵
之外还有
另一种技术可能比仅仅
更好包括带有img标签的图片？
如果您认为普通用户会访问使用这些缩略图的至少两个不同页面比我的意见是使用精灵真的是一个好主意！
If you think that an ordinary user would visit at least two different pages with these thumbnails than my opinion is that using sprites would really be a good idea!
我实际上会做一个大图像所有缩略图然后在所有页面中使用它！
I would in fact make a single big image with all the thumbnails and then use it in all the pages!
为什么？
- 更少的http请求（从100到1）！这是关于网站优化的最重要的事情之一（请参阅 Yahoo Performance Team速度优化规则）
- 这样用户只会在第一次下载整个图像，然后他们将在以下所有页面中快速加载这些图像
- 互联网上最着名的网站已经做到了！请参阅 Yahoo 中使用的精灵，亚马逊或 Youtube 页面。
- 您可以为精灵添加其他UI或布局图像
- Fewer http requests (from 100 to 1)! And this is one of the most important thing about web site optimizations (read here from Yahoo Performance Team speed optimization rules )
- This way users will download the whole image only the first time and then they will get a super quick loading of that images in all the following pages
- The most famous websites on the internet already do that! See sprites used in Yahoo, Amazon or Youtube pages.
- You can add other UI or layout images to your sprite
优化生成的PNG：
生成精灵后，如果是PNG，则可以优化PNG甚至更多使用此工具： http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/
After you have generated your sprite, if a PNG, you can optimize the PNG even more using this tool: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/
何时不使用精灵：
- 当精灵中的部分图像经常变化时
- 在这种特殊情况下：当大多数用户需要少于（约）10％的图像时