如今行业内的图片格式越来越丰富，优化、压缩的方法也越来越多。我们该如何选择适合自己项目的图片优化方法呢？让我们来一起探讨图片优化的最佳实践吧。
我选择了几种常用的图片格式和优化方法来做实验，我会分别从【矢量图】和【位图】来进行分析。
一、矢量图 -- iconfont
什么是iconfont？
从字面意思理解就是“图标字体”。
为什么用iconfont？
1. 自由变换大小和颜色等样式
2. 画质清晰
3. 易于维护
4. 兼容性好
css能为字体加的样式对于图标字体都可适用。
如何使用iconfont？
这里我浓缩成了3步：
1. 在网上选择一款你喜欢的图标字体生产工具，将svg图片提交上去；
2. 下载包含字体文件、样式文件、Demo的文件包；
3. 使用代码，利用demo中的代码修改成适合你用的。
二、矢量图 -- svg
什么是iconfont？
谷歌和度娘上都有一大段专业的文字来描述，我的简单理解就是一种二维矢量图片格式。
为什么用svg？
使用方便
任意缩放
文件体积小
如何使用svg？
我分为2步：
1.导出 -- 用任何一款可以画矢量图的软件都可以导出svg格式图片，如：Adobe Illustrator／Sketch
这里可以注意的是，图形勾勒过程中可以去掉多余的锚点，锚点越少文件越小。
2. 应用 -- 导出的图片应用在网页中就像通常用jpg／png格式的图片一样引入相应的图片路径就行。
svg既然有这么多优点，又方便使用，我们来看看效果如何呢？下面分别用svg图和png图做一个简单的对比：
我们发现在质量几乎相同的情况下svg图片体积小很多，但别忘了svg是矢量图形，其实质量会比位图png好很多。如此美妙的图片格式我们还有什么理由拒绝使用它。
查理·芒格说：只有了解一个知识的局限性，才能真正拥有一个知识。
接下来我们看看svg的兼容性：
兼容性看似前景一片大好，但还是有些低版本浏览器无法支持。没关系，我们先把问题暂时放一放。后面再来聊一聊兼容性的解决方案。
三、 位图
关于位图我通过一系列实验，得出了两条结论：
- 图片颜色越丰富webp的压缩效果越好
- 颜色单一的图片压缩模式png优于webp优于jpg
为了方便理解我画了个简单的图表来描述png、jpg、webp与文件大小、图片颜色丰富程度的关系。
我是如何得出这个结论的呢？我在几百张图片实验中挑选了三组典型的案例来展示：
这组图片说明了图片颜色越单一png格式的压缩效果越好。
这组图片虽然看上去貌似颜色单一，但它标题的阴影所用的灰色通道占据了大量的颜色数，所以可以看出其webp的表现较优越。
这张颜色相对丰富的图片就更加能说明webp对于颜色数多的图片优异的表现能力了。
四、位图 -- webp
说了这么多webp到底是什么呢？
谷歌作为其开发商用了一大段文字来描述，我简单的理解webp就是一种压缩效果更好的图片格式。
为什么用webp？
体积更小
颜色丰富
如何使用webp？
关于如何使用webp我在线上找了一些转换压缩工具和软件，使用后发现这些工具的参数、稳定性都不太一样，就导致导出的图片效果也不太一样，非常影响我实验的最终效果。对比各种方案后还是选择工程化的方式比较靠谱。
五、gulp插件自动压缩
为什么选择工程化？
自动化 — 节约人力
标准化 — 避免出错
如何使用？
这里我选择了以下几种gulp插件供大家参考：
gulp插件的用法：
从上面的截图可以看出imagemin和webp插件除了可配置需要压缩的图片格式外，还可以自行配置压缩的质量。我想重点说明一下压缩质量可以根据自己的项目需要来配置参数，截图中是我根据实验中的图片总体输出质量和体积不断测试出的一个相对较合适的参数。
我分别做了三个方案的测试，测试对象是一个有124个图片文件的文件夹，结论如下：
从统计结果来看方案2(将大部分图片压缩转换成webp格式)的效果是压缩率最高的，虽然耗时相对较长，但比起人工手动在线压缩优势会大很多。
以下是方案2的实验截图：
实验得出的结论是从整体来看webp的压缩格式相比png和jpg都相对较优。
webp既然如此好用，我们来看看兼容性。
这样看来我们接下来要考虑兼容图片格式相关工作了。
六、按需加载
关于兼容浏览器不支持webp的方案我简单的为大家介绍3种：
1. h5标签
这个方案最简单，利用<picture><source>标签，具体实现方式如下截图：
当浏览器支持source标签srcset属性里的图片时会显示此图片，如果不支持则会向下兼容img标签里的图片，所以img标签里通常放入是浏览器都支持的普通图片格式。
但貌似兼容性并不是那么理想android又不支持新h5标签，欲哭无泪有木有？我还是决定再测试一下。
网上有资料说source标签也可以用src属性，于是我做了几组测试，测试结果如下图：
能展示微证券banner图的是android系统，能看到小黄人说明浏览器不支持webp图片格式，那第二张图是怎么回事？
我们通过下面这个表格来分析一下关于source标签里srcset这个属性。
通过测试得出以上表格结论，说明source标签是不支持“src”属性的。但是如果srcset里的路径图片是webp格式的话苹果相关的产品都是不支持，而且还不向下兼容，不显示任何图片。以此判断如果srcset里是webp格式，由于浏览器本身是支持srcset的所以当它遇见的是不支持的webp格式就没有再向下兼容。
于是我将srcset改为src，浏览器不支持src的属性，直接就向下兼容了。所以测试图片中的第二张图片下面展示的小黄人是因为source标签内用src属性，浏览器支持向下兼容了png格式的小黄人图片。
2. JS兼容方案
此段代码先判断浏览器是否支持webp图片格式，原理是先加载一张webp图片格式。如果浏览器能加载到图片的宽高说明是支持的，反之则不支持。
接下来就可以利用这段代码设置函数用来判断支持或不支持webp格式时的操作。
在html中设置参数分别用来插入支持或不支持webp格式时的图片路径。
3. 服务器端兼容方案
利用服务器端请求浏览器端的accept 头，支持webp图片格式的就返回webp格式的文件。这些配置可以用nodejs实现，也可以在nginx中完成。
七、动图--apng
既然我们有很多方案可以向下兼容图片，再介绍一个好用的动图格式——apng。
什么是apng？
简单说就是一种png扩展的动态图片格式（Animated png）。
为什么用apng？
支持24位彩色图像，表现更多动态图片细节
支持8位透明通道，背景完全透明
怎么用？
为大家介绍一种在线生成的工具，可以把每一帧图片倒入利用它生成apng格式的动图
https://ezgif.com/apng-maker
效果对比
我在网上找到一张图非常能说明gif、png、apng三者的关系。大家一看便知了。
apng兼容性
虽然兼容性看上去不是特别理想，但是apng自己会向下兼容，若是在不支持的浏览器上apng会只显示第一帧，那么图片看上去会像png图。
不支持apng时：
支持apng时：
八、最佳实践总结
综上所述那么多图片优化的格式和方法，我将它们和相应的情况做了个小结：
随着技术的进步会有越来越多的技术和方法来完善图片优化的工作，面对技术的进步，我们应该用辩证的方法看待问题。遇到困难敢于开拓，勇于实践，通过不断地探索和验证使我们更加接近真理。
