I was having a conversation the other day and the developer I was speaking to mentioned that it was a necessary practice to split up stylesheets to ensure unnecessary background images linked in the CSS didn’t load on pages where they were not used.

I vaguely remembered this having been an issue in some browser(s) years ago — and remembered it more recently with web fonts.

However, I felt pretty confident that it wasn’t an issue with images these days. Except if this person had observed it … maybe no major desktop browser has this issue, but some mobile browsers do? I went looking to see if I could find any evidence one way or the other (without, you know, testing it myself).

Are unused CSS images downloaded?

Answer, “Maybe, but ‘no’ in all tested browsers.”

Does a phone load non-relevant queries and images?

Answer, “Maybe, but ‘no’ in all tested browsers.”

Context-specific images

Answers in comments, “Yes. Nuh-uh. Yes (no).”

Load times and responsive images

Answer, “Yes, but after testing realized ‘actually, no’ in all tested browsers.”

CSS loads unused images

Answer, “Yes, in a version of Safari earlier than 3.”

Debunking Responsive CSS Performance Myths

Doesn’t even mention this.

Using media queries in the real world

Answers in comments, “Yes. No. Maybe?”

Essential considerations for crafting quality media queries

Answer, “Yes, sometimes.”

Media Query Asset Downloading Results

Answer, “It depends.”

Far and away the most useful (thanks, Tim Kadlec).  Depending on your particular techniques you could end up loading more images than you think you are.

The thing about most of these tests showing browsers downloading images you don’t particularly want them to is that the selector with the image actually matches, then is overridden/hidden.  So it’s not the most optimized behavior from the browser, but it makes sense and matches what I expected — the takeaway is to be careful how you author in those situations.

What about an image background on #test4a, when id="test4a" isn’t on the page at all?  Extrapolating from these sources and the tests shown the answer seems to be, “No, it wouldn’t get downloaded”.

However, there’s a difference between “seems” and definitely not.  Unfortunately, I’m not 100% satisfied that this definitely never happens.