1

I have a Mac with an internal retina display and an external regular-resolution display. If I do a screen shot on my external display and upload it to SO it looks great. But if I upload the screen shot from the retina, which has 2x the DPI, the picture on SO is twice the size it should be. I suspect that SO's HTML rendering engine is not looking at the DPI information embedded in the PNG.

How does this get fixed?

enter image description here

|improve this question
  • You mean the browser. The browser is what is rendering the images. When grabbing on the retina you have x4 the pixels, so that's what the browser renders. – Oded Feb 18 '16 at 16:30
  • No, it's StackExchange. There should be some kind of stylesheet or HTML that renders high-resolution bitmaps and low-resolution bitmaps in a manner that's consistent with their embedded DPI. This can and should be done on the back end. I don't have a problem when I paste these PNGs into graphics manipulation programs. – xf. Feb 18 '16 at 18:59
1

As Oded mentioned in a comment, this is the expected behavior. Higher density displays produce larger screenshots.

You can take advantage of imgur's "secret" thumbnail feature to easily get around this without having to rescale your screenshot in an image editor. Append t, m, or l to the image id (before the file extension) to get a small, medium, or large thumbnail.

The thumbnail URLs for your image would be as follows:

Large thumbnail Medium thumbnail Small thumbnail

You could also use HTML rather than Markdown to scale the image in half, this requires more legwork but has the benefits of looking crisp on high density displays and won't give you the compression artifacts present in the imgur thumbnails:

<img src="http://i.stack.imgur.com/vCK8x.png" width="264" alt="screenshot">

screenshot

|improve this answer
  • Thanks, but this is NOT expected behavior. From a usability point of view, an image that looks correct when I double-click on it and display it on my Mac should look correct when I upload it to a StackExchange website using the website-provided tools. – xf. Feb 18 '16 at 18:57
  • @xf. not expected by you perhaps. How your Mac renders the image is irrelevant. How is Stack Exchange supposed to distinguish between a regular old extra large image and a screenshot of a HDPI display? – JohnB Feb 18 '16 at 19:06
  • @xf. it might be worth chiming in on this post seeking for improvements to be made to the image uploader. There is already a mention of including the ability to scale down large images but nothing specifically for HDPI display screenshots. Including the ability to easily reduce the scale of an image by 50% could be useful. – JohnB Feb 18 '16 at 19:32
  • — Stack Exchange is supposed to distinguish between the regular old extra large image and a screenshot of the HDPI display by examining the DPI tag that is embedded in the PNG. That's what most programs do. StackExchange is an outlier. I'll check the other post. – xf. Feb 21 '16 at 12:09

You must log in to answer this question.

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