Automatically resize high-resolution screenshots

Question

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!

GitHub does this for pasted screenshots as well.

Answer 1

The situation has changed, and the reasoning in the other answers about why this is not a good idea is no longer valid. Now we no longer need to use the image uploader UI: we can simply paste an image. Other sites like GitHub and Discourse demonstrate that user-friendly automatic sizing is possible when pasting.

---

I find that not supporting automatic sizing is a major usability issue on the Mathematica StackExchange site where it is very common to post images. Sometimes I find myself deciding not to post an image just because at the default size it would reduce (rather than improve) the readability of my post.

These days, Stack Exchange is the only website I use which does support pasting images, but does not do automatic sizing.

Here's an example of a typical image I would get when pasting from Mathematica. If you are reading this, likely you are not able to see what is below the image. It is just too large.

The Markdown looks like this:

[![Enter image description here][1]][1]

What I think we should have instead is the following, which is what the image was meant to look like.

<img src="https://i.stack.imgur.com/J2gEL.png" width="360">

To get this, I needed to:

• Find the pasted image's URL
• Open it in a new browser tab, check its properties, determine that its width is 720 pixels, and divide that in half (or whatever ratio my screen uses).
• Edit the Markdown, and convert the ![](...) to an <img> tag, adding the correct width.
• Remove the URL reference from the end of the post.

I hope this illustrates why most people just cannot be bothered to do this (or don't know how to do it).

Answer 2

I think this approach is not optimal as it is limited to only one screen density. HDPI support should not be limited to the *2 pixel density of the retina devices. There are multiple densities already flooding the market like *1.5, *1.75...

A better approach for a proper HDPI support would probably be:

• By default display only a checkbox to scale the image according to the density of the current display.
• Add a button to enable a finer density selection.
• When the user chooses to display more options, display a fine grained density selector (slider + text input).

---

Yet another approach would be to read the DPI fields of the image and automatically scale using HTML width and height when Markdown is used. If the user is not satisfied with this choice give him the option to not rescale accordingly to DPI. Something like adding ![enter image description here][2][ns] would do I guess.

---

And I really think this feature needs to be implemented now, while there are few HDPI users here, rather than later when we'll have too many HDPI screen captures disfiguring the posts and answers.

When the screen captures are too large they give a clunky aspect to the site. The damage is not only cosmetic as they introduce readability issues; they break the flow of tutorial-like answers and they scale down when they are too large to display in the window.

HDPI is getting more and more support in modern systems, even Windows 8 is getting there. And 2013 being the year Intel will try to put more of emphasis on "rich displays" time is running out.

So this is truly the best time to implement this feature.

Answer 3

I don't think that automatically resizing images is a good idea, even if we could unambiguously detect that it was created on a high-DPI screen.

Who knows what the author intended to show? Perhaps it's a small one pixel graphical detail? Or perhaps a small abnormality in font rendering? Automatically resizing screenshots would mean these details might be a lot less obvious.

In principle, there could be options and such for the upload dialog. But why? It would complicate the dialog and there are already many free ("free of charge" and "free software") image editors that can be used for scaling images. I'm not sure if re-implementing this on the Stack Exchange side is really a fruitful way for the team to spend their time.