我应该在我的网站上使用像精灵一样的缩略图技术吗？

Question

在我正在创建的网站上，我有大约100种不同时间显示的缩略图（64x64）。在某些页面上，可能只显示5-15个缩略图。在其他情况下，所有100个都已加载。

我正在考虑使用像CSS sprites这样的技术来显示图像。也就是说，不是每个拇指都有图像标签，而是执行以下操作：

<span class=thumb1"></span>

然后使用CSS将所有拇指拼接在一起的单个图像切片。也就是说，一张图像全部为100个拇指（在这种情况下，为640x640图像）。

我的问题：

• 这是个好主意吗？
• 如果是， 我应该在所有页面上这样做吗？ 图像出现，或仅出现在页面上 所有的图像？
• 有吗？ 除了精灵之外的另一种技术 这可能比简单更好 包括带有img标签的图片？

Answer 1

如果您认为普通用户使用这些缩略图访问至少两个不同的页面，那么我认为使用精灵会真的是个好主意！

我实际上会用所有缩略图制作一张大图像，然后在所有页面中使用它！

为什么？

• 更少的http请求（从100到1）！这是关于网站优化的最重要的事情之一（请参阅Yahoo Performance Team speed optimization rules）
• 这样，用户只会在第一次下载整个图像，然后他们将在以下所有页面中快速加载这些图像
• 互联网上最着名的网站已经做到了！请参阅Yahoo，Amazon或Youtube页面中使用的精灵。
• 您可以将其他UI或布局图像添加到精灵

优化生成的PNG：

生成精灵后，如果是PNG，您可以使用此工具进一步优化PNG：http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/

何时不使用精灵：

• 当精灵中的部分图像频繁更改时
• 在这种特殊情况下：当大多数用户需要少于（约）10％的图像时

Answer 2

我不太确定你对“精灵”的意思，但这就是我认为你的意思：而不是单独的100张图像，你创建1张图像，使用10x10光栅。每个坐标（x，y）包含您要显示的图像之一。 现在，如果您显示图像，则使用CSS设置背景位置：ie x * -64px和y * -64px，可能使用JavaScript计算每个图像范围的x和y，或者服务器端脚本打印出动态CSS。

• 是的，这是一个好主意：它减少了加载时间，因为只需要下载一个大图像，而不是数百个较小的图像。
• 这取决于。如果您具有页面的缓存功能，则可以将所有缩略图“拼接”为一个图像文件。如果你有一个非常动态的网页，那么每次更新缩略图时都会非常苛刻地构建这个拼接的图像。
• 不确定，如果这是你用“精灵”的话，那么不，如果你用“精灵”做其他事情，那么是的：这个答案是一个例子。

Answer 3

如果

，这是一个好主意

• 速度很重要

• 您不关心可访问性（屏幕阅读器阅读图像的ALT文本等，当您使用精灵时，所有这些都消失了）

• 您并不关心默认情况下不会在任何浏览器中打印缩略图

• 你可以在没有成为维护噩梦的情况下做到这一点（图像再次位于461位置？）

关于你的第二个问题，建议将所有精灵放入一个或几个容器图像中以减少加载时间。