CSS 图像精灵答案

【问题标题】：CSS image spritesCSS 图像精灵
【发布时间】：2009-08-17 17:40:42
【问题描述】：

使用 css 图片精灵的唯一好处是 http 请求更少吗？

或者还有其他好处吗？

还有一种简单的方法可以确定要显示精灵的哪个区域？

【问题讨论】：

标签： css sprite

【解决方案1】：

正如您所说，主要优势之一是减少对服务器的请求数量，提高响应时间（尤其是在您加载大量小图像时）。但这并不是人们使用精灵的唯一原因。

如果您不使用 sprite 进行“鼠标悬停”显示，用户会看到图像消失一秒钟……而且看起来非常糟糕。这是因为如果您更改图像而不是仅仅移动精灵，它将加载新图像，并且最终用户可以看到加载时间。

.bad{
  background:url(abc.jpg);
}
.bad:hover{
  background:url(abcHover.jpg);
}

.good{
  background:url(abc.jpg) 0px 0px;
}
.good:hover{
  background-position:15px 0px;
}

精灵的另一个优点是您可以将所有图像保存在一个位置，并且在某些情况下它更有意义（对于菜单等）。

要确定要显示精灵的哪个区域，只需使用 Photoshop 或任何其他图像编辑软件。

【讨论】：

不客气 :) 如果您需要更多信息以便接受答案，请告诉我
我仍然想知道我是否应该走图像精灵的道路，想知道它真正开始得到回报的规模。听起来像是为开发添加了相当多的额外维护——尽管“鼠标悬停”的说法是错误的。您可以很容易地预加载悬停图像。
@DirkBoer mouseover 参数在 2009 年有效，现在浏览器更聪明，预加载悬停图像更容易。当您开始拥有几张图像（可能>5）时，图像精灵开始得到回报。在我的应用程序中，我可以看到减少请求是一件好事（并使 YSlow 高兴）。开发和维护成本只是设置“费用”，因为您可以自动化从一批图像创建精灵的过程。你如何做取决于你的偏好/技术堆栈。 hth

【解决方案2】：

主要好处是您的页面加载速度更快，主要是因为减少了 HTTP 请求。

您可以使用工具generate your sprite。

免责声明 - 我编写了这个工具。

【讨论】：

谢谢 Greg，你的精灵生成工具非常有用 :)

【解决方案3】：

在相同的跨浏览器中放置图像（尤其是文本旁边）要容易得多。您可以在不使用垂直对齐和填充的情况下向上/向下/向左/向右调整图像。

我发现如果所有图像都在一个文件中，跟踪它们会更容易。特别是因为我通常有一个透明的 png 图像，然后使用 ie6 的 gif 图像。我将我的 png 精灵图保存为 gif，并在我的 ie6 css 中添加一行带有背景图像的行，然后我的图像被切换。

我使用 Photoshop 或 gimp 获取精灵图中的大致位置，然后使用 firefox 微调位置。

【讨论】：

【解决方案4】：

是的，还有另一个好处。每个图像文件都有自己的标题，描述图像类型、颜色等。因此，当您将图像组合成单个精灵时，您会赢得一些 kb。

但正如您之前所说，大多数情况下，您可以通过减少 HTTP 请求数来取胜。

【讨论】：

【解决方案5】：

在确定要显示的区域方面，我通常会将元素放置在 100 的倍数的像素上。因此，如果有一个带有一堆 64x64 像素图标的精灵，我通常会将它们放在 (0, 100 )、(0, 200)、(0, 300) 等

这样，在设置我的所有背景位置属性时，我不必输入精确的测量值（或任何其他开发人员）并保存击键。

【讨论】：