Media queries and asset downloading

Posted by Karl Tynan

I recently read an in-depth and extremely useful article by Tim Kadlec about how CSS media queries can be used to tell different browsers what images to download or not within the CSS.

His 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+).

About the author

Karl Tynan

Karl Tynan

Karl is our Senior Front End Developer at Gibe and looks after the HTML, CSS and JavaScript for our projects. He has considerable experience and always takes a practical approach to interface development, ensuring the best possible experience is achieved in a technically elegant way.

2 comments:

Marwan said...

Hi,The right sidebar is touichng the middle column in the homepage as you can see. I want to change the size same like left sidebar, not touichng the middle column.Thanks for reply.

Gravatar image

Marwan said...

Hi,The right sidebar is touichng the middle column in the homepage as you can see. I want to change the size same like left sidebar, not touichng the middle column.Thanks for reply.

Gravatar image