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:

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?

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.

Has this improved since Tim's article in 2012?
– gprJul 30 '16 at 6:18

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?
– gdbjJun 11 '17 at 16:39

@gdbj 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.
– jjspaceFeb 14 at 14:56

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.

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.
– cimmanonMay 20 '13 at 20:30

Good to know! I hope the rest of the information is fairly sound, though?
– Sandy GiffordMay 20 '13 at 20:34