35

On a modern Apple device with a high-resolution screen, if I take a screenshot of a window, this is what I get:

retina screenshot, not resized

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.

6
  • 1
    I'd say once enough sites are seeing 2x uploads from Mac, iPad, iPhone to make this worth a developer's time - this would be an easy fix to reduce the amount of editing and reduce human error in typing <img src="[url]" width="[half of image width]"> especially from a mobile device. Until then it can sit here and on any site meta that wish to show votes of support and be ignored by Stack Exchange.
    – bmike
    Commented Jan 2, 2013 at 18:23
  • Note that the iDOT chunk stored in screenshots on (recent versions of?) OS X might contain details on the pixel density. Unfortunately I haven't found its specification yet, but it appears to be integer-only. Nevertheless it might be an indication that an uploaded image is HiDPI and should get downsized.
    – MvG
    Commented Nov 24, 2015 at 16:10
  • It's been three years since this was posted here. Can we please have this implemented? Ask Different is utterly filled with upscaled images...
    – Tuesday
    Commented Jan 4, 2017 at 3:34
  • @timothymh I think this is actually working as long as you upload an image file. If you paste an image it does not work. (going to test my assertion now...)
    – jtbandes
    Commented Jan 4, 2017 at 4:47
  • Oh, never mind, I was thinking of GitHub... :-(
    – jtbandes
    Commented Jan 4, 2017 at 4:48
  • Repeating: meta.stackexchange.com/questions/161111/… Commented Nov 7, 2021 at 11:17

3 Answers 3

5

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.

Enter image description here

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.sstatic.net/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).

1
  • I got a couple of downvotes with no explanation. Can downvoters please comment?
    – Szabolcs
    Commented Nov 8, 2021 at 21:04
4

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.

5
  • It seems like the better option is to work with the imgur team to see if something can be done to detect pixel density and re-render (images are already re-rendered on upload) to something closer to 72ppi?
    – jcolebrand
    Commented Jan 4, 2013 at 0:21
  • 2
    @jcolebrand But then we lose data for people who have high-DPI screens. Seems just as bad as or worse than the original problem.
    – jtbandes
    Commented Jan 4, 2013 at 2:20
  • @jcolebrand This would indeed rescale the screen captures. While this would "solve" the problem in most situations, details in screen captures which try to show defects or discrepancies happening on HDPI screens would be lost in the downscale. So this approach is definitely not the right one.
    – Coyote
    Commented Jan 4, 2013 at 7:49
  • Define please: If you're a graphics artist or someone seriously focused on HDPI, and it's well known that the (stack.??)imgur uploads downscale, wouldn't you host elsewhere?
    – jcolebrand
    Commented Jan 4, 2013 at 15:32
  • @jcolebrand: Whaaa? I'm sorry but I can't make much sense of your last comment. I'm not a native english speaker.
    – Coyote
    Commented Jan 4, 2013 at 17:10
1

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.

4
  • 1
    also worth mentioning that you can control image size after it is uploaded, given the image is on imgur: meta.stackexchange.com/a/25052/158100
    – rene
    Commented Jan 4, 2017 at 15:02
  • 2
    @rene the point isn't to actually resample images, just to present them at their native dimensions.
    – jtbandes
    Commented Jan 4, 2017 at 16:38
  • When pasting an image on GitHub, you get an <img> tag with width already added with the correct value. If you really want a full size, all you need to do is remove that width.
    – Szabolcs
    Commented Nov 7, 2021 at 8:58
  • We could introduce a boolean-tag thing to specify should SE do the rezise or not? Same for other problems: make a don't tag in the markdown or the class of the image tag? We can do the same for any settings users will want. Perhaps some toggles in the GUI? Edit: this mentions some of my ideas: meta.stackexchange.com/a/161386/1041018. Commented Nov 7, 2021 at 11:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .