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?