Html 我应该在我的网站上使用类似精灵的缩略图技术吗？

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

我正在考虑使用CSS精灵之类的技术来显示图像。也就是说，与其为每个拇指设置图像标记，不如执行以下操作：

<span class=thumb1"></span>

---

我不太清楚你所说的“精灵”是什么意思，但我想这就是你的意思：不是分别创建100个图像，而是创建一个10×10光栅的图像。每个坐标（x，y）包含一个要显示的图像。
现在，如果您显示图像，您可以使用CSS设置背景位置：即
x*-64px
和
y*-64px
，可能使用JavaScript计算每个图像跨度的x和y，或者使用服务器端脚本打印出动态CSS


是的，这是一个好主意：它减少了加载时间，因为只需下载一个大图像，而不是数百个较小的图像
视情况而定。如果您具有页面缓存功能，则可以将所有缩略图“缝合”到一个图像文件中。如果你有一个非常动态的网页，那么在每次更新缩略图时构建这个缝合的图像是非常困难的
不确定，如果这是你用“精灵”描述的，那么不，如果你用“精灵”描述其他东西，那么是的：这个答案就是一个例子
如果


速度很重要

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

默认情况下，在任何浏览器中都不会打印缩略图，这一点您并不在意

您可以做到这一点，而不会成为维护的噩梦（哪个图像又出现在位置461上？）


至于第二个问题，最好将所有精灵放入一个或几个容器图像中，以最小化加载时间
 如果你认为普通用户会使用这些缩略图访问至少两个不同的页面，那么我的意见是使用sprite将是一个好主意

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

为什么?


更少的http请求（从100到1）！这是关于网站优化的最重要的事情之一（从这里阅读）
这样，用户将只在第一次下载整个图像，然后他们将在接下来的所有页面中获得该图像的超级快速加载
互联网上最著名的网站已经做到了！请参见或页面中使用的精灵
您可以将其他UI或布局图像添加到精灵中

优化生成的PNG：

生成精灵后，如果是PNG，可以使用此工具进一步优化PNG：

不使用精灵时：


当精灵中的部分图像频繁更改时
在这种特定情况下：当大多数用户需要少于（约）10%的图像时
您是否提前知道页面是否需要所有图像？是的，我提前知道哪些页面需要所有图像而不是一些图像。可访问性不一定是使用精灵来提高页面加载性能的受害者。理想情况下，您可以在OP的span标记中包含文本，并将文本缩进到远离屏幕的地方。这将允许屏幕阅读器仍能读取它。其他的缺点是有效的。是的，当你替换CSS背景图像时，CSS精灵是可以的，但是如果你替换HTML图像，你会失去alt属性和很多SEO信息，浏览器不显示图像，人们依赖屏幕阅读器等辅助技术。如果您想提高HTML图像的性能，请使用不带cookie的Lighttpd服务器将图像移动到images.domain.com，等等，您不需要Apache或IIS，浏览器可能会下载比仅使用www.domain.com更多的文件。这就是我所说的sprites，我将问题编辑得更清楚。图像是相对静态的。有些是偶尔添加/更新的，但不会太频繁以至于太贵或太烦人。谢谢，这是一个非常有用的答案！是雅虎！激发了这个问题的性能因素。我对“10%”这个数字很好奇。你有更多的信息吗？不，杰里米，这不是规则，也不存在这样的规则。这真的取决于你的情况，用你的用户需要的精灵大小的百分比来考虑比用你的用户需要的图像数量更为正确。无论如何，在你的情况下，你有64x64像素的图像和页面，使用5到15或所有的图像，我认为这样的规则是可以的，所以10%是我的意见，根据你的具体情况。（我在回答中已经详细说明了这一点，我希望现在更清楚）