雪碧图优缺点

雪碧图（Sprite）的优缺点是什么？

概念：将多个小图片拼接到一个图片中，通过 background-position 和元素尺寸调节需要显示的背景图案。

.icon-home {
    width: 20px;
    height: 20px;
    background: url(sprite.png) no-repeat 0 0;
}
.icon-cart {
    width: 20px;
    height: 20px;
    background: url(sprite.png) no-repeat -20px 0;
}

优点

• 减少 HTTP 请求数：多个图标合并为一个文件，只需请求一次，显著提升首屏渲染速度（HTTP/1.1 时代收益很大）。
• 减少图片字节总体积：相比每个图标单独压缩，多张图共享一张调色板压缩率更高。
• 提前加载：合并图可一次性缓存，二次访问时几乎瞬时显示。
• 减少鼠标 hover 闪烁：避免替换 src 时白屏/loading 图标闪烁。

缺点

• 维护成本高：新增/修改/删除图标都需要重新合并整张图，且需精确计算每个图标的偏移。
• 缩放不灵活：使用 Retina 屏需要单独提供 2x、3x 图，雪碧图难以适配。
• 加载浪费：雪碧图必须整张加载，即使本次只用到其中一个图标。
• 不适合现代构建：HTTP/2 多路复用下，多个小文件的请求开销已大幅降低；现代方案多采用 SVG、iconfont、base64 或按需加载。

补充：随着 HTTP/2、雪碧图使用场景已大幅被以下方案取代：

• SVG / iconfont：矢量、可改色、按需引入；
• CSS Sprites 的现代变体：构建工具（如 webpack-spritesmith）自动生成。 推荐新项目优先使用 SVG sprite 或 iconfont，仅在兼容低版本 IE 的场景下才使用传统雪碧图。