Do media query-specific background images load regardless of media query?

[croydon86]

Hi guys

I am building a mobile-first website with all CSS served on one compressed stylesheet using media queries.

Now lets say I have a background image for a selector in the default css (no media query, mobile-first) which is 20k in size.

At media query with screen widths above 800px, that same CSS selector calls a different version of the background image which weighs in at 60k.

My question is, as the whole stylesheet gets downloaded before rendering the page, does that 60k image load on mobile, even though it won’t be displayed? Or does that only load for screen sizes above 800px?

Thanks in advance

[pixelgrid]

this page describes many situations
http://timkadlec.com/2012/04/media-query-asset-downloading-results/

if you are using a media query to just change the background property at a certain width then no it doesnt get downloaded until the width requirement is met(test 5 in the article)

[croydon86]

Thanks @pixelgrid that is exactly what I was after, and excellent article (bookmarked!)

[Author]

Posts