TL;DR: No. Load up that style.css with all the images you want! They won’t be downloaded unless they are needed.

I was always under the impression that browsers would parse through a style sheet and immediately start downloading all the images it found. This would be really bad on mobile devices (and Desktop too). Think about how much overhead that would be! Grabbing images that aren’t used on a page. Yuck!

I devised a little test. I have a page with inline css. There’s a class that is unused which has a massive image set to be the background. In addition, I also have another massive image that is set as the page background if the page width is less than 400px wide. Each image is larger than 2MB so, you’d notice if it was getting downloaded on page load.

To my (happy) surprise  Chrome, FireFox, Safari, Opera, and Internet Explorer (Yes, even poor IE) are smart enough to skip certain images until they are needed. Chrome, Opera, Safari, and FireBug (for Firefox) all have a Network Monitoring tab to visually show when a resource is downloaded. None of the browsers I tested downloaded an image until the window was re-sized to less than 400px.

1 Comments

  1. Jacob Emerick

    Did you get a chance to test mobile device rendering as well? Like, not the cool smartphones, but some sort of wretched why-is-this-accessing-the-internet device? I’m wondering if this behavior is a modern browser or thing or something that’s been around for a while…

Leave a Reply

Your email address will not be published. Required fields are marked *