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:

share
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 Dec 22 '12 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 Dec 23 '12 at 5:47
1  
@bmike Thought I had done this earlier but apparently not. Anyway, here we go! meta.stackoverflow.com/questions/161111/… –  jtbandes Jan 2 '13 at 2:36
add comment

3 Answers

up vote 2 down vote accepted

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.

share
add comment

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.

share
add comment

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).

share
    
This is the problem I want to avoid, so that the screenshots are not horribly large. –  jtbandes Dec 24 '12 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 Dec 24 '12 at 20:58
add comment

You must log in to answer this question.

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