代码之家 › 专栏 › 技术社区 › Jeremy Kauffman

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

css-sprites image css html

Jeremy Kauffman · 技术社区 · 16 年前

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

我正在考虑使用像css sprites这样的技术来显示图像。也就是说,不要为每个拇指都设置图像标签,而是执行如下操作:

<span class=thumb1"></span>

然后使用CSS将一张图片的所有拇指缝合在一起,然后对其进行切片。也就是说,一个具有100个拇指的图像(在本场景中,是640x640图像)。

我的问题:

这是个好主意吗?
如果是的话, 我应该在所有的页面上图像出现,或仅出现在页面上所有的图像?
有除精灵以外的另一种技巧那可能比简单地包括带有img标签的图像?

3 回复 | 直到 14 年前

Andrea Zilio 16 年前

如果你认为一个普通的用户会用这些缩略图访问至少两个不同的页面,我的观点是使用精灵会 真是个好主意 !

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

为什么?

更少的HTTP请求(从100到1)!这是关于网站优化的最重要的事情之一(请阅读此处 Yahoo Performance Team speed optimization rules )
这样,用户将只在第一次下载整个图像,然后在接下来的所有页面中快速加载该图像。
互联网上最著名的网站已经做到了!参见中使用的精灵 Yahoo , Amazon 或 Youtube 页。
您可以将其他UI或布局图像添加到您的精灵中。

优化生成的PNG:

生成sprite后,如果是png,则可以使用此工具进一步优化png: http://www.sitepoint.com/blogs/2009/09/18/squishing-the-last-drops-from-your-pngs/

不使用精灵时:

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

Pindatjuh 16 年前

我不太清楚“精灵”是什么意思,但我认为这就是你的意思:用10x10光栅创建一个图像,而不是单独创建100个图像。每个坐标(x,y)都包含一个您想要显示的图像。现在,如果您显示一个图像,您可以使用CSS设置背景位置:即 x * -64px 和 y * -64px 可能使用javascript计算每个图像跨度的x和y,或者使用服务器端脚本打印动态css。

是的,这是一个好主意:它减少了加载时间,因为一个只需要下载一个大图像,而不是数百个小图像。
视情况而定。如果您具有页面缓存功能,那么您可以将所有缩略图“缝合”到一个图像文件中。如果你有一个非常动态的网页,那么每次更新缩略图时都要建立这个缝合的图像是非常困难的。
不确定,如果这就是你对“精灵”的看法,那么不,如果你对“精灵”的看法,那么是的:这个答案就是一个例子。

Pekka 16 年前

如果

速度问题
你不关心可访问性(屏幕阅读器读取图像的alt文本等,当你使用sprites时,所有的内容都消失了)
您不在乎默认情况下在任何浏览器中都不会打印缩略图。
你可以做到这一点,而不会成为维护的噩梦(哪个图像再次出现在461位置?)

至于第二个问题,建议将所有精灵放到一个或极少数的容器图像中,以最小化装载时间。