For users with the new MacBook Pro with retina display, screenshots have their dimensions doubled. For example, 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.

The correct way to display these is to use

<img src="[url]" width="[half of image width]">

Which produces this:

On a retina display, this is rendered at native resolution; on a non-retina display, it's appropriately downscaled so that it remains the correct size.

Can we get a checkbox on the image upload dialog that does the hard work for us? This would make answering questions a lot easier without having to manually check the image width, divide by 2, and type in the HTML.

Something like this:

  • 3
    Yes, yes, yes and yes - I would love this. Please consider asking this on the main meta meta.stackoverflow.com - your wording and explanation are excellent. I'll gladly ask it there (taking your work) if you would prefer not to ask there.
    – bmike Mod
    Commented Dec 22, 2012 at 16:27
  • We can no longer migrate questions older than a few weeks to a new site. Someone has to copy the text and ask it there
    – bmike Mod
    Commented Dec 23, 2012 at 5:47
  • 1
    @bmike Thought I had done this earlier but apparently not. Anyway, here we go! meta.stackexchange.com/questions/161111/…
    – jtbandes
    Commented Jan 2, 2013 at 2:36

3 Answers 3


Since we can't migrate this question to the main meta - please visit the main site and vote / comment on this request since it's unlikely it will get implemented for us until it gets implemented site wide.


There are many articles discussing image @2x css but one of the simplest I've seen is by WeedyGarden.net

This can be done with HTML4 and CSS2 using a media query and changing the CSS to call the high resolution image.


I'd just as soon leave the original image size as is. Let the end client determine what the image will be scaled to if at all.

Update: Currently the best that can be done is to have a client-side script check the available space in the content area and request an appropriately sized image.

In the future new properties in the CSS3 image module could deal with the issue (look at object-fit for one).

  • This is the problem I want to avoid, so that the screenshots are not horribly large.
    – jtbandes
    Commented Dec 24, 2012 at 1:57
  • 1
    It would be nice if clients actually handled scaling - if anyone knows one that works well - please answer with some details...
    – bmike Mod
    Commented Dec 24, 2012 at 20:58

You must log in to answer this question.

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