A much simpler way to serve retina displays the right images

A while ago, I wrote a post showing how to serve high resolution images to people using retina displays such as the iPad, iPhone, many android tablets, and retina Mac Book Pros (I use one of those which is why I am interested in this). I have now found a far simpler way to do this than I explained before and it all hinges on simply giving a id tag to the image and replacing the src property of the image in a javascript. You still need to have statement in your site's CSS:

<script type='text/javascript'> var retina = window.devicePixelRatio > 1 ? true : false; </script>

Then in your post you call an image the usual way but making sure to add the image width and height specifically as well as pecifying an id

<a href="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/ZionNP/10459860_zVKwP3#!i=725608231&k=Bm22LF3&lb=1&s=A" title="Tree and glow"><img alt="Tree and glow" height="600" id="zion_011213" src="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/ZionNP/i-Bm22LF3/4/L/_DSC0517-_DSC0525-L.jpg" title="Tree and glow" width="480"></a>

Then at the end of your html, or the end of your blogpost include the following:

<SCRIPT type="text/javascript"> if (retina) { zion_011213.src="http://lagemaatphoto.smugmug.com/Landscapes/National-Parks/ZionNP/i-Bm22LF3/4/X3/_DSC0517-_DSC0525-X3.jpg"; } else { ; } </SCRIPT>

This replaces the image in the img tag above with this one that is precisely 2x larger in both dimensions (so 4x in area) and therefore fits retina displays perfectly. I don't think the else part is needed but I like to be neat. A disadvantage of this method above the previous one I talked about is that browsers might end up loading both the low resolution and high resolution image. On the other hand using this method makes your post share correctly on social networks with the image intact. Using the older method the image would never show up. Now to make it complete, here is the actual image referred above:

Tree and Glow. Buy a print. On flickr.
This image is a redo of a 9-image high resolution composite I created in The Narrows in Zion National Park.
A quick way to test the effect is to compare this image in a web browser that supports retina/hiDPI such as Safari and Chrome, to one that doesn't such as old versions of Firefox (15 and below). Of course this only makes sense if you are actually using one of those displays.