什么叫 “雪碧图”?
大家好,我是前端西瓜哥。今天来随意聊聊雪碧图。
雪碧图是什么?
雪碧图,英文原名叫 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 请求数量,以及提前加载一些还未使用的小图片。
我是前端西瓜哥,关注我,学习更多前端知识。
什么叫 “雪碧图”?相关推荐
- python多张图片合并拼接,python制作sprite图、雪碧图
python多张图片合并拼接,python制作sprite图.雪碧图 整理图片集 找两个文件夹,yangying和zhaoliying,分别放上照片8张,共16张照片. 创建sprite.py # 多 ...
- gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
- 雪碧图工具sprity(20151201更新修复了同时合并多张图的bug)
前身是css-sprite,前几天帮新同事搭建环境,意外发现sprity在window下可以安装成功了,同时也发现node版本已经4点几了,自己电脑的版本还停留在0.10,赶紧把自己的node升级到最 ...
- html5复合选择器,web前端练习31----Css,选择器(基本选择器,复合选择器,属性选择器,伪类,伪元素,优先级,雪碧图练习)...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
- CSS 关于雪碧图预处理和后处理方案的讨论
广告:SF 里弄了个 CSS 小圈子,欢迎一起来讨论问题 前端小图标处理方案众多,本文主要介绍基于雪碧图的处理方案,分析雪碧图的预处理和后处理模式的得与失,以及在项目中通常会遇到的问题以及解决方案.其 ...
- 让字体图标代替雪碧图,减少请求带宽
一.什么是字体图标 icon font 及使用场景 从百度百科一下什么事icon font,没有解析.那就用在使用过程的对字体图标的理解,解释一下. 字体图标就是利用字体来显示网页中的的纯色图标,或 ...
- 图片三:numpy制作雪碧图(如何将多个图片拼接成一张图片)
下面是我自己写的代码,每个图片直接紧挨这另个一个图片,图片直接没有任何填充,所以你的图片应该是同等规格的,大小和尺寸必须一致 #制作雪碧图 def make_grid(data, size=(4,4) ...
- 深入浅出CSS(二):关于雪碧图、background-position与steps函数的三角恋情
[测试代码] HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha ...
- 教你玩转CSS 精灵图/雪碧图
目录 精灵图/雪碧图 图像拼合 - 简单实例 图像拼合 - 创建一个导航列表 图像拼合s - 悬停效果 精灵图/雪碧图 精灵图/雪碧图就是图像拼合 也就是单个图像的集合. 有许多图像的网页可能需要很长 ...
- 雪碧图sprity 合并多图使用心得
介绍 sprity 是一个模块化的雪碧图生成工具 会根据目录中的图片生成相应的雪碧图和样式文件,支持retina图,可以内嵌base64 编码格式的图,支持不同的图片格式和有不同的图片引擎可以选择. ...
最新文章
- CNN边缘检测--Richer Convolutional Features for Edge Detection
- 分布式理论CAP定理
- 解决:java.io.IOException: invalid constant type: 15
- ElementUI的el-table隐藏id列
- oracle 证书编号,说说Oracle的rowid
- iBase4J部署总结¥
- 说说Android桌面(Launcher应用)背后的故事(四)——揭秘Workspace
- 【原创翻译】文本编辑器
- c#halcon 联合编程经验总结
- npm下载axios
- 【LKJ】LKJ弧形限速小结
- 有关i386和i686
- 【sduoj】前端JSZip库的使用
- 无线网络dns服务器设置,netgear 无线dns设置教程
- 小红帽linux各功能中英,英文短剧lbrack;小红帽rsqb;剧本台词完整版---中英对照文本版...
- Java 获取文件的真实类型,修改后缀名也能识别出来
- 前端学习笔记(注册页面综合案例html5)
- 信息武器化——认知安全的必要性
- 软件测试和软件开发哪个发展更好
- mysql第五章 在线测试_PHP+MySQL实现在线测试答题示例