虎绿林支持HEIC/HEIF/AVIF图片了,但是第一次加载较慢

回复列表(117|隐藏机器人聊天)
  • @Ta / 2022-01-21 / /

    @老虎会游泳BPGHEIC类似,也是一种用了 x265 编码的图片格式。但是它的 js 解码速度好快啊,基本秒开页面

    老虎看看,能不能用到HEIC解码上呢

  • @Ta / 2022-01-23 / /

    @无名啊,你的演示图片太小了,转换成HEIC也是秒加载。所以我认为两者的性能可能没有太大差别,问题只是我们实际遇到的图片都很大。如果把我的HEIC演示图片转换成BPG,可能也需要很久才能显示出来。

  • @Ta / 2022-01-23 / /
    @老虎会游泳,如果是我,我会设置为上传图片时默认将图片压缩为 WebP ,既减小了尺寸,也无需考虑兼容性和加载速度问题。而且大部分用户上传的图片,都不必无损储存嘛。
  • @Ta / 2022-01-23 / /

    @tasy5kg,我说了,对附件进行强制格式转换是不可接受的。所以我不会考虑其他解决方案。
    虎绿林的附件存储被定义为原始文件存储。上传了什么就下载到什么。
    可以为用户提供图片格式转换按钮,但是用户必须自行选择使用。如果用户确实不想使用,应该如他所愿。

  • @Ta / 2022-01-23 / /

    @老虎会游泳,改了改BPG的测试页面,用了张 4000x3000 的图片,
    以 -q=15(范围:0体积大质量好—51体积小质量差)的质量参数输出了张 bpg 图片,然后录了个视频对比
    觉得相比js实现的bpg图片显示,虎绿林的wasm实现的heic图片显示速度没有快多少,体现不出wasm的优越

    视频链接

  • @Ta / 2022-01-23 / /

    @无名啊,你来试这个图片,就会发现bpgdec8.js挑战失败了

    https://hu60.cn/q.php/bbs.topic.102481.1.html

  • @Ta / 2022-01-23 / /

    @老虎会游泳,我看了看,虎绿林 HEIC 测试页面的图片文件分辨率好像大很多,我用那几张图片试试

  • @Ta / 2022-01-23 / /

    @无名啊,我已经转好一张了,就是这个。这应该是所有测试图片中最大的。

    .\bpgenc.exe -q 17 8b380294-064e-4564-bc02-16783e3a69e1.png
    

    8b380294-064e-4564-bc02-16783e3a69e1.HEIC(5.61 MB)
    8b380294-064e-4564-bc02-16783e3a69e1.bpg(5.55 MB)

    BPG的asm.js脚本直接内存不足退出了。
    https://hu60.cn/q.php/bbs.topic.102481.1.html

  • @Ta / 2022-01-23 / /

    @无名啊

    虎绿林的wasm实现的heic图片显示速度没有快多少,体现不出wasm的优越

    这是符合预期的。因为bpg的解码器虽然叫bpgdec8.js,但它其实是asm.js,运行的时候可以被编译为静态类型CPU指令。而wasm运行的时候也会被编译为静态类型CPU指令,所以性能自然没有什么差别。

    现在的问题似乎是bpgdec8.js的内存管理有问题,无法完成大图解码。

  • @Ta / 2022-01-23 / /

    @老虎会游泳,唉,还以为bpg的解码有啥更好的优化空间呢,
    原来只是heic测试页面的图片都被缩放得太小了
    想想也是,大家都是hevc的解码,应该差不到哪儿去

  • @Ta / 2022-01-23 / /

    @老虎会游泳,没有浏览器原生支持,也没有预转码缩略图的情况下,感觉应该也只能这样了

  • @Ta / 2022-01-23 / /

    @无名啊,其实我对目前的性能很满意。在帖子中真的见到超大heic的机会还是比较小的,只要能保证在大部分浏览器里每次都能加载出来,就完全足够了。

  • @Ta / 2022-01-23 / /

    @老虎会游泳,还是觉得,要是浏览的都是“控制了最大分辨率,再预转码成webp”的图片会更好
    如果需要,也可下载原图(也符合虎绿林的附件存储被定义为原始文件存储
    毕竟浏览为主,太大了还是会被缩放,也不需要原始图片的所有细节
    同样也省了老虎的流量

    就是webp转码收费或者服务器带宽不够不好解决?

  • @Ta / 2022-01-23 / /

    @无名啊,问题在于:

    1. vkceyugu.cdn.bspapp.com 是免费云存储,我没有消耗流量。
    2. vkceyugu.cdn.bspapp.com 的总空间有限,存两份比存一份更容易塞满。塞满了就要另寻他处了。
  • @Ta / 2022-01-23 / /

    @无名啊,我发现手机UC浏览器原生支持bpg:

    《图片:https://vkceyugu.cdn.bspapp.com/VKCEYUGU-cc8cf08f-49f5-4fc5-83c3-ed2a683704d4/93e16411-8a27-48a9-a9d7-8fceb7d5f485.bpg,8b380294-064e-4564-bc02-16783e3a69e1.bpg(5.55 MB)》
    

    8b380294-064e-4564-bc02-16783e3a69e1.bpg(5.55 MB)

  • @Ta / 2022-01-23 / /

    @老虎会游泳,花了点时间,爬取了首页100个帖子内容,并将其中所有图片下载至本地,尝试转换成webp-q=75

    数据如下:

    头像图片(67个文件,共 1048 KB)

    限定分辨率 转换后大小 流量消耗 存储占用
    不限定 364 KB 34.82% 135%

    帖子图片(230个文件,共 135 MB)

    限定分辨率 转换后大小 流量消耗 存储占用
    1280x1280 12.37 MB 9.13% 109%
    1920x1920 15.90 MB 11.73% 112%
    2560x2560 18.88 MB 13.93% 114%
    不限定 30.25 MB 22.32% 122%

    结论:

    • 节省的流量挺可观
    • 多占用的存储不是很多

    用到的命令如下:

    # 保存所有帖子内容
    curl 'https://hu60.cn/q.php/index.index.json?pageSize=100' ... |
    jq -r '.newTopicList[].id' |
    while read -r id; do
      curl "https://hu60.cn/q.php/bbs.topic.$id.json?_uinfo=avatar&_content=json&pageSize=1000" ... > "$id.json"
    done
    
    # 下载头像、帖子图片
    jq -r '.tContents[]._u_avatar' *.json | sed 's/\?.*$//' | sort | uniq | wget -i - -nc -nv -P ./avatar/
    jq -r '.tContents[].content[] | select(.type=="imgzh") | .src' *.json | wget -i - -nc -nv -P ./img/
    
    # 转码
    for q in 75; do
      for size in 1280 1920 2560 10000; do
        find . -type f | while read -r file; do
          dir="../webp/$q/$size/${file%/*}"
          mkdir -p "$dir"
          convert "$file" -quality "$q" -resize "${size}x${size}>" -define webp:method=6 -define webp:thread-level=1 "$dir/${file##*/}.webp"
        done
      done
    done
    
    # 注:
    # 1. 实际运行需要安装 curl, jq, imagemagick, webp, libheif, bpg 工具
    # 2. curl 的 ... 包含 cookie 等各种敏感且非关键数据,所以省了
    # 3. 注意各步骤所处的工作目录,懒得写明了
    
  • @Ta / 2022-01-23 / /

    @无名啊,对我没有吸引力,因为在不限流量但限空间的情况下,节省流量不会带来任何好处,而存储增加哪怕一点点都是坏处。

  • @Ta / 2022-01-23 / /

    @老虎会游泳,嗯?我咋记得你说存储成本基本为零,主要就是CDN及回源流量来着。。

  • @Ta / 2022-01-23 / /

    @无名啊,现在情况改变了,因为大部分图片都放在阿里云为unicloud提供的免费空间里。
    https://uniapp.dcloud.io/uniCloud/price

添加新回复
回复需要登录