V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Recommended Services
Amazon Web Services
LeanCloud
New Relic
ClearDB
xiaoping1111
V2EX  ›  云计算

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

  •  1
     
  •   xiaoping1111 · 2021-01-15 19:44:29 +08:00 · 4221 次点击
    这是一个创建于 1406 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景说明 我最近的关注领域一直是图像处理领域,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 可以做的越来越好,期望新版版的到来;

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

    9 条回复    2021-01-18 13:29:14 +08:00
    skypyb
        1
    skypyb  
       2021-01-15 20:15:30 +08:00
    HEIC 主流浏览器支持么
    neoblackcap
        2
    neoblackcap  
       2021-01-16 01:34:29 +08:00
    @skypyb avif 都是 chrome 一家在支持,更加不要说 heif 了
    当然你是做客户端的,自己实现支持的话,那么这服务也不见得没用
    alexfarm
        3
    alexfarm  
       2021-01-16 09:44:08 +08:00
    还要看渲染速度
    markgor
        4
    markgor  
       2021-01-16 11:35:10 +08:00
    前几天就遇到这个问题,但是我的环境是小程序,所以根据了解筛选:
    webp:能兼容,压缩率一般,效果算好;渲染速度一般;压缩成本低
    jpg(Guetzli):兼容性强,压缩率高,效果最好;渲染速度快,但是压缩时间太长资源占用较高。
    tpg:不支持,没测试
    heif:不支持,没测试

    所以最终采取了 webp 方案。
    12101111
        5
    12101111  
       2021-01-16 14:03:06 +08:00
    avif Firefox 已经支持, av1 是 Google 和 Mozilla 主推的
    heif 因为 HEVC 专利的问题只有 Apple Safari 和 Microsoft Edge 这些 HEVC Advance 成员公司的商业产品才会支持, Android 上的主流浏览器不太可能支持
    xiaoping1111
        6
    xiaoping1111  
    OP
       2021-01-18 13:27:14 +08:00
    @skypyb 需要用 SDK 才行,一般都提供了成套的 SDK,具体可以去看看,我没用过他们 SDK,不好发表意见; iOS 默认 11 以上支持了
    xiaoping1111
        7
    xiaoping1111  
    OP
       2021-01-18 13:28:06 +08:00
    @markgor 可以试试 webSDK,我最近也在研究 webSDK,不过文档还没写明白,等写完了,再发一篇
    xiaoping1111
        8
    xiaoping1111  
    OP
       2021-01-18 13:28:39 +08:00
    @12101111 android P+ 也支持了
    xiaoping1111
        9
    xiaoping1111  
    OP
       2021-01-18 13:29:14 +08:00
    @alexfarm 说的对,目前测试过从解码来看,heif (自研) 20ms webp 15ms 左右要慢一些;
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1054 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 19:31 · PVG 03:31 · LAX 11:31 · JFK 14:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.