雪碧图还有必要用吗
打开一个老网站，查看它的资源加载情况，可能会看到一张奇怪的图：几十个小图标挤在一起，像打地鼠游戏里的格子画面。这就是雪碧图（CSS Sprite），曾经前端优化的标配手段。那时候网速慢，每多一个图片请求，页面就得多等几秒。把所有小图标合成一张图，用 CSS 控制显示哪一块，能显著减少 HTTP 请求，让页面更快。
可现在不一样了。宽带普及，4G、5G 随手就来，很多人家里 Wi-Fi 都跑满百兆。再加上 HTTP/2 的推广，同一个域名下可以并行加载多个资源，不再像以前那样“一次只能下一张图”。这样一来，雪碧图省请求的优势被大大削弱。
现代替代方案更灵活
现在更多人用 SVG 图标或者 icon font。SVG 是矢量，放大不模糊，文件还小，适合各种分辨率屏幕。比如做个返回按钮，直接内联一个 SVG：
<svg width="24" height="24" viewBox="0 0 24 24">
<path fill="#000" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
</svg>既清晰又轻便，改颜色也方便，不用再为不同主题切好几套雪碧图。要是项目里图标多，还可以用 iconfont 或者 SVG Symbol 方式管理，按需引用。
而且雪碧图有个麻烦事——维护难。加个新图标，得重新出图，调整坐标。设计师改了个圆角，前端就得重新量位置，一不小心偏了几像素，整个界面就错位。相比之下，现代方案改起来轻松得多。
什么情况下还能用
也不是说雪碧图彻底没用了。如果你做的项目还得兼容老浏览器，比如 IE8，那 HTTP/1.1 下雪碧图依然有效。或者在一些极度追求首屏速度的场景，比如 H5 活动页，所有资源都得压到最低，合并几张小图成雪碧图，仍然有点价值。
但对大多数现代网页来说，它已经从“必选项”变成了“可选项”。技术演进就是这样，昨天的银弹，今天可能就成了历史痕迹。就像以前为了兼容低配机做降级处理，现在谁还会为 320x240 分辨率设计页面？
所以，雪碧图不是不能用，而是要看值不值得用。当你开始纠结“要不要合图”的时候，不如先看看实际性能数据。用 Chrome DevTools 看看资源加载耗时，说不定多出来的几个请求，根本影响不到用户体验。