我应该在网站上使用类似精灵的缩略图技术吗？
在我正在创建的网站上，我有大约 100 个不同的缩略图 (64x64)，它们在不同的时间显示。在某些页面上，可能仅显示 5-15 个缩略图。在其他情况下，所有 100 个都已加载。
我正在考虑使用 CSS sprites 等技术来显示图像。也就是说，不要为每个拇指添加图像标签，而是执行以下操作：
<span class=thumb1"></span>
然后使用 CSS 拍摄一张图像的切片，并将所有拇指缝合在一起。也就是说，一张图像包含所有 100 个拇指（在本例中为 640x640 图像）。
我的问题：
- 这是个好主意吗？
- 如果是， 我应该在所有页面上这样做吗 图像出现，或仅出现在页面上 与所有图像？
- 有没有 除了精灵之外的另一种技术 这可能比简单地更好 包括带有 img 标签的图像？
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.
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>
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).
My questions:
- Is this a good idea?
- If yes,
should I do it on all pages the
images occur, or only on the pages
with all the images? - Is there
another technique other than sprites
that may be better than simply
including the images with img tags?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您认为普通用户会使用这些缩略图访问至少两个不同的页面，那么我的观点是使用精灵确实是一个好主意！
事实上，我会用所有缩略图制作一个大图像，然后在所有页面中使用它！
为什么？
优化生成的 PNG：
生成精灵后，如果是 PNG，您可以使用此工具进一步优化 PNG：http://www.sitepoint.com/blogs/2009/09/18/ squishing-the-last-drops-from-your-pngs/
何时不使用精灵：
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!
Why?
Optimize the resulting PNG:
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/
When not to use sprites:
我不太清楚你所说的“精灵”是什么意思，但这就是我认为你的意思：你创建了 1 个带有 10x10 光栅的图像，而不是单独的 100 个图像。每个坐标 (x,y) 包含您想要显示的图像之一。
现在，如果您显示图像，则使用 CSS 来设置背景位置：即
x * -64px和y * -64px，也许使用 JavaScript 来计算 x 和y 对于每个图像范围，或服务器端脚本来打印动态 CSS。I'm not quite sure what you mean with "sprites", but this is what I think you mean: instead of 100 images seperately, you create 1 image, with a 10x10 raster. Each coordinate (x,y) contains one of the images you like to show.
Now, if you display an image, you use CSS to set background-location: i.e.
x * -64pxandy * -64px, perhaps using JavaScript to calculate the x and y for each image-span, or Server-Side scripting to print out a dynamic CSS.如果
速度很重要
你不关心可访问性（屏幕阅读器阅读图像的 ALT 文本等，当你使用精灵时所有这些都消失了）< /p>
你不关心你的缩略图不会被打印任何浏览器中的默认设置
你可以做到这一点，而不会成为维护的噩梦（哪个图像又出现在位置 461 上？）
至于你的第二个问题，建议将所有精灵放入一个或很少的容器图像中，以最大限度地减少加载时间。
It is a good idea if
Speed matters
You don't care about accessibility (screen readers reading the ALT text of an image, etc, all that is gone when you use sprites)
You don't care that your thumbnails are not going to be printed by default in any browser
You can do it without it becoming a maintenance nightmare (which image was on position 461 again?)
As to your second question, it is probably advisable to put all sprites into one or very few container images to minimize loading times.