Automatic Retina images for web sites
html, image, retina-display
Solution
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
Problem
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.