这里选用png图片来进行不同方案的比较。
png/jpg/webp的区别简介
算法
- jpg是有损压缩，图片的视觉效果较差，压缩效果好，输出的图像体积很小
- png是无损压缩，图片的视觉效果较好，压缩效果一半，输出的图像体积较大
- webp 可选有损或者无损压缩，初衷就是为了同时拥有更好的压缩效果和视觉效果
透明度/动画 支持
- jpg 不支持透明度，不支持动画
- png 支持透明度，支持动画（apng，效果不好）
- webp 支持透明度，支持动画
浏览器支持
- jpg 现代浏览器都支持
- png 现代浏览器都支持
- webp 大部分现代浏览器支持
回归正题
基于上边的简单了解，可以看到前端目前的图片最好的方案是选择png图片，因为有更好的视觉效果和支持透明度（前端必须）和更好的浏览器支持（等浏览器发展起来可能就直接使用webp了）。
但当下要解决的一个问题就是png图片的网络加载，一张300kb左右的png图片就已经很夸张了，我们一般都会进行图片压缩来优化这个问题，图片压缩的方案有如下：
- Tinypng
- optipng
- pngquant
- ImageMagick
- ffmpeg
测试
首先这里要排除ImageMagick和ffmpeg，这两个并不是专业的图片压缩，而是图像处理和音视频处理，当然他们也有基本的图像处理能力，但效果肯定是没有其他三个做细分领域的更好。
先来看看所有的试验输出
详细信息
大图标
图片的命名解析
最底下的 origin.png 是原图 大小 300kb
其他的都是用工具生成出来的，命名格式为 {序号}.{工具}[参数值].png ，其中：
TinyPNG
直接在线工具转，TinyPNG没有提供可下载的工具，输出的图片大小为80kb，图片预览图无异常，后面有图片的视觉对比。这是本次对比中表现最好的。
ffmpeg使用默认的参数进行转换
jpg：
1 | ffmpeg -i origin.png 01.ffmpeg.jpg |
png：
1 | ffmpeg -i origin.png 02.ffmpeg.png |
可以看到jpg由于没有透明度的原因，背景为黑色，不符合前端用图要求，png压缩后大小为232kb，远远不如tinypng的压缩效果好。
optipng
这个有工具可以下载，下载后是exe，添加环境变量即可在任意cmd路径下使用：
1 | optipng -o7 origin.png -out 03.optipng_07.png |
其中-o参数为最大优化级别。OptiPNG 具有 0 到 7 的优化级别，其中 0 表示没有优化，1 是最低级别的优化，7 是最高级别的优化。较高的级别通常会提供更好的压缩，但同时也会增加处理时间。再详细信息中可以看到这两张图的大小分别为 200kb / 223kb ，远远不如tinypng的压缩效果好。
pngquant
1 | pngquant --quality=20 origin.png -o 09.pngquant_20.png |
其中quality参数是图片质量，可选1-100，值越小，压缩效率越高，图片质量越低，从详细信息可看到，当图片质量为18时，大小才刚好与TinyPNG差不多，并从封面上看不出任何瑕疵，打开图片也没看到瑕疵（这里就不演示了，和原图差不多的），但是正当我想发这篇文章的时候，我用微信接出来的图却发现了一些瑕疵，请继续往下看。。。
对比
从左到右，分别是 11.pngquant_18.png 00.tinypng.png origin.png ，这里上传上掘金应该还是有其他处理过，在微信上看截图是很明显的有瑕疵，这里也可以看到一点，最左边的图右中部分，可以看到有一条小痕。但还是建议大家自己去尝试一下，效果很明显的。
最后
因为我们只是处理静态图片资源，所以TinyPNG就是我们最好的选择，压缩率和视觉效果平衡得非常好。但如果是服务端像做动态资源图片处理的话，就不得不使用其他工具了，个人的话会选择pngquant，毕竟可选范围更大。有得商量的话，考虑一下买TinyPNG的服务也是非常好的一个选择。