在我正在创建的网站上，我有大约 100 个不同的缩略图 (64x64)，它们在不同的时间显示。在某些页面上，可能仅显示 5-15 个缩略图。在其他情况下，所有 100 个都已加载。
我正在考虑使用 CSS sprites 等技术来显示图像。也就是说，不要为每个拇指添加图像标签，而是执行以下操作：
<span class=thumb1"></span>
然后使用 CSS 截取一张图像的切片，并将所有拇指缝合在一起。也就是说，一张图像包含所有 100 个拇指（在本例中为 640x640 图像）。
我的问题：
- 这是一个好主意吗？
- 如果是，
我应该在所有页面上这样做吗
图像出现，或仅出现在页面上
与所有图像？
- 有没有
除了精灵之外的另一种技术
这可能比简单地更好
包括带有 img 标签的图像？
如果您认为普通用户会使用这些缩略图访问至少两个不同的页面，那么我的观点是使用精灵会确实是个好主意!
事实上，我会用所有缩略图制作一个大图像，然后在所有页面中使用它！
Why?
- http 请求更少（从 100 减少到 1）！这是关于网站优化最重要的事情之一（请阅读此处雅虎性能团队速度优化规则 http://developer.yahoo.com/performance/rules.html )
- 这样，用户将仅在第一次下载整个图像，然后他们将在所有后续页面中快速加载该图像
- 互联网上最著名的网站已经这样做了！查看精灵中使用的Yahoo http://l.yimg.com/a/i/ca/sp/purple/fp_spt_icons_0.0.2.png, Amazon http://www.flickr.com/photos/mezzoblue/3217540317/ or Youtube http://s.ytimg.com/yt/img/master-vfl140994.png pages.
- 您可以将其他 UI 或布局图像添加到您的精灵中
优化生成的 PNG：
生成精灵后，如果是 PNG，您可以使用此工具进一步优化 PNG：http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/ http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/
何时不使用精灵：
- 当精灵中的部分图像频繁变化时
- 在这种特定情况下：当大多数用户需要少于（大约）10% 的图像时
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
