JPG?GIF?PNG?前端如何选择图片格式?

最近准备给团队传授图片格式的知识,于是开了谷歌,欲找些 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-8PNG-24PNG-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%
  1. 文件 → 导出 → 导出为...
  2. 选择格式
    • PNG:勾选“较小文件(8位)”即可保存为 PNG-8
    • JPG:若你不想慢慢调整,品质直接粗暴地选择60%一般不会错
  3. 元数据选“无”
  4. 勾选“转换为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.compngcrush腾讯智图

以上就是本文的全部核心内容,但是我还不打算在此结束本文。


在上文“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 以上机型拍摄的图片传入电脑看,其效果很可能大大不如手机屏幕上看。

(完)

推荐阅读更多精彩内容