The best answer is to use srcset (supported in Chrome 34+, Firefox 32+, Safari 8+ and Opera 22+) with a polyfill (or not, depending on your point of view) for o

The best answer is to use srcset (supported in Chrome 34+, Firefox 32+, Safari 8+ and Opera 22+) with a polyfill (or not, depending on your point of view) for older browsers. Srcset lets you swap out images based on screen dimensions and the device's pixel ratio (e.g. @2x/@3x etc). An example would be: <img src="normal.png" srcset="smaller_than_600px_wide.png 600w, smaller_than_600px_wide@2x.png 600w 2x" alt=""> This would use normal.png in older browsers, then use smaller_than_600px_wide.png on screens with a width of less than 600px, and smaller_than_600px_wide@2x on those screens where the devicePixelRatio == 2. It's smart enough to only request the images that are needed - on a high DPI small screen only the last image would be requested. A polyfill won't be as efficient, which may cause problems depending on how you are using it.