New Poll: The Case of the Giant Background Image

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Let’s say you’ve designed a web page and it makes use of a full page background image. You really like the way the site looks with this background image. It looks amazing. But the image is 350k. You’ve decided that, while you know this is heavy, it’s worth it.

But then you start thinking about mobile. This large background image doesn’t add as much to the design on the small screen, and 350k especially cumbersome on the probably-lower-bandwidth and probably-slower-in-general device. Then consider that mobile browsers often have far more limited cache so even that won’t help. Mobile traffic is 2% of your overall traffic.

You could of course use media queries to not show the background image when a screen is narrow, but that doesn’t help much because that resource will still be downloaded. So you are in a pickle:

Do you use the 350k image and revel in the beauty, accepting the significant consequences for 2% of your users? Or ditch the image and deal with the page being a bit uglier-but-faster?

The poll (in the sidebar) will only have the two choices, forcing you to choose. But if you have a third option you think you’d go with, please leave it as a comment.

Update

Somehow I became completely convinced that background images referenced in CSS, even if they are under a not-currently-active @media query were still downloaded by the browser. I feel like I had run test cases, talked with folks about it, etc, but either I must have been dreaming or browsers have fixed that issue. In this test case by reader Ruben you can test that even background images that are removed by @media queries don’t load.

So this poll is basically invalid… the correct answer would be that you always remove the 350k image via @media queries.