Create by jsliang on 2019-3-1 13:27:47
Recently revised in 2019-3-5 21:35:45

Hello 小伙伴们，如果觉得本文还不错，记得给个 star ， 你们的 star 是我学习的动力！GitHub 地址

在我们日常工作中，我们会经常使用 JPG、PNG、GIF、SVG 等格式图片。

但是，你真的懂图片吗？不同格式图片的区分，它们的优劣势以及使用场景等……

下面，jsliang 将根据搜集的资料，进行关于图片的科普。

一 目录

不折腾的前端，和咸鱼有什么区别

目录
一 目录
二 前言
三 正文
3.1 BMP
3.2 JPEG
3.3 PNG
3.4 GIF
3.5 SVG
3.6 Base64
3.7 WebP
3.8 雪碧图
四 总结
五 参考文献

二 前言

返回目录

在 jsliang 2 月 27 日进行面试的时候，突然被一个系列的问题问倒了：你熟悉图片吗？能讲讲 JPG、PNG、GIF 的适用场景吗？然后 PNG 为什么会有 PNG-8 和 PNG-24？知道 SVG 吗？能讲讲它们与 JPG、PNG、GIF 的差别吗？……

刚开始 jsliang 还能回答下，后来就感觉招架不住了！

于是，爱折腾 的我回头就是一个查资料，写下了这篇文章。

三 正文

返回目录

首先，我们要清楚的是，图片从类型上分，可以分为 位图 和 矢量图。

• 位图：位图又叫点阵图或像素图，计算机屏幕上的图是由屏幕上的发光点（即像素）构成的，每个点用二进制数据来描述其颜色与亮度等信息。因为这些点是离散的，类似于点阵，同时因为多个像素的色彩组合就形成了图片，所以叫这种图为点阵图或者位图。常见位图有 JPG、PNG、GIF 等格式。
• 矢量图：矢量图又叫向量图，它是由一系列计算机指令来描述和记录一幅图，一幅图可以解为点、线、面等组成的子图。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计等，而在前端中比较常用的矢量图有 SVG 等格式……

然后，我们按压缩划分，可以将图片分为 无损压缩 和 有损压缩。

• 无损压缩：无损压缩是对文件本身的压缩，使图片占用的存储空间变小，并且不会损害图片的质量。常见无损压缩有 PNG 等。
• 有损压缩：有损压缩是对图像本身的改变，会对图片质量造成损害，随着压缩次数越来越多，那么图片质量会越来越差。常见有损压缩有 JPG 等。

最后，究根结底，我们需要知道在计算机中，像素是用二进制来表示的。不同图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，那么它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。

一个二进制位表示两种颜色 【 0|1 <——对应——> 黑|白 】，如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 中颜色。例如：

• PNG-8：它有 2^8 种颜色，即 256 种颜色。
• PNG-24：它有 2^24 种颜色，即 1677216 种颜色（1600 万种颜色）。

OK，知道了这些基础知识，我们就按图片出现的顺序，一一讲解下常用的图片知识吧！

3.1 BMP

返回目录

早期使用的图片格式，叫 BMP，取自英文单词 BitMap，Windows 中文版译作 位图，它的文件结构很简单，没有压缩，一个一个像素地记录下来。

如果你的系统是 Windows，你可以打开 画图 工具，然后点击另存为，你可以看到保存的选项中有个 24位位图 的格式，即 1600 万色的图片。

当然，历史总在前进，BMP 这种没有压缩的图片格式，逐渐被后起之秀代替了。

不知道为什么，查不到 JPG、PNG、GIF 的出现顺序，下面只好按我个人记忆方式来编文章段落。

3.2 JPEG

返回目录

关键字：有损压缩、体积小、加载快、不支持透明

简要介绍：

JPEG/JPG 格式，是应用最广泛的图片格式之一，特点如下：

1. JPEG/JPG 采用特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比，因此它的压缩文件尺寸较小，下载速度快，成为互联网最广泛使用的格式。
2. JPEG/JPG 因为属于有损压缩，所以当压缩级别逐渐增大的时候，图片质量会逐渐损耗，所以压缩要适当。

在合适的场景下，即便我们将图片体积压缩至原有体积的 50% 以下，JPG 仍能保持住 60% 的品质，且因为 JPG 格式以 24 位图存储单个图，可以呈现多达 1600 万种颜色，足以满足大多数场景，

适用场景：

1. 大的背景图
2. 轮播图
3. Banner 图

3.3 PNG

返回目录

关键字：无损压缩、质量高、体积大、支持透明

简要介绍：

