画像圧縮について教えてください

サポート
1

Discourse の画像圧縮についてよく理解できていません。教えてください。

  • 2392x884、214kb の画像をアップロードしましたが、解像度は変わりませんでした。
  • 3200x1800、1.7mb の画像をアップロードしましたが、解像度は composer media optimization image resize dimensions threshold 設定まで縮小されました。

設定が 1280 ピクセル幅の場合、すべての画像がその幅まで縮小されると予想していました。しかし、composer media optimization image bytes optimization threshold が優先されるようです。

  • 最初の画像は 524kb 未満だったので、変更されませんでした。
  • 2 番目の画像は 524kb を超えていたので、変更されました。

正しく理解していれば、アップロードされたすべてのファイルを 1280 ピクセル幅に縮小する方法はありますか？

確認のために設定を以下に示します。

max image size kb = 4096

compression
compression1552×1146 114 KB

2

そのしきい値を非常に低く設定してみてはどうでしょうか？

「いいね！」 4
3

トピックが非常に一般的な名前で付けられているため、新しいトピックは開始しません😙しかし、実践的な意味での「クライアントサイド最適化」とは何ですか？デバイスのOSが何かをするかどうかを自分で判断するのですか？しかし、それは巨大な画像がクライアントに転送されてから、そのサイズがまともなスケールに変更されるという状況につながるのではないでしょうか、それとも私は完全に迷っていますか？

4

テストの結果、正しいことがわかりました :slight_smile:
@pfaffman のソリューションが、あなたが望むことを達成するための方法だと思います。

長い説明：Faster (and smaller) uploads in Discourse with Rust, WebAssembly and MozJPEG
短い説明：大きな画像は、Discourse に送信される前に、デバイス上で（javascript 経由で）リサイズ/再圧縮されます。

「いいね！」 3
5

なるほど、その方向で機能するのですね。他の方向への最適化よりもずっと賢い方法です🤦‍♂️

ありがとうございます。

6

昨夜投稿前に試したところ、それが鍵のようでした。

状況は以下の通りです。

composer media optimization image bytes optimization threshold

  • 524288（デフォルト）設定 = 高画質、1920px。
  • 200000設定 = 画質低下、解像度が1920から1280に低下します。

今朝、デスクトップで同じ画像（2392px）を1280pxにリサイズしたところ、こちらも少し画質が低下しました。解像度を2392pxから1280pxに落とすことによるものです。ただし、画像サイズは4分の1に縮小されました。

注: .HEIC写真は同じルールに従いません。4032pxの.HEICが2016pxに縮小されました。この設定がどのように適用されたかは不明です。

全体として、試行錯誤の結果、理解できたと思います。1280pxよりも1920pxのシャープさが気に入っているので、デフォルト設定を使用するつもりです。

これが他の誰かの助けになれば幸いです。

編集: デフォルトの 524288 から 200000 に composer media optimization image bytes optimization threshold を下げました。基本的な.pngファイルを1220px @ 414kbでアップロードしたところ、ファイルサイズは406kbにしかなりませんでした。上記の値を 200000 に減らすことで、ファイルサイズは414kbから201kbに削減されました。解像度は変更されませんでした。

この設定で 他に何がトリガーされているのか は不明ですが、画像サイズをさらに縮小するために何かが機能していることは明らかです。

7

blog post の図が参考になります。

367×790 21.1 KB

X → composer media optimization image bytes optimization threshold
Y → composer media optimization image resize dimensions threshold
Z → composer media optimization image resize width target

「いいね！」 6
8

設定の定義を見ても、この部分がよく理解できず、自分が愚かなのではないかと心配になります。

composer_media_optimization_image_dimensions_resize_threshold: デフォルト 1920
クライアントサイドのリサイズをトリガーする最小画像幅

composer_media_optimization_image_dimensions_resize_target: デフォルト 1920
composer_media_optimization_image_dimensions_resize_threshold より幅の広い画像はこの幅にリサイズされます。
それより大きい必要があります。

この部分 specifically:

それより大きい必要があります。

閾値よりも高い幅の値にリサイズする理由がわからないので、≤ ではないでしょうか？ :thinking:

また、同じ設定の説明で、最初の設定名が間違っています。

composer_media_optimization_image_dimensions_resize_threshold

正しい名前は「Composer media optimization image resize dimensions threshold」（「dimensions resize」ではなく「resize dimensions」）です。