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
Then at the end of your html, or the end of your blogpost include the following:
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.