PNG（可移植网络图形格式）是一种无损压缩的高保真的图片格式，它的压缩比高于 GIF，支持图像透明，可以利用 Alpha 通道调节图像透的明度。

PNG 分 PNG-8 和 PNG-24。

• PNG-8：PNG-8 是无损压缩的索引色彩模式。PNG-8 是 GIF 格式很好的替代，虽然不能像 GIF 一样有动画，也不兼容 IE6 等老旧浏览器。PNG-8 最多支持 256 中颜色。
• PNG-24：PNG-24 是无损压缩的直接色彩模式。PNG-24 会比 JPEG、GIF、PNG-8 占用更大的存储空间。PNG-24 可以呈现 1600 万种颜色。

2^8 = 256，2^24 = 1677216

适用场景：

• 普遍场景

1. 小的 Logo，颜色简单且对比强烈的图片或者背景。
2. 颜色简单、对比度强的透明小图。

• 什么时候使用 PNG-8，什么时候使用 PNG-24 呢？

1. 理论上，位数最大的就是最好的，直接上 PNG-24；但是实际上，为了避免体积过大的问题，一般在适合使用 PNG 的场景中，优先选择比较小巧的 PNG-8。
2. 如何确定是使用 PNG-8 还是 PNG-24，这就看你的 UI 设计师或者负责人能接受那个了，除非你设计功底非常好，要不然不要做这个选择！

3.4 GIF

返回目录

关键字：支持动画

简要介绍：

GIF 格式，不仅仅支持静止图片，也可以支持动画，并且支持透明背景图像，适用于多种操作系统，体积很小，网上小动画很多是 GIF 格式。但是色域不太广，只支持 256 种颜色，这意味着颜色种类少。

GIF 格式的压缩率一般在 50% 左右。

适用场景：

1. 动图

3.5 SVG

返回目录

关键字：文本文件、体积小、不失真、兼容性好

简要介绍：

SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式，是可缩放的矢量图形。与 JPG、PNG、GIF 等位图不同，SVG 可以直接用代码来描绘图像，并通过任意文字处理工具打开 SVG 图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到 HTML 中通过浏览器来观看。

SVG 格式的图片可以任意放大图形显示，并且不会损失图片质量；SVG 格式可编辑和可搜寻；SVG 格式平均来讲，比 JPG 和 GIF 格式文件要小，并且下载也比较快。

SVG 文件通常是极小的，但是当图形的复杂度变高的时候，SVG 文件大小会随之上升，因为 SVG 在渲染的时候需要比像素图更多的计算能力，这也意味着性能的损耗。所以在 Logo 等图上，应尽可能简洁。

适用场景：

1. SVG loading 效果图：SVG-Loaders
2. 转换工具：在线 JPG、PNG 转 SVG 工具
3. 矢量图标库：阿里巴巴矢量图标

3.6 Base64

返回目录

关键字：文本文件、依赖编码、小图标解决方案

简要介绍：

Base64 并非一种图片格式，而是一种编码方式，它类似于雪碧图，是作为小图标解决方案而存在的。和雪碧图一样，Base64 图片的出现，也是为了减少加载网页图片时对服务器的请求次数，从而提升网页性能。Base64 是作为雪碧图的补充而存在的。

Base64 是一种用于传输 8 Bit 字节码的编码方式，通过对图片进行 Base64 编码，我们可以直接将编码结果写入 HTML 或者写入 CSS，从而减少 HTTP 请求的次数。

适用场景：

1. 图片的实际尺寸很小。尽可能在图片不超过 2KB 的情况下（可查看掘金的 Base64 图）。
2. 图片无法以雪碧图的形式与其他小图结合（合成雪碧图仍是主要的减少 HTTP 请求的途径，Base64 是雪碧图的补充）。
3. 图片的更新频率非常低（不需要我们重复编码和修改文件内容，维护成本较低）

为什么大图不使用 Base64？
因为 Base64 编码后，图片大小会膨胀为源文件的 4/3，如果将大图编码到 HTML 或者 CSS 中，这样后者的体积增加，即便减少了 HTTP 请求，也无法弥补庞大的体积带来的性能开销。

如何获取：

1. Webpack 的 loader：url-loader
2. 在线编码工具：图片转换Base64

3.7 WebP

返回目录

关键字：年轻的全能型选手

简要介绍：

2010 年由 Google 提出，转为 Web 开发的一种旨在加快图片加载速度的图片格式，支持有损压缩和无损压缩。

WebP 像 JPEG 一样对图片细节丰富，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片。

