When accommodating retina displays by creating a second image twice as large I've seen picturefill.js recommended to prevent download of the larger images unless they are needed.
But isn't this what the 'min-device-pixel-ratio' media query already accomplishes? Or is it that images in your CSS are ALWAYS downloaded even if the particular query isn't met?
No, the images only get downloaded if it meets the correct CSS criteria. So you are safe to use media queries over picturefill.js. Have a look at this article, which does tests on image requests based on media queries: http://timkadlec.com/2012/04/media-query-asset-downloading-results/. Similarly, you can also use Chrome Dev Tools Network tab to see the images that are requested on load - you'll find only the images in the media queries that are met will be downloaded.
