画像の圧縮にAVIFかJPEG XLを使う

[tamaina]

Summary

Related to #6626, #9275

Mastodon v4からAVIFに対応したらしいので

https://caniuse.com/avif

[tamaina]

Mastodon v4はあまり普及してないので後回しかな

[saschanaz]

Mastodon v4はあまり普及してないので

これに関してなにかデータとかありますか？ただ気になるだけですが

[tamaina]

まず大きなインスタンス（fedibird, mstdn.jp）あたりが対応しないことには…

[tamaina]

よしんばMastodon v4が普及したとしてもImageMagick 7が必要なので対応するインスタンスは限られそう（v6が広く使われているようなので）

ImageMagick supports AVIF. As ofversion 7.0.25, it supports AVIF compression natively. https://avif.io/blog/tutorials/imagemagick/#imagemagicksupportsavif

[saschanaz]

FedibirdはまだMastodon 3.4.1使っているし、時間かかりそうですね

[tamaina]

MEMO: Webpもv4からっぽい https://github.com/mastodon/mastodon/commit/379a7a7ca7cf913cbc130a6323f821b534fc14c4

[tamaina]

Mastodonや他のソフトウェアが問題なので、高互換と圧縮優先の2種類を用意して使い分けるというのはどうだろう
(ただ2種類をストレージに保存するのは微妙、片方をプロキシにする？)

[tamaina]

AVIFを検討するならJPEG XLも検討して良さそうだけど、ブラウザの対応が全滅している

https://caniuse.com/jpegxl

Sharp.jsの対応も面倒 https://github.com/lovell/sharp/issues/2731#issuecomment-1349856411

[tamaina]

片方をプロキシにする？

圧縮優先低互換の方をストレージに保存するのがサーバーのCPU的にもストレージ的にも無難そう

[tamaina]

avifは重たすぎるし、jpeg xlはブラウザ対応の見込みがわからないためnot planned

[acid-chicken]

AVIF 重いのは昔の話では

[saschanaz]

avifは重たすぎるし

WebPに比べてどのくらい重たいのか数字をみたいですね

[acid-chicken]

なんなら WebP (VP8) エンコーダー (libwebp) の方が wasm に持ち込むのが高コストという事象などがある

[tamaina]

WebPに比べてどのくらい重たいのか数字をみたい

sharp.jsで試してみるか

なんなら WebP (VP9) エンコーダーの方が wasm に持ち込むのが高コストという事象

ならサーバーで圧縮するのはwebp, クライアントではavifにするとかの対応もありうる

[saschanaz]

WebPってVP9サポートします？

[acid-chicken]

WebPってVP9サポートします？

すみません VP8 です

[tamaina]

sharp-webp-avif-test

webp (smartSubsample: false) vs avif

webp (smartSubsample: true) vs avif

[tamaina]

effort 0, smartSubsample false

[tamaina]

effort: 0だと、avifは写真は得意だがイラストがかなりノイズが多くなる

[saschanaz]

effort: 1もかなりノイズありますね。rav1e使うとどうなるかなと調べてみましたがsharpはlibvipsからencoder選べる機能がなかったです。https://github.com/lovell/sharp/issues/3582

wasm-vipsも試して見たかったですがAVIFサポートがなかったです https://github.com/kleisauke/wasm-vips/issues/44

[tamaina]

avifの個人的な指針

写真:
quality: 50, lossless: false, effort: 1

イラストlossy:
quality: 80, lossless: false, effort: 1
※qualityを上げるだけでかなり改善する

イラストロスレス: webpを用いる [webpより遅い割に、圧縮率はほぼ差がない]

[saschanaz]

でも写真とイラスト区分ができないですね

lossyだと圧縮の結果のサイズの違いが大きいのでオプションで両方できるようにするのはどうでしょう。

[tamaina]

写真とイラスト区分ができない

sharp.jsのstats()のentropyを見てなんとなく判断できないかな

[tamaina]

7以上は写真とみなすとか

[saschanaz]

この映像のentropy 7.023でました

[saschanaz]

sharpnessもほぼ違いないような…ううん

[tamaina]

じゃ、じゃあ7.1で（超適当

[tamaina]

原神のスクショってどうなんだろう（たまにベンチマークとかこういった用事で開くんだけど5GBのダウンロードが…

[tamaina]

7.3328

[tamaina]

これをresize 1024x1024 insideしてquality: 50, lossless: false, effort: 1でavifにしたら悲惨なことになってしまった

[tamaina]

ただ写真もディティールが低下したので、quality設定はターゲットとなる解像度によって変えるべきという感じがする

[saschanaz]

写真的なエフェクトだせたイラストのentropyって本物の写真より高く、7.6まで出てきました

[saschanaz]

これ7.8

[tamaina]

わー、これを写真品質をターゲットにして圧縮したら大変厳しいことになりそう

[tamaina]

イラストロスレス: webpを用いる [webpより遅い割に、圧縮率はほぼ差がない]

2048x2048にリサイズするとavifの方が有利になってくる

[saschanaz]

写真的なエフェクトだせたイラストのentropyって本物の写真より高く、7.6まで出てきました

逆に写真にテキスト加える場合とかも考えたいです

[tamaina]

文字がデカすぎたかも

[saschanaz]

文字がデカすぎたかも

あれはそうですね

[tamaina]

avifらしく？人間の目で見るとなんとかなっている

[saschanaz]

え、思ったより悪くありません

[saschanaz]

でもmisskey.artの方々からは不満があるかも？🤔

[saschanaz]

その場合には運営から調整できるようにオプション作ったら何とかなりそうです

[tamaina]

ふむ

[saschanaz]

なーーーんか色がちょっと違いませんか？気のせい？

[tamaina]

空の色は薄くなっている気がする

[tamaina]

今すぐできるsharp.jsで比較してるけど、よく考えたら実装の際はブラウザサイドでの圧縮が主になると思うので、これ意味ないかも

[tamaina]

なーーーんか色がちょっと違いませんか？

元画像のpngがDisplay P3なので、何も指定しないとsharpはsrgbに変換するので色は若干淡くなる

[saschanaz]

今すぐできるsharp.jsで比較してるけど、よく考えたら実装の際はブラウザサイドでの圧縮が主になると思うので、これ意味ないかも

言われてみればFirefoxもChromeもAVIFエンコードなんてサポートしてなかったです

await new OffscreenCanvas(1,1).convertToBlob({ type: "image/avif" })実行したらPNGが出てきます

[tamaina]

canvas.toBlobでavif吐けるブラウザあるの
（そうだとしてもtoBlobは細かい司令できない

ブラウザはwasm前提で

[acid-chicken]

photon-rs を呼び出すサブセット Rust モジュールを wasm にすればよさそう