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?

Heptarchy

You could test the opposite on a desktop browser. Put a background image in a max-device-width: 1px, and check in the developer tools to see if it gets loaded. – Foxtail

Agree with @millimoose. Check your network tab in the browser development tools. – Entertainment

(That said, near as I can tell it seems like nothing in media queries that don't apply is fetched.) – Foxtail

a worth reading research here: timkadlec.com/2012/04/media-query-asset-downloading-results – Bilharziasis

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/

Majormajordomo

Has this improved since Tim's article in 2012? – Dillman

curious, but if you resize the browser such that a different background image is selected but hasn't loaded yet, does the background disappear or is the old image maintained before it is swapped out? – Piscary

@Piscary The background will disappear because the css is specifying a different one to use. It behaves the same way it would appear on initial page load for that screen size. – Neustria

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.

Hein

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!

Springtail

I can tell you for certain just about every browser downloads all referenced style sheets, including alternate and ones restricted by media query (confirmed with Opera mobile emulator and Android emulator). Images referenced within the stylesheets, on the other hand, are only downloaded as needed. – Skulduggery

Good to know! I hope the rest of the information is fairly sound, though? – Springtail

You don't really need developer tools, you could log HTTP requests on your router or otherwise intercept traffic from the phone. – Foxtail

You could! That would be an alternate solution and you should absolutely submit a separate answer for it! It would be excellent information to have, here. – Springtail