前言
大家好，我是抹茶。
图像作为方便记忆的信息呈现载体，在现如今的网站中已经成为了必不可少的一部分，了解图像文件格式的优缺点，选择最合适的方式，也是优化网站性能的一个重要举措。
本文将研究：图像文件都有哪些格式？不同的业务场景应该选择怎样的图片格式？
图像资源优化的核心
压缩是图像资源优化的核心。无论是选取何种图像的文件格式，还是针对同一种格式压缩到更小的尺寸，本质都是用更小的资源开销来完成图像的传输和展示。
在深入研究图像之前，我们先思考一下我们真的一定需要图像嘛？这不仅是因为图像资源与网页上的其他资源(HTML/CSS/JavaScript)等，有更大的开销，其次也要珍惜用户的注意力,如果一个页面打开后有很多图像，那么用户其实很难快速梳理出很多有效信息，即使获取到了也会让用户觉得很累。
所以，在使用图像作为信息传递的载体之前，先去思考其必须性。
图像的分类
1.矢量图
矢量图中的图形元素用一个对象来表示，包括颜色、大小、形状及屏幕位置等属性。适合用在文本、品牌logo、控件图标及二维码等构图形状比较简单的几何图形。
SVG是一种基于XML格式的图像格式，其全称是Scalable Vector Graphics(可缩放的矢量图形),目前几乎所有的浏览器都支持SVG。
矢量图的优点
能够在任何缩放比例下呈现出细节同样清晰的展示效果。
矢量图的缺点
对细节的展示效果不够丰富，对足够复杂的图像来说，比如要达到照片的效果，若通过SVG进行矢量图绘制，则所得的文件会大得离谱(不要再问为何细节丰富的图像不用svg格式了，不合适！)，但是即使绘制丰富图形也很难达到照片的真实效果。
从阿里巴巴的图标库中截取一部分矢量图，一般是这种风格的内容
SVG文件的内容如下图
SVG标签所包含的部分是矢量图的全部内容，除了必要的绘制信息，可能还包括了一些元数据，比XML命名空间、图层及注释信息。这些信息对浏览器绘制一个SVG来说并不是必要的，所以在使用前可以通过工具去除这些元数据来达到压缩的目的。
2.位图
位图是通过对一个矩阵中的栅格进行编码来表示图像的，每个栅格只能编码表示一个特定的颜色，如果组成图像的栅格像素点越多且每个像素点所能表示的颜色范围越广，则位图图像整体的显示效果就会越逼真。（HTML文档的渲染流水线最后渲染进程会将位图交给浏览器主进程作展示）
虽然位图没有像矢量图那种不受分辨率影响的优秀特性，但对于复杂的图片却能提供较为真实的细节体验，如下面这张图的细节表现，如果用矢量图来展示复杂得难以想象。
当把图像不断放大后，就会看到许多的栅格像素色块。每个像素存储的是图像局部的RGBA信息，即红绿蓝三色通道及透明度。通常浏览器会为每个颜色通道分配一个字节的存储空间，个色阶值。
一个像素点4个通道就是4个字节，一张图像整体的大小与其包含的像素数成正比，图像包含的像素越多，所能展示的细节就越丰富，同时图像就越大。
| 图像尺寸 | 像素数量 | 文件大小 |
|---|---|---|
| 100 * 100 | 10,000 | 39kb |
| 200 * 200 | 40,000 | 156kb |
| 500 * 500 | 250,000 | 977kb |
| 800 * 800 | 64,0000 | 2.5MB |
图像的压缩
对于图像文件而言，由于人眼对不同颜色的敏感度存在差异，所以便可通过减少都对某种颜色的编码位数来减少文件大小，甚至可以损失部分源文件信息，以达到近似的效果，使得压缩后的文件尺寸更小。
图像压缩的有损和无损
对于图像压缩，应该采用有损压缩还是无损压缩？如果都采用又该如何搭配设置呢？关于压缩的技术选型可以简单分成两步进行。
1.确认业务所要求的图像质量
如果业务所要求的图像质量较高，直接跳过有损压缩，进入无损压缩，否则进行有损压缩。是否进行有损压缩，是在了解了业务需求后的一个可选选项，而非必要的。
2.设计自动化执行
当确定了展示的图像质量后，便可利用无损压缩技术来尽可能降低图像大小。无损压缩是应当完成的工作环节。那最好能通过一套完善的工程方案，自动化执行来避免繁琐的人工重复工作。
图像的格式及其优缺点
实际上，不同的图像文件格式之间的区别，在于他们进行有损压缩和无损压缩过程中采用了不同的算法组合。
1.JPEG
JPEG是一种有损压缩算法，它通过去除相关冗余图像和色彩数据等方式来获得较高的压缩率，同时还能展现出相当丰富的图像内容。
JPEG在网站开发中经常被用作背景图、轮次图等，以呈现色彩丰富的内容。但由于是有损压缩，当处理Logo或者图标时，需要较强线条感和强烈颜色对比，JPEG图像可能会出现一些边界模糊的不佳体验，另外JPEG图像并不支持透明度。
JPEG包含了多种压缩模式，其中常见的有基于基线的、渐进式的。
基线式的压缩模式
基线式的JPEG加载顺序是自上而下的，当网络连接缓慢或不稳定时，其是从上往下逐渐加载完成的。
渐进式的压缩模式
渐进式模式是将图像文件分为多次扫描，首先展示一个低质量模糊的图像，随着扫描到的图像信息不断增多，每次扫描过后所展示的图像清晰度也会不断提升。
渐进式JPEG的优点是显而易见的，在网络连接缓慢的情况下，首先能快速加载出一个图像质量比较模糊的预览版本，这样用户便可据此了解图像的大致内容。
渐进式JPEG的解码速度会比基线的要慢一些，因为它增加了重复的检索开销。
如果所得到的图像不是渐进式JPEG，那么我们可以通过许多第三方工具来进行处理，例如imagemin、libjpeg、imageMagick等。值得注意的是，这个步骤应当尽量交给构建工具来自动化完成。
2.GIF
GIF是Graphics Interchange Format的缩写，也是一种比较早的图像文件格式。由于对支持颜色数量的限制，256色远小于展示照片所需颜色的数量级，所以GIF并不适合用来呈现照片，可能用来呈现图标或Logo会更适合一些，但后来推出的PNG格式对于图形的展示效果更佳，所以当下只有在需要使用到动画时才会使用GIF。
GIF展示的动画没有声音，最高支持256色的图像质量，如果动画长度较长，即便压缩过后文件也会较大。综合考虑，建议将内容较长的GIF动画转换为视频，成熟的视频编码格式可以让传输的动画内容节省网络带宽开销。
相比视频文件，GIF在解码阶段也是十分耗时的，所以出于对性能的考虑，在使用GIF前应尽量谨慎选择。 不同格式文件，在解码阶段的CPU占用时如下表所示
| 文件格式 | CPU耗时(ms) |
|---|---|
| GIF | 2,668 |
| WPEG-4 | 1,995 |
| WebM | 2,395 |
3.PNG
PNG是一种无损压缩的高保真图片格式，它的出现弥补了GIF图像格式的一些缺点，同时规避了当时GIF还处在专利保护期的压缩算法。
相比于JPEG，PNG支持透明度，对线条的处理更细腻，并增强了色彩的表现力，不过唯一不足是文件体积过大。通常在使用中会碰到PNG的几种子类型，有PNG-8、PNG-24、PNG-32等。
其中PNG-8也称为调色板PNG，除了不支持动画，其他所有GIF拥有的功能它都拥有，同时还支持完全的alpha通道透明。只要不是颜色数特别少的图像，PNG-8的压缩比表现都会更高一筹。在使用单帧图形图像时，应当尽量用PNG-8格式来替换GIF格式。
当所处理图像中的颜色超过256种时，就需要用到JPEG或者真彩PNG，真彩PNG包括PNG-24和PNG-32，二者的区别是真彩PNG-24不包括alpha透明通道，而加上8位的alpha透明通道就是真彩PNG-32。
PNG图像格式还有一个优点，就是便于扩展，它将图像的信息保存在“块”中，开发者变可以通过添加一些自动以的“块”来实现额外的功能，但所添加的自定义功能并非所有软件都能读取识别，大部分可能是只是特定的作图软件在读取时使用而已。
4.Webp
前面介绍的三种图像文件格式，在呈现位图方面各有优劣势：GIF虽然包含的颜色阶数少，但能呈现动画；JPEG虽然不支持透明度，但图像文件的压缩比高；PNG虽然文件尺寸较大，但支持透明且色彩表现力强。
开发者在使用位图时对于这样的现状就需要先考虑选型。假如有一个统一的图像文件格式，具有之前格式的所有优点，WebP就在这样的期待中诞生了。
WebP是Google在2010年推出的一种图像文件格式，它的目标是以较高的视觉体验为前提的，尽可能地降低有损压缩和无损压缩后的文件尺寸，同时还要支持透明度与动画。
根据WebP官方给出的实现数据，当使用WebP有损文件时，文件尺寸会比JPEG小25~34%，而使用WebP无损文件时，文件尺寸会比PNG小26%。
根据CanIuse.com于2024年8月的数据统计情况，WebP的兼容性如下
可以看到，除了IE，基本上主流浏览器都已经支持webP。
在工程项目中可以使用webp-loader将如此转换成webP。
5.SVG
不同于前面的格式是位图，SVG呈现的是矢量图，SVG对图像的处理不是基于像素栅格的，而是通过图像的形状轮廓、屏幕位置等信息进行描述的。
SVG这种基于XML语法描述图像形状的文件格式，可以无限放大并且不会失真，表示Logo等图标图像，无论分辨率多高的屏幕，一个文件就可以统一适配。作为文本文件，除了可以将SVG标签像写代码一样写在HTML中，还可以把对图标图像的描述信息写在以.svg为后缀的文件中进行存储和引用。
由于文本文件的高压缩比，最后得到的图像文件体积也会更小。要说缺点与不足，除了仅能表示矢量图，还有就是使用的学习成本和渲染成本比较高。
在工程中可以利用svgo-loader做一些压缩和优化工作。
6.Base64
准确地说，Base64并不是一种图像文件格式，而是一种用于传输8位字节码的编码方式，它通过将代表图像的编码直接写入HTML或CSS中来实现图像的展示，所以用他来存放图像信息就不需要发起网络请求。但是，一般经过Base64编码后端的图像大小，会膨胀四分之三，所以，只有对于小图(公司规范要求不超过8KB)而言，Base64才能体现出真正的性能优势。
总结
汇总对比表格
| 格式 | 压缩算法 | 优点 | 缺点 |
|---|---|---|---|
| JPEG | 有损压缩 | 能够呈现丰富的图像内容 | 可能出现边界模糊的情况 |
| GIF | 无 | 可以用来展示动画 | 不适合用来呈现图片，解码的耗时比视频格式差 |
| PNG | 无损压缩 | PNG支持透明度，对线条的处理更细腻，并增强了色彩的表现力 | 增加支持了透明度，图片信息更多故而相比其他，文件体积大 |
| WebP | 支持有损和无损 | 具有之前格式的所有优点 | 浏览器兼容性 （目前除了IE都支持） |
| Base64 | 无 | 无须等待网络请求 | 文件体积会膨胀四分之三 |
