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

• 两张中图片网页Demo
• 20张小图片网页Demo
• 三张动图网页Demo

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

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

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

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

视频链接

@老虎会游泳，BPG测试页面.7z（2.4 MB）

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

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

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

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

.\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

@无名啊，

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

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

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

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

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

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

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

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

@无名啊，问题在于：

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

@无名啊，我发现手机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）》

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

数据如下：

头像图片（67个文件，共 1048 KB）：

帖子图片（230个文件，共 135 MB）：

结论：

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

用到的命令如下：

# 保存所有帖子内容
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. 注意各步骤所处的工作目录，懒得写明了

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

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

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