大家好,我是前端西瓜哥。今天来随意聊聊雪碧图。
雪碧图,英文原名叫 CSS sprites。
sprite 指的是精灵。
我们喝的雪碧,它的英文也是 sprite,应该直译为 “精灵” 的。但要符合中国市场,因为你不能说我喝的饮料叫“精灵”,那特别怪。于是就走音译的路线,翻译成 “雪碧” 了。
所以雪碧图更正确的叫法应该是 “精灵图”。
那为什么叫精灵呢?
做 2D 游戏的时候,有一个术语叫做 sprite,其实就是融合了各种资源的图片,图片里面可能会有一个角色的一套动作、或是组成背景的不同内容的块 tile 等等。
游戏角色的行为(攻击、跳跃、蹲下等),表现出来其实就是不同图片的切换,状态很多,对应的图片很多,这样的话我们就要保存非常多的图片,这不太好维护(但也不是不可以)。
所以通常会将这个角色的所有动作放到一个图片上,当角色行为发生变化时,就修改位置和宽高信息截取到对应的状态图片。
前端说,那我也可以这样搞嘛,我们把一些小图片(比如图标)也都整合到一张大图片,然后你通过 background-position 等属性使用你需要的区域就好了。
上面是 stackoverflow 网站中,编辑器所有图标的 normal、hover、actived 状态效果。
然后我们在使用的地方用 background-position 设置好位置:
雪碧图的主要作用是减少 HTTP 请求数量。
假如你有 100 张小图片,你要发起 100 个请求。如果你合并成一个大图片,那你只需要发一个请求。
这在 HTTP/1 上是有不错的优化效果的,因为 HTTP/1 下不能充分利用 TCP 带宽,一个 TCP 同时只能有一个请求,请求太多就要排队,导致严重的阻塞。
到了 HTTP/2 因为多路复用特性的缘故,则没有太大必要了,所有的请求都是通过流的方式打散发送的,充分利用 TCP 的带宽。
另一个作用是 提前加载好需要用到的图片。
假设我们的一个按钮是用图片做的,hover 时会替换图片。如果分成独立的两个图片,hover 就会出现闪烁的效果。
这是因为图片还没有下载好,在图片完成下载前,显示的是空白,直到图片下载完成才替换上图片。
如果我们将按钮的所有状态都放到雪碧图了,就不会有这个问题了。当然还有一种方式就是通过 JS 手动做其他状态小图片的缓存。
雪碧图其实和雪碧没关系,它和 sprite(精灵)有关系。
sprite 是一种将多个图片资源合并成一张大图片的做法,用到网页,能减少 HTTP 请求数量,以及提前加载一些还未使用的小图片。
我是前端西瓜哥,关注我,学习更多前端知识。