Help me understand image compression

Support
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?

4 Likes
3

Because topic is named in very general way I don’t start new topic :kissing_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.

3 Likes
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

3 Likes