Fix images on Retina Display

Bjango has a list of devices with high resolution display.

There are a few methods out there to fix web images on these devices. Here is a comprehensive list of these methods:

• SVG images

SVG (Scalable Vector Graphics) images are truly wonderful. Apple uses SVG images on their website to fix the retina issue.

• Dedicated stylesheet for retina-specific CSS3

<link rel="stylesheet" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and ( min-resolution: 96dpi ), only screen and (min-resolution: 1.5dppx)" />

• All CSS in one file, including retina-specific CSS3

@media
only screen and ( -webkit-min-device-pixel-ratio: 1.5 ),
only screen and ( min--moz-device-pixel-ratio: 1.5 ),
only screen and ( -o-min-device-pixel-ratio: 3/2 ),
only screen and ( min-device-pixel-ratio: 1.5 ),
only screen and ( min-resolution: 96dpi ),
only screen and ( min-resolution: 1.5dppx ) {

#element {
    background-image: url('/path/to/image');
    background-size: width height;
}

}

An alternate method with limited suport (Safari 6 for Mac, Safari for iOS 6 and latest version of Chromium):

#element {
    background-image: -webkit-image-set(
    url('/path/to/image') 1x, 
    url('/path/to/2x/image') 2x);
}

• 2x inline image with HTML <img> tag

<img src="2x-img.jpg" width="1x-width" height="1x-height" alt="" />

• Complement with JavaScript image replacement

Use JavaScript to detect the ratio and replace the image accordingly. Avoid loading all the images.

if (window.devicePixelRatio == 2) {
    // Code
}