Grow your CSS skills. Land your dream job.

New Poll: The Case of the Giant Background Image

Published by Chris Coyier

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.

Comments

  1. Jonathan
    Permalink to comment#

    Interesting question. I said keep it, but I really think it depends on what the site is for. If it’s a gallery style site where people expect to wait for large graphics, then I think it’s okay. However, if it’s a site where people need information fast…then I would avoid it.

  2. “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. ”

    If the image is applied as a background image through CSS, you can set your media queries up to be mobile first. Having the image only applied in the desktop media query would prevent it from being downloaded on a mobile device. Problem solved?

    • I’m fairly sure that’s not true. All resources in CSS, whether the media query is in effect or not, are downloaded. I believe it’s that way on purpose so that should another media query suddenly become in effect, the change can happen very quickly.

    • Permalink to comment#

      Not ‘all’ resources, but all applicable resources*. Just to clarify for some people that are just grasping the concept of CSS! If you put a 5mb image as a background to a div that isn’t part of the page you’re loading, that image won’t be downloaded.

    • Permalink to comment#

      Incorrect Chris. One of the reasons behind mobile first design is that assets defined in desktop media queries will not be downloaded by the browser. You can test this easily by using the NET tab in Chrome or Firefox.

      It’s a great feature

    • Graham
      Permalink to comment#

      @Chris

      If you use media queries for the small resolutions first the larger desktop assets like the huge background images will not be downloaded. The issue then is that you have to use JavaScript to shim in media queries for IE or else they will be served the lo-fi mobile version by default.

      Check out 320 and up it’s essentially a refined version of the Less CSS framework that accomplishes this.

    • Ruben
      Permalink to comment#

      @Graham: no shim needed, just “@media only”.

    • You’re right, it IS true.

      I’ll correct this. Now I’m interested in how I came to this incorrect understanding. I wonder if in earlier versions of browsers that supported media queries they would download all assets if applicable or not, or, if I just assumed that incorrectly.

  3. Permalink to comment#

    I think you need to add another option in there for some kind of query to show it or not. Most sites these days are built on some kind of platform and I think you could do a win-win by only query the image for web and not mobile. Or another option could be using jQuery to use it or not.

    Either or, I think the poll should have an “other” option for a few different routes as the two you provided aren’t necessarily the only two options you have.

    /my 2 cents! :)

    • Exactly, using JavaScript or server-side detection to show the image seems like the best choice. It’s certainly better than abandoning the image strictly because of mobile.

  4. mikemick
    Permalink to comment#

    Add the style inline, and hide it from mobile devices using server-side agent/browser sniffing. Yeah, it breaks just about every rule (inline styles, browser sniffing) but it works.

    • mikemick
      Permalink to comment#

      Alternatively, your server-side sniffing code could just simply add a class to the element, instead of using inline styles.

  5. Miles Carmany
    Permalink to comment#

    I like Matt Wilcox’s solution: http://adaptive-images.com/

    It requires a little PHP and .htaccess, but its drop in to any existing project so you don’t have to recode your site.

    • lulezi
      Permalink to comment#

      Agreed! Adaptive Images is definitely a very elegant solution to solve this problem!

  6. Evert
    Permalink to comment#

    I would use some form of server-side (php) program to load or not load the image.

  7. Laz
    Permalink to comment#

    What RussellUresti said.

  8. Permalink to comment#

    Chris, are you sure that if you override the background-image for mobile, it will still get downloaded?

  9. Pouya
    Permalink to comment#

    nice job dude

  10. http://adaptive-images.com/ is the way to go. It takes just a few minutes to implement and works awesome.

  11. First Chris, I’m a big fan. Great stuff.

    Second. At a certain point don’t you just need to rely on modified browsers and increasing processing speed with future mobile phones? Opera Mini and apparently (fingers crossed it’s good) Amazon Silk downsample images with different techniques to deliver them faster for mobile. Most people I see on older phones don’t even try and get on the internet any more because ALL websites load embarrassingly slow.

    Plus, since they are almost giving new smart-phones away in gift bags at this point, I think the turnover is much higher than someone clutching to an old machine running Windows XP.

    So, I say forget about it and make it look good. Responsive design should be for better reading not quicker download. Just my opinion.

  12. Permalink to comment#

    It really depends on the purpose of the website, I think.

    Like Jonathan says, it’s not a good idea for informational websites.
    But I would use it if the main goal of the website is fun/entertainment, or when the websites ‘charisma’ is more important then functionality!

  13. I get that you’ve purposefully limited the options to force a decision, but as seems to be the general consensus in the comments, the best option (for me at least) is some form of adaptive image server side trickery.

  14. I vote to keep it.

    I believe in lean and efficient code, but also realize that in today’s Internet-browsing society with the use of broadband and 4G connectivity spreading like wildfire, 350k isn’t really too big a problem.

  15. Will
    Permalink to comment#

    I’d probably use some JS to detect screen width on load, then retrieve the correct image. If I wanted to be fancy I’d probably hook into the browser resize event, and dynamically update the image as needed. Is there anything wrong with this approach? Seems straightforward to me.

  16. Pablo Botta
    Permalink to comment#

    You can always add the image to the background via javascript / jquery and avoid the download in the mobile device.

    Look at it:

    http://jsfiddle.net/p4bl1t0/3xdZq/

    • David Smythe
      Permalink to comment#

      As it’s a background image, why not use JS to add a class to the body for desktop and create a css rule around that?

  17. Ruben
    Permalink to comment#

    “I’m fairly sure that’s not true. All resources in CSS, whether the media query is in effect or not, are downloaded.”

    No. Remember hover CSS images? They’re only used when the hover actually triggers.

    Just serve the 350k image to desktop (if you really need to) and something else to mobile. Doesn’t matter if you do the latter using some form of CSS, JavaScript, or server-based content negotiation.

  18. Permalink to comment#

    I use the image, and create a much more streamlined, lightweight, mobile edition for my blog. :)

  19. For a fullpage background image I would use the mobile first approach: use a smaller file and replace it with a higher resolution if the browser/user benefits from it.

  20. If it was me. A JavaScript code was add to the end of page for detecting
    if it’s desktop add Css background image even chose image with visitor screen width and height for reduce image size. and compress image with save for device and web option in photoshop.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".