Automatic Retina images for web sites
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
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