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