Checkbox to automatically resize a retina display screenshot

Question

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:

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:

Answer 1

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.

• Automatically resize high-resolution screenshots

Answer 2

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.

Answer 3

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