css-sprites - 背景图像 : to sprite or not to sprite?

标签 css-sprites

任何人都可以评论是否使用 Sprite 图像的决定吗?我看到以下好处/权衡(其中一些可以减轻):


单个图像上的 Sprite

优点:

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

缺点:

  • 需要管理更多后台职位
  • 图像负载可能过度膨胀( Sprite 可能包含未使用的图像),导致页面加载速度可能较慢
  • 图像加载速度较慢,因为无法同步下载

最佳答案

我认为这个问题没有一个明确的答案。根据需要和个人喜好,意见会有所不同。

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

减少 HTTP 请求数量始终是优化网页时首先要解决的问题之一。正确使用缓存可以实现与使用 Sprite 相同的效果。毕竟,图形通常可以缓存很长时间。

最小化脚本和样式表可能比将图形添加到 Sprite 中更有好处。

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

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

关于css-sprites - 背景图像 : to sprite or not to sprite?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3726988/

相关文章:

css - 如何赋予CSS Sprite 效果?

html - 为什么在访问链接后没有显示正确的 sprite?

jquery - CSS Sprites 不会悬停在执行 Action 上

html - 使用多个图像编码的 PNG + HTML 使用

html - CSS Sprite 按钮

css - 将超链接文本与 sprite 图像对齐

compass-sass - 为什么我的 compass Sprite 走错了路

CSS Sprite 未出现在 Firefox 中,但显示在 Chrome 中

css - 预加载 css Sprite

javascript - 为什么我的 spritesheet 被加载了多次?