Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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.