Orange Barrel Media specializes in “Landmark Advertising” and has a handful of other brilliant projects pictured on their inspirational (yet, surprisingly slim on content) website: http://orangebarrelmedia.com/

Original post from: http://www.columbusalive.com/live/contentbe/EPIC_shim.php?sec=arts&story=alive/2008/best/arts/09.html

images/myImage.jpg

On a normal device, this would appear at 150×75. But when designing for a device with RQ display, you will need a second image in the same directory, at 300×150.

The Code
Unfortunately, older devices such as the iPhone 3 do not support the same codes that the iPhone 4 and iPad support. This means, we need two separate sets of CSS code. The first set will display the image as it should appear on non-RQ devices.

.myImage {
height: 75px;
width: 150px;
background: url(“images/myImage.jpg”);
}

Now, we have to check to see if the device has an RQ display.

@media screen and (-webkit-device-pixel-ratio: 2) {}

Now simply add your css code inside this check, like so:

@media screen and (-webkit-device-pixel-ratio: 2) {
.myImage {
height: 75px;
width: 150px;
background: url(“images/myImagex2.jpg”);
background-size: 100%;
}
}

Notice the image is myImagex2.jpg. This is your image at double it’s original size, which is resized by the device’s browser to the container’s size, thus doubling the pixels shown.