官方介绍：与 PNG 相比，WebP 无损图像的尺寸缩小了 26％。在等效的 SSIM 质量指数下，WebP 有损图像比同类 JPEG 图像小 25-34％。 无损 WebP 支持透明度（也称为 alpha 通道），仅需 22％ 的额外字节。对于有损 RGB 压缩可接受的情况，有损 WebP 也支持透明度，与 PNG 相比，通常提供 3 倍的文件大小。

适用场景：

由于 WebP 支持情况仅 Chrome、UC 等几家浏览器支持，所以局限性较大，目前暂不考虑使用。

参考自 Can I Use 网站中的浏览器支持程度：webp

3.8 雪碧图

返回目录

雪碧图，CSS Sprites，听起来就很清爽的一种图片，刚开始的时候 jsliang 以为是大街小巷上卖的 3 块钱瓶装雪碧饮料上的图片，后来知道压根不是同一码事。

雪碧图不属于图片格式，而是一种图片应用形式。但是因为它在前端赫赫有名，经常使用，故此将其记载下来。

雪碧图又叫精灵图，因为 Sprites 的原因叫 “雪碧”，出现的原因是随着网速的提升，同时因为请求次数过多的时候会卡网页，所以我们就将 N 张小图集成到一张大图上，从而提升页面打开的速度。这种多张小图放在一张大图上的操作，就叫做精灵图（雪碧图 - CSS Sprites）

那么，平时如何使用雪碧图呢？

.img{background:url(../images/img.png)  no-repeat;}
.my-head{height:160px;width:120px;background-position:0 0;}
.my-picture{height:292px;width:1253px;background-position:0 -160px;}
复制代码

@mixin img{background:url(../images/img.png) no-repeat; }
@mixin my-head{height:160px;width:120px;background-position: 0 0;}
@mixin my-picture{height:292px;width:1253px;background-position: 0 -160px;}
复制代码

如上面代码所示，现在网上有非常多的雪碧图制作工具，我们只需要将小图发到工具上去，就可以生成大图，同时获得它的 css/sass 代码，而不需要自己一个一个定位。

这是 Windows 版本的工具，网上有很多雪碧图/精灵图制作工具，这里就不推荐本人使用的了。

MDN 定义：图像精灵（sprite，意为精灵），被运用于众多使用大量小图标的网页应用之上。它可取图像的一部分来使用，使得使用一个图像文件替代多个小文件成为可能。相较于一个小图标一个图像文件，单独一张图片所需的 HTTP 请求更少，对内存和带宽更加友好。

四 总结

返回目录

至此，我们对图片的介绍就结束了，在这里我们列个表进行汇总：

格式	使用场景
JPG/JPEG	1. 大的背景图； 2. 轮播图； 3. Banner 图
PNG	1. 小 Logo； 2. 透明背景
GIF	动态图片
SVG	能适应不同设备且画质不能损坏的图片
Base64	大小不超过 2KB，且更新率低的图片
雪碧图	小图太多的时候，集中成一张图片减少 HTTP 请求

雪碧图不属于格式，但属于一种应用形式

最后，在开发中会常用到一些资料，下面是 jsliang 在图片方面的个人资源，如果小伙伴有其他的好用资源推荐，可以 QQ 或者评论留言：

• 常用优秀资源：

1. SVG loading 效果：SVG-Loaders
2. 矢量图标库：Iconfont-阿里巴巴矢量图标库
3. 在线制作 Logo：U 钙网
4. 压缩 PNG 或者 JPG：TinyPNG

• 获取图片素材：

1. 千库网：地址
2. 包图网：地址

• 在线转换工具：

1. JPG、PNG 转 SVG
2. JPG、PNG、GIF 转 Base64
3. JPG、PNG、GIF 转 ICO

• 其他资料支持：

1. Can I Use —— 查看各种浏览器支持程度：caniuse.com

五 参考文献

返回目录

1. 《jpg、png、svg、gif等图片格式的区别》
2. 《PNG、JPEG、GIF、SVG应该用哪个？》
3. 《图片优化——质量与性能的博弈》
4. 《横向对比 gif、jpeg、png、svg，教你如何合理选择图像格式》
5. 《JPG？GIF？PNG？前端如何选择图片格式？》
6. 《矢量图与位图的区别》
7. 《无损压缩和有损压缩是数码图像文件压缩的两种类型。》

---

jsliang 广告推送：
也许小伙伴想了解下云服务器
或者小伙伴想买一台云服务器
或者小伙伴需要续费云服务器
欢迎点击 云服务器推广 查看！

jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/LiangJunron…上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。