Image Solution for Retina and Non Retina Displays

It’s become more and more important to provide support for retina displays as they become more widely available. In order to do this I’ve been inserting images that are 2x the size they need to be in order to get the higher pixel density and then scaling the images in the code to look correct.

A client noticed that in IE 11 this these retina style images don’t look good. Retina images actually look worse in IE than native sized images. The solution is to load natively sized images and then in the css have a media call to load in larger retina ‘background images’ in place of the actual image. This requires the image your replacing to have something containing it.

Here’s an example of such a media call:

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
#logo img{
display:none;
}
#logo a{
background-image:url(/wp-content/uploads/2014/04/CCM-Logotype_ART.png);
width:100%;
padding-bottom:27%;
background-size:100% auto;
}
}

Leave a Reply