Showing retina display image with pure css

Question

I have a situation where I can\'t possibly know the dimensions of an image (a proprietary limited cms...)

I need to figure out how to show a retina level image, and

Answer 1

You can do this trick: output all images and show only relevant images to each device:

HTML markup:

<h1 id="logo">
  <a href="/">
    <img class="logo logo_normal" src="images/logo.png" />
    <img class="logo logo_retina" src="images/logo2x.png" />
  </a>
</h1>

CSS styles:

.logo_retina { display: none; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .logo_normal { display: none; }
    .logo_retina { display: block; }
}

Also you can use this ‘adaptive images’ solution and read about adaptive images saga on html5doctor

UPDATE: dabblet link

HTML:

<h1><a class="logo ir" href="/">BRAND</a></h1>

CSS:

#logo a {
    display: block;
    width: 200px;
    height: 200px;
    background: url('//placekitten.com/200');
}

@media  (-webkit-min-device-pixel-ratio:1.5),
        (min--moz-device-pixel-ratio:1.5),
        (-o-min-device-pixel-ratio:3/2),
        (min-resolution:1.5dppx) {
    #logo a {
        background: url('//placekitten.com/400');
    }
}

Answer 2

Having thought about this issue myself - how about just using the x2 image and making sure to set the image's pixel dimensions? Retina displays will show it 1:1, and non-retina displays will show it at 50%. All clients have to load the x2 version though, meaning more traffic.