Automatic Retina images for web sites

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

There are different solutions, each with its own pros and cons. Which one is best for you depends on various factors, such as how your website is designed, what kind of technology your typical visitors are using etc. Note that retina displays are not limited to the Macbook Pro Retina and the coming iMacs, but also include mobile devices, which may have their own needs.

The problem is also closely related to images in responsive designs in general. In fact, it is probably best to utilize generic responsive design techniques, instead of designing for specific devices. After all, technology will keep changing all the time in the future, too.

Some of the solutions/discussions I noted:

• Vectors wherever possible including CSS techniques (gradients, rounded corners etc.), SVG and icon fonts.
• Serving high resolution ("retina") images, but compress them more (JPEG quality), as suggested by Yoav Weiss, or let the mobile networks compress them when really needed (i.e. when mobile), as suggested by Paul Boag.
• Adaptive Images, a (mostly) server side solution. It is based on a cookie storing the screen resolution, a web server configured to serve images from a PHP script, and named script to read the cookie and serve the appropriate image.
• A bunch of possibilities well described and discussed on Smashing Magazine.
• Serving just slightly higher resolutions to smooth retina portrayal a little, as suggested in a video by Paul Boag.
• The @1.5x technique on A List Apart is basically the same idea.
• In the near future, the <picture> tag may become a solution supported by a W3C working group and even Apple.
• A JavaScript technique proposed by Jake Archebald.
• An extensive discussion of different techniques on Smashing Magazine and the problem in general.

As the other answers show, there are even more techniques - but probably no best practice, yet.

One thing I wonder is how to test and debug some of these techniques, without having the respective device(s) available...