> And that hero image that's actually 1600px wide and then resized in CSS to 400px? It's there because that was the source image from the external agency and no one thought to modify it.
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)
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.
And because of retina iPads and Macbooks.