Automatically apply scaling factor to images pasted from clipboard

I’m using a HiDPI display with a scaling factor of 150%. Everytime a I create a screenshot and paste it into Discourse, everything’s too large. I need to manually apply a scaling factor to the image to make it look alright.

Let’s assume I create a screenshot of the following box which has a size of 110x110px.


When I paste that screenshot (Ctrl+V) into the composer I get an image with a size of 167x167px.


Ideally I’d get a an image with the correct size without me having to remember the correct percentage to downscale the image (which is 66% in my case).

![image|167x167, 66%](upload://fWfpRZXtBMVBXjcMTAPOwtG5bND.png)

I see 2 options for that. If the scaling factor doesn’t equal 1 then:

  1. Automatically add the correct scaling factor to the image Markdown
    ![image|167x167, 66%](...)


  1. Add the correct scaling factor to the image toolbox in the preview window

The scaling factor can be calculated in JavaScript:

Math.floor(100 / window.devicePixelRatio)

This is a great idea, I struggle with this all the time as well.

Thinking out loud, would this cause false positives if the user copy/pastes a non-screenshot image?

Also, re implementation, I don’t see why we can’t do both 1 and 2.


Yes, it will be a false positive when you paste a non-screenshot image. I wonder what gets inserted more often, screenshots or other images. :thinking:

1 Like

Not sure, I guess it depends on the user and kind of photos you post. Sometimes I copy an image on my phone and paste it on desktop, so there’s that scenario as well.

Either way, starting with option 2 would sidestep the false positives, it would just provide a nicer default alternative size in the preview.

1 Like

It looks like screenshot tools encode some information about DPI into the PNG files. e.g. if I upload a screenshot from my high-dpi macOS environment to, I see

If I turn off HiDpi, then those metadata fields seem to disappear from the file.

Do you see something similar on Windows @gerhard? If so, maybe there’s a way for us to read it in JS and make a guess about the pixel density.

I also came across this gist which might be useful.


I’m looking into parsing the first few bytes of PNGs for Remote animated PNG lose their animation too, so we have multiple use cases for a hook here.


I’m using Spectacle on Linux and it doesn’t seem to add anything to the metadata.

The code from that gist returns false for a screenshot I created on my Linux system with a scale factor of 150%. The pHYs chunk of that image looks like this:

{ xDpu: 3780, yDpu: 3780, xDpi: 96, yDpi: 96, unit: 'meter' }