misskey icon indicating copy to clipboard operation
misskey copied to clipboard

ファイルアップロード時のブラウザ圧縮のpngのサイズを小さくしたい

Open tamaina opened this issue 1 year ago • 7 comments

Summary

https://github.com/misskey-dev/browser-image-resizer はOffscreenCanvas.convertToBlobを使うが、pngの圧縮が不十分に感じる

もっとpngのサイズを小さくしたい

tamaina avatar Jul 04 '23 07:07 tamaina

https://docs.rs/png/latest/png/ をwasmにして使う?

tamaina avatar Jul 04 '23 07:07 tamaina

(とか言ってるとacが言うように変換一式をRustに丸投げしたくなる)

tamaina avatar Jul 04 '23 07:07 tamaina

https://github.com/misskey-dev/misskey/issues/9283

Q. アップロード時はavifにすればいいのでは A. ブラウザ側の圧縮画像をwebpublicにそのまま利用することでサーバーの負荷を軽減する意図がある。Edgeがavifに対応しないことにはwebpublicをavifにできない

tamaina avatar Jul 04 '23 07:07 tamaina

(サーバーの再変換負荷を受け入れるのであればavifでアップロードしても構わないと思っている。それかMS Edgeを切り捨てるか。)

tamaina avatar Jul 04 '23 07:07 tamaina

https://github.com/misskey-dev/misskey/issues/9370#issuecomment-1584394567

acid-chicken avatar Jul 04 '23 14:07 acid-chicken

釈迦に説法な気がしますが、png形式の圧縮技術の特性上 「色数が少ない画像データに対しては大変圧縮効率が良い」 事は申し上げさせて頂きます:

【画像処理】今さら聞けない画像フォーマット - Qiita PNG画像の圧縮について - Qiita

裏を返すと、 「うっかりスマホやデスクトップのスクリーンショットを、拡張子を意識せずにアップロードするとそりゃ重い」 という話にもなるかと(大抵 png で保存する為)

拙案

ここまでで思い付いた稚拙な案ですが、下記になります。

  • 画像で使用している色数によって、最適な圧縮方法を選択する。
  • さらに色数とキャンバスサイズによっては、jpgに変換してしまう。

オフトピ

jpgに関しては misskeyでサブモジュールで取得して改変しているソースコードの標準値 を眺める限りは、大変良く攻めた圧縮率を指定していると思います:

あなたのサイトのjpeg画像は過剰品質である。多分。 - Qiita

オフトピ2 WebPという選択肢

これはHTTPサーバーの実装やクライアント側の表示可能精査が必要ですが、WebP・WebMは 2021年の misskey.devサーバーをPC・スマホのFirefoxで閲覧時に表示できたので、これらを用いるのも手かと思います。

manzyun avatar Jul 10 '23 11:07 manzyun