When using @media queries, does a phone load non-relevent queries and images?

Question

If I base my CSS on mobile styling, then use @media queries for gradually larger displays (tablets, desktops etc), will the mobile devices use the desktop styles?

I believe that typically, mobile devices will load all images even if they don't apply to its own particular media size. Meaning it will load all images and hide ones not matching its query-based stylesheet.

What I am trying to do is use one background for the larger version of the site:

.splash {
    background: #1a1a1a url('/assets/imageLarge.png') no-repeat;
}

and another for the mobile version:

.splash {
    background: #1a1a1a url('/assets/imageSmall.png') no-repeat;
}

If I apply the mobile CSS before any media queries, and add the large media CSS below using a query like @media screen and (min-device-width: 481px) {...}, will mobile devices load the large image too?

Answer 1

Behaviour is browser depended but iOS Safari and Android Chrome will respect the media queries and only download the background images for the applicable media queries.

If you want to inspect this behaviour, try loading the page with Mobitest (http://mobitest.akamai.com/) or a tethered device.

If you use separate CSS files (and I'd urge you not too) the browser will download each of them even if it doesn't need them, this is a limitation of the CSSOM. Some browsers e.g. WebKit and Blink based ones prioritise the stylesheets so the ones needed to render the page are downloaded first and the others at some point later.

One thing to watch out for is display:none on content images as it won't prevent download in many situations. Tim Kadlec explores this more here: http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 2

Tim Kadlec has put together some awesome research for this – Media Query & Asset Downloading Results

Your specific question is answered in Test #4 – results are spotty. Better to have media queries for both your images.

Answer 3

This sounds like it would be largely browser dependant, but I'd imagine any mobile browser worth its salt would try to cut down on data usage by not loading images (and possibly not loading entire stylesheets) that are marked as not for it. Furthermore many mobile browsers prefer to not be recognized as mobile browsers. I know I hate it when I pop open a site on my iPad and a mobile-stylesheet forces me to view a skinny sliver of single column site on my 9.7" screen.

So media queries are unreliable, but still worthwhile (they really don't hurt anything, so long as they're used responsibly), and that doesn't help what is a fairly obtuse (but still good) question; time to do some testing!

Most modern desktop browsers come packaged with developer tools. My current favorite is FireFox's dark and pretty web inspector (the 3D view is especially to die for). But what about on Mobile? The largest parts of your mobile audience will not be on browsers that come with developement tools.

Well, you have a couple options:

• Firebug Lite has some mixed results on mobile browsers, but is an excelent choice in most cases where other inspectors are unavailable. It does seem to work in iOS and other mobile browsers with HTML5 support, though.
• This question suggests using something called "weinre". I've never used it, but it looks legit enough.
• If you're okay with targetting just a few certain browsers, many DO include developer tools. Such as Google Chrome for Android!

Whatever you choose, you'll be looking for an asset viewer of some sort; perhaps a timeline view. Any sort of tool that will allow you to see what the page loaded, in what order it loaded it, and how long it took to load.

Good luck!