wanggao
commented
4 years ago 这篇文档给我科普了很多知识，非常感谢，亲测了一下目前智图的版本和WebP Converter的压缩效果，我贴下我的数据，一张1M的png，智图压缩后是138K，webp压缩后是207K，应该是这几年智图的压缩算法优化过了😊
Open leeenx opened 7 years ago
wanggao
commented
4 years ago 这篇文档给我科普了很多知识，非常感谢，亲测了一下目前智图的版本和WebP Converter的压缩效果，我贴下我的数据，一张1M的png，智图压缩后是138K，webp压缩后是207K，应该是这几年智图的压缩算法优化过了😊
leeenx
commented
4 years ago @wanggao 应该是毕竟过去3年多了
png图片压缩
常用的压缩工具：tinypng 或 腾讯智图 等。
图片经过多次压缩后会达到极限，并且压缩后的图片可能受损以至无法使用！如下：
png的极限压缩并不能带来高质量的图片，适应压缩才是王道。
想得到高质量低体积的图片，可以考虑使用 webp。
webp
来源: ISUX -- WebP 探寻之路
webp官网给出的文档压缩率并没有这么高，如下：
来源：A new image format for the Web
按官方说法，png转成webp最少也能减少 25%的文件大小。
以下是webp各浏览器的支持情况:
来源： caniuse
另外，微信手Q（X5）的支持情况如下：
来源：How well x5 browser support HTML5?
android 4.0以上和X5内核全面支持 webp格式，IOS暂时不支持
Webp 转换工具
线上工具：腾讯智图 、ppms-photo(http://ppms1.jd.com/photo) 本地工具：WebP Converter
WebP Converter 的安装请参见：https://developers.google.com/speed/webp/
mac 可用 homebrew 安装:
使用以下指令转换
webp具体参见：https://developers.google.com/speed/webp/docs/cwebp
ppms-photo
ppms-photo（http://ppms1.jd.com/photo）自带了图片转换webp格式的功能。只需要在上传图片后，在图片地址的后缀加上
.webp即可以得到webp格式的图片。以下是图片 1.png (372K) 上传到 ppms-photo 后生成的图片
http://img11.360buyimg.com/jdphoto/s750x1206_jfs/t2911/75/1468163299/372024/bdff05c6/5785a30aN0a87d9a7.png
添加
.webp，得到webp格式的图片http://img11.360buyimg.com/jdphoto/s750x1206_jfs/t2911/75/1468163299/372024/bdff05c6/5785a30aN0a87d9a7.png.webp
ppms-photo 有一个强大的功能：按质量取webp图。
http://img11.360buyimg.com/jdphoto/s750x1206_jfs/t2911/75/1468163299/372024/bdff05c6/5785a30aN0a87d9a7.png.webp 为例，
如果想获取质量为75%的图片，可以在.png.webp前加!75获得：
http://img11.360buyimg.com/jdphoto/s750x1206_jfs/t2911/75/1468163299/372024/bdff05c6/5785a30aN0a87d9a7!q75.png.webp
不在过观察过程中发现，ppms-photo转换webp时质量存在一个质量上限值：80%。可以 智图 、ppms-photo or WebP Converter 这个章节中看到数据。
WebP推荐质量75%
webp默认是有损压缩的，默认质量 75%，同时也是推荐值。
原图 与 75%WebP 对比：
本人观察不出 webp 的质量损失。
质量100%WebP 与 质量75%WebP 文件大小对比：
原图: 1.png 372K
质量100%WebP: 1.png 104K
质量75%WebP: 1.png 16K
视觉对比无差别而文件大小却相差 6~7倍，这个观察结果足使 75% 做为推荐值。
智图 、ppms-photo or WebP Converter
WebP Converter: 0.4.3
智图：2016.07.12(没有版本号，取日期)
ppms-photo：2016.07.12(没有版本号，取日期)
智图与WebP Converter的转换率如下：
原图： 1.png (372K)
ppms-photo跟WebP Converter转换率一样（ppms-photo使用的是WebP Converter），WebP Converter 全面优于智图。 建议使用 WebP Converter 或 ppms-photo 来做为 Webp的转换工具。
压缩对webp的影响
按官方或是ISUX描述，可能会有这样的观点：压缩后的图片转webp可得到更小的图片。
做个简单验证:
图片: 1.png (372K) 压缩工具：tinypng webp： WebP Converter 和 智图
本节webp的质量为75%
通过上面的数据，得到一个相反的结论：webp文体大小与图片压缩次数成正比
这个验证同时又一次证明智图是一个很差的webp工具！转换的结果是对ISUX的打脸
结论
使用官方的 WebP Converter 做为转换工具，并且图片转换前不要做任何图片压缩！