Tim Kadlec's research and tests, along with work at Cloud Four, revealed some interesting results about the best way to ensure the browser only downloads what it needs. This is good news for developing speedy websites and applications, and even better news for mobile users with low bandwidth allowances.
The tests were performed on some of the leading browsers* at the time of writing.
Background images set to display: none
Setting a <div> containing a background image to display: none found that pretty much all tested browsers still request the background image regardless of any media query.
HTML & CSS
<div id="test"></div>#test { background-image: url("/images/test.jpg");}@media all and (max-width: 600px) { #test { display: none; }}
Background images with parent element set to display: none
Interestingly, setting the parent element of a <div> containing a background image to display: none returned different results. Apart from Fennec (Mozilla Firefox Mobile), the background image was not requested by the browser.
HTML & CSS
<div id="test"></div>#test div { background-image: url("/images/test.jpg");}@media all and (max-width: 600px) { #test { display: none; }}
This may be useful to you, but consider what happens if you cannot hide the parent element?
Background images with explicit CSS media queries
If you do not, or cannot, hide parent elements then the following test is for you.
Setting media queries with minand max-width rules, where the min-width query has a <div> containing a background image and the max-width query can remove or change the image, revealed that all browsers (with the exception of Fennec) would request only the image for the desired media query.
HTML & CSS
<div id="test"></div>@media all and (min-width: 601px) { #test { background-image: url("/images/test.jpg"); }}@media all and (max-width: 600px) { #test { background-image: url("/images/test-smaller.jpg"); }}
This means that a developer can target an element containing a background image direct, instead of hiding parent elements.
What about <img> tags?
When it comes to <img> tags, say for eCommerce store product images or image galleries, it is not possible to utilise CSS media queries to stop browsers from downloading unneeded assets.
Some methods have suggested scaling up by loading in the smallest possible image (generally used for small-screen or mobile devices) and use JavaScript to swap images out based on the screen size. Alternatively, using server-side browser detection could best-guess the desired image size, followed by JavaScript enhancements if the detection was incorrect.
Further reading
Lots of different testing scenarios were performed, and if you are interested in front-end development I suggest you read the findings of Tim Kadlec.
Crucially, the research requires CSS media queries, so older browsers and those that do not support this technology will not be able to take advantage of these findings. Enhancing older browsers with JavaScript to use such technologies is one method that could bring the browser up-to-date.
* Browsers tested included: Android (2.1+), Blackberry (6.0+), Google Chrome (4.1+), Google Chrome Mobile, Mozilla Fennec (10+), Mozilla Firefox (3.6+), Microsoft Internet Explorer, Apple iOS (4.26+), Opera (11.6+), Opera Mini (6.5+), Opera Mobile (11.5) and Apple Safari (4+).
