关于一些图片压缩能力的测试 HEIF 确实最强！

[xiaoping1111]

背景说明 我最近的关注领域一直是图像处理领域，ImageX 是 火山引擎推出的一款图像处理服务；

对于图像处理服务，一般的 APP 开发者或者网站开发者其实都不陌生，现在的手机一个用户拍摄了一张图片现在基本都在 2-10MB 左右，如果一个网站或者 APP 每次打开一张图片需要加载图片那可真的是太浪费流量了；

环境准备

火山引擎的 ImageX 地址是： https://console.volcengine.cn/imagex/overview/ 我在这里已经实名认证过了，需要实名认证才可以使用；默认勾选了按日流量计费；

从计费模式上看，这个图像处理服务还自带 CDN+存储+图像处理的多合体的服务，对于我们的 APP 开发者或者站长来讲真的是简单不过了；最重要的是每个月免费 10GB 流量+10GB 永久存储，利国利民，对于我这种测试一下应该不会收我很多费用

测试素材准备：

总共两张图片：分别是静图：243 KB 动图：1.1MB

环境准备： 首先创建一个图片服务，我自己绑定域名为 imagex.75live.com 并指向对应的 cname 值，目前看起来这个是为了配置访问加速用的，每个服务背后提供了存储服务；

我将准备好的素材上传到上去， 当我点击上传地址时，我发现，这个服务 获取地址的方式原来是这样： http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/aaeb00635949973062083b65b5b8c364.jpeg~tplv-n9b2vwdhz3-toB.heic

也就是通过三段方式访问的，图片地址访问规则: http(s)://域名 /图片 URI~模板配置 ，我想深入研究下，这个模板到底是干嘛的？原来他的处理效果是这样来选择的：

静图压缩测试 格式说明 原图地址 （大小对比） 文件大小对比 图片格式说明 jpeg http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/aaeb00635949973062083b65b5b8c364.jpeg 243KB 兼容性最好，支持渐进式加载 HEIC http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/aaeb00635949973062083b65b5b8c364.jpeg~tplv-n9b2vwdhz3-toB.heic 35.483K 下一代图片格式，压缩率更高，兼容性不太好需要 SDK 支持 webp http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/aaeb00635949973062083b65b5b8c364.jpeg~tplv-n9b2vwdhz3-toB.webp 67KB 对 chrome 浏览器友好，压缩率相对较高 png http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/aaeb00635949973062083b65b5b8c364.jpeg~tplv-n9b2vwdhz3-toB.png 1109.807KB 无损压缩，体积最大，可以支持 alpha 通道 image http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/aaeb00635949973062083b65b5b8c364.jpeg~tplv-n9b2vwdhz3-toB.image 237KB 未知 avis http://imagex.75live.com/tos-cn-i-n9b2vwdhz3/aaeb00635949973062083b65b5b8c364.jpeg~tplv-n9b2vwdhz3-toB.avif 40KB AVIF 下一代图片格式，压缩率较高，图片格式比较新，对 chrome 85+ 系统默认支持，

小结：

1.从静图来看，图片的压缩率：HEIC >AVIF >webp > jpeg >png ,这里我经过多次测试发现，avif 和 webp 偶尔相差不大，猜测可能是格式比较新，还需要很多调试调优类工作； HEIC 的图片体积最小，能够显著节省用户流量和 CDN 传输的成本，相比 jpeg 减少将近 8 倍；

2.从画质上看，基本上相差不大，看不出明显变化；

3.从兼容性上来看，各有千秋，如果使用 SDK 的话，相差不大，不使用 SDK 的话，兼容性：png >jpeg >webp >avif> heic.

动图压缩测试 动图的图片格式比较少，目前支持 gif 、awebp 、heif 、avis （ avif 的动图）

小结：

1.从动图来看，图片的压缩率：avis > heif >awebp > gif , heif 和 avis 的动图体积显著降低，能够显著节省用户流量和 CDN 传输的成本，可见下一代图片编码方式还是很厉害；

2.从画质上看，基本上相差不大，看不出明显变化，所以没再贴图；

总结 总结，本期主要是测试了图像的压缩能力，ImageX 的压缩能力确实支持的不错，特别是在先进的图像压缩比如 heif 和 AV1 编码的图像格式支持，不过目前官方并未支持 AV1 编码的图像，期望 ImageX 可以做的越来越好，期望新版版的到来；

另外，关于其他能力测试，会等待合适的时间撰写，肚子饿了，先去吃点东西……敬请期待吧……

[skypyb]

HEIC 主流浏览器支持么

[neoblackcap]

@skypyb avif 都是 chrome 一家在支持，更加不要说 heif 了
当然你是做客户端的，自己实现支持的话，那么这服务也不见得没用

[alexfarm]

还要看渲染速度

[markgor]

前几天就遇到这个问题，但是我的环境是小程序，所以根据了解筛选：
webp：能兼容，压缩率一般，效果算好；渲染速度一般；压缩成本低
jpg(Guetzli)：兼容性强，压缩率高，效果最好；渲染速度快，但是压缩时间太长资源占用较高。
tpg：不支持，没测试
heif：不支持，没测试

所以最终采取了 webp 方案。

[12101111]

avif Firefox 已经支持, av1 是 Google 和 Mozilla 主推的
heif 因为 HEVC 专利的问题只有 Apple Safari 和 Microsoft Edge 这些 HEVC Advance 成员公司的商业产品才会支持, Android 上的主流浏览器不太可能支持

[xiaoping1111]

@skypyb 需要用 SDK 才行，一般都提供了成套的 SDK，具体可以去看看，我没用过他们 SDK，不好发表意见； iOS 默认 11 以上支持了

[xiaoping1111]

@markgor 可以试试 webSDK，我最近也在研究 webSDK，不过文档还没写明白，等写完了，再发一篇

[xiaoping1111]

@12101111 android P+ 也支持了

[xiaoping1111]

@alexfarm 说的对，目前测试过从解码来看，heif （自研） 20ms webp 15ms 左右要慢一些；