html - Automatic Retina images for web sites

Question

With the new Apple MacBook Pro with retina display, if you provide a "standard" image on your website, it'll be a little fuzzy. So you have to provide a retina image.

Is there a way to automatically switch to @2x images, like iOS (with Objective-C) does? What I've found is: CSS for high-resolution images on mobile and retina displays, but I wish I could find an automatic process for all my images, without CSS or JavaScript.

Is it possible?

UPDATE
I would emphasize this interesting article suggested by @Paul D. Waite and an interesting discussion about it linked by Sebastian.

Answer 1

There is a new attribute for the img tag that allows you to add a retina src attribute, namely srcset. No javascript or CSS needed, no double loading of images.

<img src="low-res.jpg" srcset="high-res.jpg 2x">

Browser Support: http://caniuse.com/#search=srcset

Other Resources:

• WebKit release post
• W3C documentation for srcset
• good explanation about why and how to use srcset
• Chris Coyer's post for more good info