Compress PNG to WebP if non-animated and non-transparent

[saschanaz]

Summary

Following #9277.

For now Misskey only compresses big PNGs to smaller PNGs, but small PNGs are still have significantly large file size compared to lossy formats. A screenshot from a Windows machine with a 1920x1080 display can eat 2 megabytes for example even when such image does not use any alpha value.

One caveat is that the only way to detect transparency from a PNG file is to scan every pixel in JS, which may take some time. 🤔 (Windows uses RGBA without any transparency. 🤷)

Q: Why not WebP? A: Not usable yet because of Mastodon v3. https://github.com/misskey-dev/misskey/pull/9334#issuecomment-1356098046

[saschanaz]

@tamaina What's your point to keep it PNG, btw?

[tamaina]

@saschanaz

I protest vigorously. I hate lossy images anyway.

[saschanaz]

Not even WebP? 👀

This could be an option, but generally I don't think it's a good storage/network use to keep PNG by default.

This could be much cleaner if Mastodon v3 didn't just fail on WebP but at least tried something with its backing ImageMagick 😭

[norz]

The benefits of this proposal far outweigh the drawbacks imho.

[saschanaz]

@tamaina これまだダメです？ Windowsでスクリーンショット上げるユーザー少なくないので対応したい

[tamaina]

う〜〜ん、低圧縮のlossy webpならいいのかも？

ただwebpをブラウザで実装するのが辛いのか

[saschanaz]

ただwebpをブラウザで実装するのが辛いのか

特に問題ないと思いますが

[acid-chicken]

https://caniuse.com/mdn-api_htmlcanvaselement_toblob_type_parameter_webp

[saschanaz]

WebP対応出来ているブラウザーではWebPにして他ではそのままにするとかどうでしょう

[acid-chicken]

iPad をそのままにしてしまうとあまり解決にならないかも

[saschanaz]

....SafariではJPEGにしてしまえば💢（悪魔の声）

でも他に手あります？そのまま vs JPEGに

[acid-chicken]

画像周りの話、悩ましいし、ややこしいし、この際 Epic Issue 立てて一旦整理したい……

[saschanaz]

wasm使って全部AVIFにしようって話があったような

[acid-chicken]

wasm使って全部AVIFにしようって話があったような

理想を言えばこれができると一番嬉しい デコードの観点ではそのうちメジャーブラウザが全てサポートするようになりそうなのであまり心配がない（連合はまぁ……連合先が対応して欲しいんだけどなぁ） エンコードの観点では wasm でエンコーダーを持ち込むことでのサポートになるが、実際にやってみてパフォーマンステストしてみないといけない（あと多分 wasm SIMD に対応させないといけない）

[saschanaz]

理想と言えばSafariにWebPエンコードをサポートさせるのが理想ですね

一旦はWebPサポートしているブラウザーのみ対応して後は別の件で話したいです（最近のSafariの変化がかなり大きくて希望を持ってもいいかなって）

[acid-chicken]

一旦はWebPサポートしているブラウザーのみ対応して後は別の件で話したいです（最近のSafariの変化がかなり大きくて希望を持ってもいいかなって）

その方針で良いと思います

[tamaina]

WebP対応出来ているブラウザーではWebPにして他ではそのままにするとかどうでしょう

iPad をそのままにしてしまうとあまり解決にならないかも

とりあえずSafariはpngにすればいいと思う（iPadのスクショは16bit PNG /w Display P3らしいので、8bit・色域メタデータなしにするだけでも相当軽くなるはず

（本当はavifにしたいんだよな…Mastodon…）

[tamaina]

でも2MBだから微妙だなぁ

[tamaina]

toBlob webp、Safariだとquality無視されるけど一応生成できなかったっけ？

[acid-chicken]

toBlob webp、Safariだとquality無視されるけど一応生成できなかったっけ？

これ本当なら MDN のデータの方修正しようぜ

https://github.com/mdn/browser-compat-data/blame/e74cd55301d99b723aafa7218047511c73ffcafc/api/HTMLCanvasElement.json#L1051-L1084

[acid-chicken]

https://codepen.io/acid-chicken/pen/abaqNqO

[saschanaz]

toBlob webp、Safariだとquality無視されるけど一応生成できなかったっけ？

webpじゃなくPNGが出てきてしまう件について

[saschanaz]

https://html.spec.whatwg.org/multipage/canvas.html#serialising-bitmaps-to-a-file

User agents must support PNG ("image/png"). User agents may support other types. If the user agent does not support the requested type, then it must create the file using the PNG format. [PNG]

仕様だった件

[tamaina]

なるほど〜〜

[tamaina]

（エラーにならないんだ…

[acid-chicken]

若干逸れた話題かもしれないけど、しばらく oxipng を使ってみたところかなりいい感じだった