29

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! (I imagine you can do this for pasted screenshots, too, although GitHub doesn't.)

  • 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 Jan 2 '13 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 Nov 24 '15 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... – timothymh Jan 4 '17 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 Jan 4 '17 at 4:47
  • Oh, never mind, I was thinking of GitHub... :-( – jtbandes Jan 4 '17 at 4:48
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 choses to display more options, display a fine grained density selector (slider + text input).

Yet another aproach 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.

  • 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 Jan 4 '13 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 Jan 4 '13 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 Jan 4 '13 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 Jan 4 '13 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 Jan 4 '13 at 17:10
2

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.

  • 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 Jan 4 '17 at 15:02
  • @rene the point isn't to actually resample images, just to present them at their native dimensions. – jtbandes Jan 4 '17 at 16:38

You must log in to answer this question.

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