Help me understand image compression

Product Support

AI-generated summary

In a discussion titled “Help me understand image compression,” users explore how Discourse handles image optimization during uploads. Brandon007 initially notices inconsistent behavior: a 214KB image retains its 2392x884 resolution, while a 1.7MB image scales down to 1280px width — matching the composer media optimization image resize dimensions threshold setting. He discovers that the key setting is actually composer media optimization image bytes optimization threshold Brandon007, which triggers compression based on file size, not just dimensions. Testing reveals that lowering the threshold (e.g., from 524288 to 200000 bytes) reduces resolution and quality — a trade-off he confirms by manually resizing the same image to 1280px, which also degrades quality. He notes .HEIC images behave differently, sometimes retaining higher resolution despite smaller file sizes. Falco references a blog post explaining the three-stage optimization: client-side resize (Y), target width (Z), and byte threshold (X). Canapin clarifies the settings: composer_media_optimization_image_dimensions_resize_threshold (default 1920px) triggers resizing for images wider than this, and composer_media_optimization_image_dimensions_resize_target (also default 1920px) sets the target width. Confusion arises over whether the threshold should be ≤ or ≥ the image width — the correct logic is that images ≥ the threshold are resized to the target width. Jagster and Canapin explain that “client-side optimization” means the browser resizes large images before upload, reducing server load and improving speed — a process handled by the user’s device OS. The group concludes that the byte threshold is the primary control for quality vs. size, and manual resizing can’t avoid degradation when reducing resolution significantly.

1

I’m not quite sure I understand image compression in Discourse. Straighten me out.

  • I uploaded a 2392x884 214kb image and the resolution stayed the same.
  • I uploaded a 3200x1800 1.7mb image and the resolution scaled down to the composer media optimization image resize dimensions threshold setting.

With the setting at 1280 wide, I expected all images to be scaled down to that width. However, it appears the composer media optimization image bytes optimization threshold sets the precedent.

  • My first image was under 524kb, so it wasn’t altered.
  • The second image was over 524kb, so it was altered.

If I follow correctly, is there a way to reduce all uploaded files to 1280 wide?

Here are my settings to confirm:

max image size kb = 4096

compression
compression1552×1146 114 KB

2

Maybe set that threshold very low?

3

Because topic is named in very general way I don’t start new topic :kissing_face_with_smiling_eyes: but what does client-side optimization mean in practice - an OS of device will make its mind if it will do or not something? But that will lead to the situation where a giga big image must transfer to a client before its size will change to decent scale, or am I totally lost now?

4

After testing, it is correct :slight_smile:
I believe @pfaffman’s solution is the way to go to achieve what you want.

Long explanation: Faster (and smaller) uploads in Discourse with Rust, WebAssembly and MozJPEG
Short explanation: large images are resized/recompressed on your device (via javascript) before they are sent to Discourse.

5

Right, it works to that direction. Well, that is much more smarter way than optimization to other direction :man_facepalming:

Thanks.

6

I did try that last night before posting and that does seem to be the key.

Here’s the deal:

composer media optimization image bytes optimization threshold

  • 524288 (default) setting = Good quality image, 1920px.
  • 200000 setting = Degraded image, since it drops resolution from 1920 to 1280.

So this morning, on my desktop, I took the same image (2392px), resized it to 1280px and it’s degraded a bit as well. So the degradation I can’t get around. It’s a product of dropping the resolution from 2392px to 1280px. It did reduce the image size by four times though.

Note: .HEIC photos don’t play by the same rules. A 4032px .HEIC was reduced to 2016px. So I don’t know how that setting was applied.

All in all, I think I get it, after a little trial and error. I think I’ll use the default settings, I really like the extra crispness of a 1920px photo over the 1280px.

Hopefully, this helps someone else out.

Edit: I dropped composer media optimization image bytes optimization threshold from the default of 524288 to 200000. I noticed, uploading a basic .png file at 1220px @ 414kb only resulted in a file size of 406kb. By reducing the setting above to 200000, the file size was reduced from 414kb to 201kb. The resolution was unchanged.

So I don’t know what else is being triggered with that setting, but clearly something else to further reduce the image size.

7

I find the diagram at the blog post helpful:

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

8

I’m afraid I must be dumb for not quite understanding this part when looking at the settings’ definitions:

composer_media_optimization_image_dimensions_resize_threshold: default 1920
Minimum image width to trigger client-side resize

composer_media_optimization_image_dimensions_resize_target: default 1920
Images wider than composer_media_optimization_image_dimensions_resize_threshold will be resized to this width.
Must be ≥ that threshold.

This part specifically:

Must be ≥ that threshold.

Shouldn’t it be ≤ instead? I don’t understand why it would resize to a higher width value than the threshold :thinking:

Also, in the same setting’s description, the first setting is misnamed:

composer_media_optimization_image_dimensions_resize_threshold

The right name is “Composer media optimization image resize dimensions threshold” (“resize dimensions”, not “dimensions resize”).