最近准备给团队传授图片格式的知识，于是开了谷歌，欲找些 PPT 素材，却发现似乎没有人好好写过与图片相关的知识，要么只是照搬一些百科的内容，要么写得太多 CRC、Gamma 之类的专(zhuang)业(B)术语，要么花了大量篇幅介绍它们的全称和历史（知道了全称和历史也不能把图片用得更好啊）。于是我果断自己写一篇。
其实，对于 JPG、GIF、PNG 这3种格式的选择，其套路非常简单粗暴——
照片用 JPG。
动画用 GIF。
Logo、Icon 等小图用 PNG-8。
非特殊情况，尽量不要用 PNG-24 和 PNG-32。
而 WebP 这种谷歌发明的新格式，虽然比上述任何一种格式都要好，但是截至现在（2017年10月），它的浏览器兼容性还不行，所以暂时还不能用（或者用两套图片，不过我嫌麻烦）。
WebP 格式的兼容性（截图自 caniuse 网站）
另外，最近还流行矢量图片 SVG 和 Icon Font，本文暂时不介绍这俩，以后有机会我再写。
好了，懒人看到这就可以关掉本文章了（或者直接拉到最后，打赏点赞加评论）。
下面介绍一些比较原理性的知识（但也不是很原理，反正像 CRC 呀 Gamma 呀之类的词我是不会用的）。
主要内容
- 从早期的 BMP 格式讲起
- 颜色表简介和作用
- PNG 的颜色表和特性
- GIF 的特性
- JPG 的特性
- JPG 的“连续”格式
- JPG、GIF、PNG 功能对比
- 所以如何选择格式（结论上文已经给出，下文详解原因）
- Photoshop 保存图片的正确姿势
- tinypng.com - 让文件再小一点
- 附加内容1：元数据
- 附加内容2：色彩空间
基本上，我可以自信地说——关于前端攻城狮和设计狮如何使用 JPG、GIF、PNG，看本文就够了。
从早期的 BMP 格式讲起
BMP 格式图片，取自英文单词 Bitmap，Windows 中文版译作“位图”（不知道微软什么人的烂翻译），是早期 Windows 系统（XP以及更早期）所用的图片格式。
BMP 的文件结构很简单，没有压缩，一个一个像素地记录起来。
BMP 的分类
Windows 自带的经典应用《画图》支持以下4种 BMP 格式：
《画图》所支持的4种 BMP 格式
- 单色位图（1位）——1字节记录8个像素，图片一般只有黑和白。
- 16色位图（4位）——1字节记录2个像素，图片有16种颜色。
- 256色位图（8位）——1字节记录1个像素，256种颜色。
- 24位位图——3个字节记录1个像素，红、绿、蓝三原色各占一个字节，总共大约1670万色，即真彩色。
给小白补一波计算机基础知识：计算机数据是用二进制数字来存储的，1个字节就是一个8位的二进制数字，1024字节就是1KB，1024KB就是1MB，1024MB就是1GB。
4位二进制数字，换成十进制可表示从0到15，共16个数，所以16色位图每个像素占用4位，即半个字节。
8位二进制数字，换成十进制就是从0到255，所以256色位图每个像素占一个字节。
那么问题来了……
16色、256色位图都有哪些颜色？
16色、256色图片文件除了存储每个像素之外，还会存储一份颜色表（Palette，亦译作调色板、色盘），从真彩色的1670万种色彩里任意挑选16、256种颜色，构成一个索引。颜色表大概长这个样子：
0号色：#000000
1号色：#3385FF
。。。
255号色：#FAFEF2
在 Photoshop 里打开一张256色图片，然后点击菜单 图像 → 模式 → 颜色表，可以看到当前图片的颜色表：
Photoshop 里查看颜色表
游戏机的颜色表
游戏机的颜色表
把颜色表用得最666的要数80年代的FC游戏机了。
《超级马里奥》使用颜色表实现金币闪亮效果
是不是瞬间明白了颜色表是什么鬼？
颜色表的作用
对于 BMP 图片来说，若图片尺寸相等，16 色 BMP 的文件大小当然比 256 色 BMP 要少一半，因为可以用更少的字节数（位数）来存储一个像素。
而 GIF 和 PNG 图片更高端，除了支持16色、256色的颜色表之外，还可以支持256色以内的任意颜色数。例如222色、111色、6色7色8色……它们都能支持。
所以……
颜色数越少，文件体积越小。
颜色数越少，文件体积越小。
颜色数越少，文件体积越小。
带颜色表的 PNG 和不带颜色表的 PNG
PNG可以大致分为3种：PNG-8、PNG-24、PNG-32。
其中后面那个数字8、24、32代表位数，就像上述的BMP分4位（16色）、8位（256色）、24位（真彩色）一样。
PNG 除了24位外还能有32位，除了红、绿、蓝三原色之外，还有个透明通道，从0-255表示从透明到半透明到不透明。
PNG-8 带颜色表，而且不像 BMP 只有固定的16色、256色，PNG-8 的颜色数可以从2种到256种之间任意种，像123种、10种颜色之类的颜色数，PNG-8 都是支持的。而且通过强大的压缩算法，PNG-8 可以真正做到颜色数越少，文件体积越小。
带颜色表的 GIF
GIF 图片是带颜色表的，它最多支持256色，也支持256以内任意数量的颜色表，但是不支持真彩色。
GIF 的特性是帧动画。
不带颜色表的 JPG
截图来源于PS CC2017：文件 → 导出 → 存储为 Web 所用格式（旧版）
JPG 不支持颜色表，也不支持透明，只有真彩色。
JPG 的特性是有损压缩。对于网络传输来说，有损压缩是个优点。它可以削减一些肉眼难以察觉的细节，让图片体积大大减小。有损压缩特别适用于相机拍摄的照片。
“连续”格式的 JPG
截图来源于PS CC2017：文件 → 存储为... → “JPG”格式 → 保存
常用 Photoshop 的童鞋可能已经发现，另存为JPG的选项对话框（如上图）中，有个“连续”选项。这是什么意思呢？
“基线”格式的JPG加载过程：从上往下
“连续”格式的JPG加载过程：从模糊到清晰
“基线”和“连续”格式的JPG，主要是在网速比较慢的时候，图片加载方式不同。如上面两个动图所演示。
JPG、GIF、PNG 功能对比
| JPG | GIF | PNG-8 | PNG-24 | PNG-32 | |
|---|---|---|---|---|---|
| 颜色表支持 | ◉ | ◉ | |||
| 真彩色支持 | ◉ | ◉ | ◉ | ||
| 有损压缩 | ◉ | ||||
| 帧动画 | ◉ | ||||
| 透明像素支持 | ◉ | ◉ | ◉ | ||
| 半透明度支持 | ◉ | ◉ |
JPG的主要特性是有损压缩。
GIF的主要特性是帧动画。
PNG的主要特性是半透明。
（注意GIF不支持半透明，只能完全透明或者不透明。）
如何选择格式？
照片用 JPG。
动画用 GIF。
Logo、Icon 等小图用 PNG-8。
非特殊情况，尽量不要用 PNG-24 和 PNG-32。
这是本文开头的直接总结。
下面讲原因。
同一张图，PNG-8 的体积小于 GIF
首先，Logo、图标等小图片，整张图片一般不多于256色，因此当然选择带颜色表的图片格式。而事实证明，对于同一张图，PNG-8 的体积是小于GIF的。因此，若不是动画，小图片请用 PNG-8。
然后，照片、横幅等大图，就像在线听歌一样。如果在线听无损音乐，那得很大的带宽才行。我们在线试听歌曲，目的就是听听这首歌，不会非常注重音质（而且我的木耳是听不出MP3和无损的区别的）。同样道理，放在网页中的大图，用户肯定不会太看重画质，能看清楚内容就行。因此，照片大图用有损压缩的JPG。
根据经验，JPG的画质一般选择 60% - 70%。当然如果你要求较高，可以在PS里一边看预览一边慢慢调整直到自己满意。
Photoshop 保存图片的正确姿势
① 文件 → 导出 → 导出为...
②选格式 ③元数据“无” ④不嵌入颜色配置
PNG：勾选“较小文件（8位）”即可保存为 PNG-8
GIF 无特殊选项
JPG：若你不想慢慢调整，品质直接选择60%
- 文件 → 导出 → 导出为...
- 选择格式
- PNG：勾选“较小文件（8位）”即可保存为 PNG-8
- JPG：若你不想慢慢调整，品质直接粗暴地选择60%一般不会错
- 元数据选“无”
- 勾选“转换为sRGB”，不要勾选“嵌入颜色配置”
tinypng.com - 让文件再小一点
tinypng.com - 一个帮助压缩图片的网站
tinypng.com 是一个帮助进一步压缩PNG和JPG图片的网站，使用方法很简单，只要打开网站，然后把需要压缩的图片从桌面拖入这个网站中间的框里，然后坐等几秒钟，就可以下载被压缩的图片了。
据网站的介绍，tinypng 可以有更好的压缩算法，而且通过智能地减少颜色数，达到有效的压缩。
而喜欢命令行的程序猿，也可以试试 pngcrush 工具。
另外，腾讯ISUX团队也出品了一个类似 tinypng 的在线图片压缩工具，称为智图。它除了 PNG 和 JPG ，还支持 WebP。
总结一下
- 16色（4位）、256色（8位）图片的颜色由颜色表决定。
- 减少颜色数有助于减少图片体积。
- 照片用 JPG，动画用 GIF，图标用 PNG-8，尽量不用 PNG-24 和 PNG-32。
- PS保存图片的正确姿势：文件 → 导出 → 导出为...
- 第三方工具：tinypng.com、pngcrush、腾讯智图
以上就是本文的全部核心内容，但是我还不打算在此结束本文。
在上文“Photoshop 保存图片的正确姿势”中， “导出为”对话框内提及了两个姿势：元数据选“无”、色彩空间中勾选“转换为sRGB”，不要勾选“嵌入颜色配置”。那么，元数据和色彩空间到底是什么鬼？为什么要用上述姿势？下面给两篇附加内容，让本文真正地做到“看这篇就够了”（自信脸）。
附加内容1：元数据
元数据是什么鬼？
Photoshop：文件 → 文件简介...
在 Photoshop 中打开一张照片，然后点击菜单 文件 → 文件简介... ，即可看到这张照片的元数据。
维基百科对元数据的解释是描述数据的数据。所以图片的元数据就是描述图片的数据咯。
带元数据的图片文件会额外地加个几KB，存储这张图片的作者、拍摄日期、标题、版权、相机等文本信息。它会占用一些空间（例如JPG的元数据最大占用64KB），但是网页里的图标或背景图的元数据是没有任何用处的（除非你要声明图片版权）。
因此，元数据选择“无”，把鸡肋的元数据清除，可以减小图片体积。
附加内容2：色彩空间
sRGB 色彩空间
注明一下版权：上图转自维基百科。
上图中，那大块彩色的像舌头的东东，表示人类眼睛所能看到的所有颜色。中间的三角形框框，表示一般显示器能显示出来的所有颜色，这个三角形框框内的颜色，就是 sRGB 标准。
而世界上并不仅仅有 sRGB 标准，毕竟 sRGB 只框住了全世界颜色不到一半。
各种色彩标准
注明一下版权：上图也转自维基百科。
Photoshop 支持多种色彩空间，图片文件只要嵌入颜色配置文件，即可使用特定的色彩空间。
Photoshop 新建文档，可以选择多种色彩空间
如果色彩空间不对，会让图片的色调要么变得过于暗淡，要么变得过于鲜艳。例如，Adobe RGB 标准的 #00FF00 （纯绿色）会比 sRGB 标准的同种颜色（#00FF00）看起来要更鲜艳。
Photoshop 导出图片时，色彩空间中勾选“转换为sRGB”，不要勾选“嵌入颜色配置”，就是为了解决图片色调不对的问题。
因为多数用户的屏幕只能显示 sRGB 标准的色彩，所以如果原图用了更高级的色彩空间，转换成sRGB就不需要额外嵌入颜色配置。毕竟，颜色配置也是占空间的。而且有些浏览器还会直接无视颜色配置（不支持色彩空间），直接按sRGB显示。
如果原图本来是 sRGB 的，那么勾选“转换为sRGB”将不会有任何作用。不过，若不知道原图的色彩空间，勾选它总是不会错的。
值得一提的是，从 iPhone 7 开始，苹果系列手机的屏幕和相机支持称为 DCI-P3 的色彩空间，提供了比一般屏幕和相机（也就是 sRGB）更多的色彩。因此，把 iPhone 7 以上机型拍摄的图片传入电脑看，其效果很可能大大不如手机屏幕上看。
（完）
网友评论