On a modern Apple device with a high-resolution screen, if I take a screenshot of a window, this is what I get:
As you can see, when the image is displayed normally, it's too big.
Because my screen has two pixels per "point" (a @2x ratio), the best way for me to display these is to use
<img src="[url]" width="[half of image width]">
Which produces this:
On my retina display, this is rendered at native resolution; on a non-retina display, it's appropriately downscaled so that it remains the correct size. Unfortunately, it requires manually checking the image width, dividing by 2, and typing in the HTML.
Can the image uploader do the hard work for us?
Nowadays, GitHub automatically enters the image width when dragging an image file to a comment field. They achieve it by reading the
pHYs metadata from the PNG file, and appropriately interpreting that physical resolution.
Using DataTransfer.files and DataView this is relatively simple to do. It would be great for Stack Exchange sites to do the same! (I imagine you can do this for pasted screenshots, too, although GitHub doesn't.)