Much easier said than done, sadly.

Not that hard. Want to make it a background image?

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
        background-image: url(image@2x.png);
    }

Do you consider the image to be part of your content? (Something you'd want to appear on printouts and RSS feeds)

    <img src="image-src.png" srcset="image-1x.png 1x, image-2x.png 2x" />

Retina images are a solved problem for modern browsers. Very few users with Retina screens (and thus new computers) are on non-modern browsers, and those users who are using old computers and browsers will end up getting the 1x image. (Good luck finding a Retina Macbook Pro that runs IE9)

Sorry, I just saw this now and I doubt you will see it 6 days later, but just in case:

The main problem with that approach is (or at least used to be; I would love to learn that it's changed) that the browser will still load the 1x image first. Since the large chunk of retina users are on mobile devices, that sucks.