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

Question

在我正在创建的网站上,我有大约100种不同时间显示的缩略图(64x64).在某些页面上,可能只显示5-15个缩略图.在其他人,所有100个都被加载.

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

<span class=thumb1"></span>

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

我的问题:

• 这是一个好主意吗？
• 如果是,我应该在图像出现的所有页面上进行,还是仅在包含所有图像的页面上进行？
• 还有除精灵之外的其他技术可能比简单地包含带有img标签的图像更好吗？

Answer 1

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

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

为什么？

• 更少的http请求(从100到1)!这是关于网站优化的最重要的事情之一(从雅虎性能团队速度优化规则中读取)
• 这样,用户只会在第一次下载整个图像,然后他们将在以下所有页面中快速加载这些图像
• 互联网上最着名的网站已经做到了!请参阅Yahoo,Amazon或Youtube页面中使用的精灵.
• 您可以将其他UI或布局图像添加到您的精灵

优化生成的PNG:

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

什么时候不使用精灵:

• 当精灵中的部分图像频繁变化时
• 在这种特定情况下:当大多数用户需要少于(约)10%的图像时