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 I want to do so without using javascript (if possible).

I've been using:

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

but that only has helped me with elements that have background images. Since the image in question can't be a background image (since I don't know the size...) what's a way of figuring this out?

I have logo.png and logo2x.png, and my applicable markup looks something like:

<h1 id="logo">
  <a href="/">
    <img src="images/logo.png">
  </a>
</h1>

Is this possible without javascript? I'm not against using non-standard css for this - as long as it works with webkit (ios/iphone in this case). I want to display logo.png for normal browsers but logo2x.png for browsers with a pixel ratio of at least 2.

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');
    }
}