With cross-devices development, media-queries and new techniques, loading times, http requests are a "new" concern as often some assets won't be displayed. Here's a little research about what browsers will download or not.
To know what techniques would prevent the browsers from downloading useless assets, I wrote a simple test page. It counts the hits on an image and, if the numbers before and after the page is loaded are different, it means the image has been loaded.
If you want to write your own test, you'll most likely need to use a server-side language (I used Php), some Html and Css to test the different ways to use and hide content, and some Ajax calls to compare the numbers after the page has been loaded.
The current test page is rather ugly and messy, I'll fix that soon, and add more explanations on this page.
Go on http://lab.justinmarsan.com/download-test/ if you want to see my test page in your browser.
WebKit downloads the file every time except when a background is applied through a non-matching media-query.
Firefox won't download the image called with background image if the styles are hidden but they will still download assets from img tags.
Like Firefox does, Opera won't load useless background-images.
IE, like WebKit will download background-images even if they have display: none;
Something odd appears with IE6 : Elements with a background-image and display: none set inline won't be downloaded... But they will be if those styles aren't applied inline.
It's rather clear that the way things are isn't optimal, in too much situations, some assets will downloaded for no reason.
Using media-queries and the mobile first approach, it is possible to use background-image without useless http requests. The issue with this solution is that it won't work for img tags and will require other techniques such as...
With javascript it's possible to get the viewport's size and inject some content accordingly. This solution isn't optimal either as it could break for users that browse with JS disabled, and often will require you to write a lot of scripts to insert content where you need it
I've worked a while ago on a frontend framework that was meant to be a workaround to this issue : Not have content downloaded for no reason without having a more painful workflow. It's not optimal yet and could be improved but until it is, it can still be a starting point to find your own way to deal with the problem at hand.
