Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
tamaina opened this issue Dec 5, 2022 · 98 comments
Open

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

tamaina opened this issue Dec 5, 2022 · 98 comments
Labels
✨Feature This adds/improves/enhances a feature

Comments

@tamaina
Copy link
Contributor

tamaina commented Dec 5, 2022

Summary

Related to #6626, #9275

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

https://caniuse.com/avif

image
@tamaina tamaina added the ✨Feature This adds/improves/enhances a feature label Dec 5, 2022
@tamaina
Copy link
Contributor Author

tamaina commented Dec 5, 2022

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

@saschanaz
Copy link
Member

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

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

@tamaina
Copy link
Contributor Author

tamaina commented Dec 5, 2022

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

@tamaina
Copy link
Contributor Author

tamaina commented Dec 5, 2022

よしんば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
Copy link
Member

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

@tamaina
Copy link
Contributor Author

tamaina commented Dec 5, 2022

MEMO: Webpもv4からっぽい mastodon/mastodon@379a7a7

tamaina added a commit to tamaina/misskey that referenced this issue Dec 5, 2022
@tamaina
avifはMastodonでは絶望的 see misskey-dev#9283
b73ee90
tamaina added a commit to tamaina/misskey that referenced this issue Dec 5, 2022
@tamaina
avifはMastodonでは絶望的 see misskey-dev#9283
3a426a8
syuilo added a commit that referenced this issue Dec 8, 2022
@tamaina @syuilo
enhance: AVIF support (#9281)
e81c296 
* chore: Make image/avif browsersafe

* server side

* change FileInfoService

* ✌️

* avifはMastodonでは絶望的 see #9283

Co-authored-by: syuilo <[email protected]>
@tamaina tamaina changed the title 画像の圧縮にAVIFを使う 画像の圧縮にAVIFかJPEG XLを使う Dec 20, 2022
@tamaina
Copy link
Contributor Author

tamaina commented Dec 20, 2022

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

@tamaina
Copy link
Contributor Author

tamaina commented Dec 20, 2022 •
edited
Loading

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

image

https://caniuse.com/jpegxl

Sharp.jsの対応も面倒 lovell/sharp#2731 (comment)

@tamaina
Copy link
Contributor Author

tamaina commented Dec 20, 2022

片方をプロキシにする？

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

yu256 added a commit to yu256/akatsukey that referenced this issue Mar 5, 2023
@yu256 @syuilo @tamaina
enhance: AVIF support (misskey-dev#9281)
6a73fd6 
* chore: Make image/avif browsersafe

* server side

* change FileInfoService

* ✌️

* avifはMastodonでは絶望的 see misskey-dev#9283

Co-authored-by: syuilo <[email protected]>
Co-authored-by: tamaina <[email protected]>
@tamaina
Copy link
Contributor Author

tamaina commented Mar 5, 2023

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

@acid-chicken
Copy link
Member

AVIF 重いのは昔の話では

@saschanaz
Copy link
Member

avifは重たすぎるし

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

@acid-chicken
Copy link
Member

acid-chicken commented Mar 5, 2023 •
edited
Loading

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

@tamaina
Copy link
Contributor Author

tamaina commented Mar 5, 2023

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

sharp.jsで試してみるか

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

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

@saschanaz
Copy link
Member

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

@acid-chicken
Copy link
Member

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

すみません VP8 です

@tamaina
Copy link
Contributor Author

tamaina commented Mar 5, 2023 •
edited
Loading

sharp-webp-avif-test

webp (smartSubsample: false) vs avif

image

webp (smartSubsample: true) vs avif

image

@tamaina
Copy link
Contributor Author

tamaina commented Mar 5, 2023

effort 0, smartSubsample false

image

@tamaina
Copy link
Contributor Author

tamaina commented Mar 5, 2023

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

@saschanaz
Copy link
Member

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

wasm-vipsも試して見たかったですがAVIFサポートがなかったです kleisauke/wasm-vips#44

@tamaina
Copy link
Contributor Author

tamaina commented Mar 5, 2023

avifの個人的な指針

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

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

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

@saschanaz
Copy link
Member

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

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

@tamaina
Copy link
Contributor Author

tamaina commented Mar 5, 2023

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

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

@tamaina
Copy link
Contributor Author

tamaina commented Mar 5, 2023

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

@tamaina
Copy link
Contributor Author

tamaina commented Apr 29, 2023

Sharpでやってるのは縮小とかbadge生成とかもあるので（まあ圧縮部分だけRustにすればいいだろうけど）

rav1eじゃなくてlibaom使ってた lovell/sharp-libvips#97

@tamaina
Copy link
Contributor Author

tamaina commented Apr 29, 2023

wasmビルドも作って欲しい（Service Worker内で実行する）

@acid-chicken
Copy link
Member

Sharpでやってるのは縮小とかbadge生成とかもあるので（まあ圧縮部分だけRustにすればいいだろうけど）

全部 Rust ベースにして良さそうじゃね

wasmビルドも作って欲しい（Service Worker内で実行する）

misskey-dev/slacc はあくまでバインディングのみを目的としているからロジックは分離して slacc 経由でのバックエンドバインドと wasm バインドそれぞれ作ればよさそう

@tamaina
Copy link
Contributor Author

tamaina commented Apr 29, 2023

全部 Rust ベース

まあ可能なら（もはやそれ単体ですごいライブラリだと思う…）

@acid-chicken
Copy link
Member

全部 Rust ベース

まあ可能なら（もはやそれ単体ですごいライブラリだと思う…）

優れた crate がいっぱいあるしそこまで大変でもないと思う（楽観視）

@acid-chicken
Copy link
Member

😅 image

@acid-chicken
Copy link
Member

とりあえず libavif で未リリース機能としては存在するっぽい https://github.com/AOMediaCodec/libavif/blob/905e30049fda48053fc2049bc08422cdb3292ac8/CHANGELOG.md#unreleased

@acid-chicken
Copy link
Member

libaom にありそう https://github.com/m-ab-s/aom/blob/79fc28c8a0592850456a8ed3e23e70e358e79ad7/aom_dsp/pyramid.c#L166-L193

@tamaina
Copy link
Contributor Author

tamaina commented Apr 29, 2023

そういう調子だとブラウザのデコーダーが対応してるか怪しくない？

@saschanaz
Copy link
Member

AOMediaCodec/av1-avif#134 で追加されたファイルのデコーディングはFirefox/Chrome/Safariで全部問題なさそうです

@tamaina
Copy link
Contributor Author

tamaina commented Apr 30, 2023

Speed: the encoding process is single-threaded and dead slooow (I mean, really, really slow) - encoding a single 3072*2048 pixel image using the default options above takes ~4 min!

https://github.com/saschazar21/wasm-rav1e

wasmやっぱ遅いのか

@saschanaz
Copy link
Member

https://github.com/kleisauke/wasm-vips もあります

@tamaina
Copy link
Contributor Author

tamaina commented Apr 30, 2023

（生vips使いたくない…と思ったけどd.tsがあるからまだマシかしら）

@tamaina
Copy link
Contributor Author

tamaina commented Apr 30, 2023

（wasm、ネイティブより遅いのとバンドルサイズが馬鹿にならないのは注意すべきよね）

@acid-chicken
Copy link
Member

どのみちメディアが十分大きいしキャッシュ効くから気にするほどではない

@tamaina
Copy link
Contributor Author

tamaina commented May 29, 2023

そろそろ手をつけたいがまだむり

@tamaina
Copy link
Contributor Author

tamaina commented Jun 3, 2023

Edgeってavif対応したんだろうか

@tamaina
Copy link
Contributor Author

tamaina commented Jun 3, 2023

Edge 114はダメらしい

@saschanaz
Copy link
Member

https://front-end.social/@jensimmons/110497266298128289

Yes, Safari 17 supports JPEG XL.

👀

@tamaina tamaina mentioned this issue Jul 4, 2023
Open
@tamaina
Copy link
Contributor Author

tamaina commented Sep 18, 2023

JPEG XLにするか

@tamaina
Copy link
Contributor Author

tamaina commented Sep 18, 2023 •
edited
Loading

（webpでも他のソフトに取り込めないとそれなりに文句が出てるわけだけど、jpeg xlにしたら大変なことになりそう）

@tamaina
Copy link
Contributor Author

tamaina commented Sep 18, 2023

ん、Firefoxはトグルがデフォルトでオフなのか

@saschanaz なんとかして

@saschanaz
Copy link
Member

サーバーどうしにAccept="image/jxl"とかしたらなんとかなるかも

@tamaina
Copy link
Contributor Author

tamaina commented Sep 18, 2023

Chromeもデフォルトが無効だった

@ijs01140
Copy link

ijs01140 commented Feb 4, 2024

Edgeも121からAVIFに対応したようです
https://caniuse.com/avif
image

@temtemy
Copy link

temtemy commented Feb 4, 2024

I don't think browser support should matter much in JPEG XL. It supports compressing legacy JPEG images further without any quality loss (while being fully reversible bit-by-bit), so we can reencode all saved JPEGs as JPEG XL internally and just serve JPEG on-the-fly. That's some free storage just waiting to be reclaimed for pretty large servers like misskey.io (up to 20% filesize saved on average)

@tamaina
Copy link
Contributor Author

tamaina commented Feb 12, 2024

お

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
✨Feature This adds/improves/enhances a feature
Projects
[実験中] 管理用
Status: Todo
Milestone
No milestone
Development

No branches or pull requests
6 participants
@saschanaz @tamaina @acid-chicken @ijs01140 @temtemy and others