css-sprites - 背景图像：精灵还是不精灵？

Question

任何人都可以评论是否将精灵用于图像的决定吗？我看到以下好处/权衡（其中一些可以减轻）：

---

单个图像上的精灵

优点：

• 需要管理的图像更少
• 更容易实现主题图像
• 图像交换 (JS/CSS) 发生得更快（因为它们不需要额外的图像加载）
• 由于 HTTP 请求更少，图像加载速度更快
• 要缓存的图像更少（尽管总体 KB 几乎没有差异）

缺点：

• 更多后台职位需要管理
• 图像负载可能过度膨胀（精灵可能包含未使用的图像），导致页面加载可能较慢
• 图片加载速度较慢，因为它们无法同步下载

Answer 1

我认为没有一个明确的答案。意见将根据需要和个人喜好而有所不同。

我的指导方针是始终评估最终用户的利益与开发人员的利益。IE。作为开发人员，您所做工作的真正价值是什么。

减少 HTTP 请求的数量始终是优化网页时首先要解决的问题之一。正确使用缓存可以实现与使用 sprite 相同的功能。毕竟，很多时候图形可以被缓存很长时间。

最小化脚本和样式表可能比在 sprite 中添加图形更有好处​​。

您用于管理精灵的代码可能会增加复杂性和开发人员开销，尤其是随着开发人员数量的增加。

在我看来，学习正确使用缓存头并正确配置您的 Web 服务器或代码通常可能是提高性能的一种更可靠的方法。

Answer 2

如果您有相当数量的菜单条目要在其中制作翻转图像，我建议您使用精灵系统而不是制作多个图像，所有这些都需要单独下载。我这样做的原因与您在帖子中提到的内容几乎一致，并进行了一些修改：

图像交换不会用 javascript 完成；我见过的大多数精灵只是在无序列表中的链接本身上使用 :hover 。

根据文件类型/压缩，图像文件本身的下载可以忽略不计。下载一个图像而不是多个图像通常在整体下载和加载方面更快。