Javascript / jQuery Snippet for doing Retina Resolution Images

Now that the so-called ”new iPad” is here, we have the chance to make sites with drastically higher detail images. These larger images carry a larger file size as well, so we probably only want to make people download them if they have a device capable of rendering them.

We came up with a simple way to specify regular and ”double” resolution images (similar to how iOS apps work). All you need to do is put your images on the page like this, setting the ”retina” class and adding the ”image-x1” and “image-x2” attributes.

<img class="retina" height="768" width="1024" src="" image-x1="assets/Andromeda-Galaxy.png" image-x2="assets/Andromeda-Galaxy@2x.png">
...
<script>
$(function() {
    var dpr = 1;
    if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
    $(".retina").each( function() {
        var imgStr = $(this).attr('image-x' + dpr);
        if(!imgStr )
            imgStr  = $(this).attr('image-x1’);	// fallback to 1x
        $(this).attr('src',  imgStr);
    });
});
</script>

This code snipped peeks at the ”devicePixelRatio” variable, which is set in Safari on iOS devices. For retina devices this is 2. Otherwise it’s 1 (until Apple releases that 4x super retina display – wink wink). Notice we leave ”src” empty in the html to avoid downloading unnecessary images. As always, I recommend using this sparingly. Using large images can quickly bloat your page’s k weight.