背景图像：精灵还是不精灵？

Question

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

---

单个图像上的精灵

优点：

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

缺点：

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

Answer 1

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

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

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

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

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

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

Answer 2

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

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

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