What are the best practices for background images?

  • We are placing a large, non-repeated background image. It's very heavy; takes up almost 60% of the page load time. If you visit MSN or other high profile sites, they are using repeated background images, which are 10kb or less and the background image does not effect load time.

    So; what are the best practices for background images? Should I use large background images in the background and forget about page loading time?

    Jonta, am I right in thinking that the page in question is the one with the new design? The old design has some very small images; the new one has a *huge* 600kb JPEG.

    Yes, the problem is in new design. apply new design.

    @pir abdul wakeel: You can improve an image file size with RIOT

    You should also take a look at http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/ for non-repeating cum repeating background image.

    Best practice is to not have users have to load gigantic background images. Hire a designer that understands the medium better.

    @DA01 there are tasteful ways to incorporate large background images into websites. Ways that enhance aesthetics without hampering usability are OK in my book.

    Using the Google Page Speed extension for Firebug you can check your page. After analysis I will show a red **Optimize images** which points to optimized versions of the images. Results differ from a sadly 5% to a huge 95% which is not uncommon.

    If your page takes too long to load, users leave. What heavyweight background image is worth that cost?

  • JoJo

    JoJo Correct answer

    10 years ago

    Accessory, not necessity

    The background should be an accessory, not a necessity. If the background weren't there, it shouldn't negatively affect usability. An example of a poorly designed website that uses the background as a necessity is Project Swole. Before the background is loaded, there is not enough contrast to read the text. When I access this site on a slow mobile network, I have to wait ages to even begin scanning the text. On the other hand, a website like Legendary Aircraft is still very usable before the background has loaded.

    Bad

    before after

    Good

    before after

    Non-blocking

    The background should be set with CSS like this background: url(whatever.jpg). It should not be an <img src="whatever.jpg"> tag. The former does not block the window onload event. The latter will block it. Some Javascript might be listening for the window onload event. If you were to use a large background in an <img> tag, this would delay the said Javascript from executing and prevent the user from interacting with the page.

    Fast loading

    I haven't used large backgrounds in ages, but the last time I checked, progressive JPEGs do not progressively load as CSS backgrounds. Rather, they tear in slowly. This presents a disconcerting effect to the user. It beckons at the 56K modem days, which we all don't want to go back to. It would be better if you lower the file size of the image to mitigate this tearing effect. Many designs with large backgrounds wouldn't suffer from more compression, because backgrounds shouldn't need much detail. If they needed detail, it would mean the background distracts from the main content.

    Optimize the image

    Many images saved are not saved in optimal compressed form. They contain metadata, which is usefull in many cases, but not for use in browsers. Also the used compression may be less than optimal. Run your image through a image optimizer before publishing it on the web. There are many out there, but one of the easiest thing to do is run it through this webservice: kraken.io

    Don't use on mobile devices

    On the mobile version of your website, you should not use large background images. Many mobile users are still using Internet connections 10 times slower than broadband, such as 3G. Since mobile users are in much more of a hurry than desktop users, they won't stick around to view the fancy background. Large backgrounds also eat away at mobile user's data plans, which is sometimes not unlimited like many broadband services. Lastly, network operations are one of the leading tasks that drain the battery on mobile devices. This I learned while watching Apple's introductory tutorials on iOS development.

    You can override your desktop's background style with CSS media queries.

    body {
     background: #ABCDEF url(largeBackground.jpg);
    }
    
    @media screen and (max-width: 640px){
     body {
      /* option 1: remove background altogether */
      background: #fff;
    
      /* option 2: serve a much smaller background */
      background: #ABCDEF url(muchSmallerBackground.jpg);
     }
    } 
    

    Excellent and extremely practical advice.

    Good example, but in our case, we are just showing background-image for look and feel. may be what ever image it's, not related to our domain. like airplane in airplane.com

    Isn't this a usability forum? if you only care about "look and feel", you should have asked this question on http://graphicdesign.stackexchange.com .

    Look and feel , User experiences and Performances,

    I don't really see how having an image for purely 'look and feel' makes JoJo's advice any less relevant...

    If anything having a background image that is not related to the domain and taking 60% of the page load time makes this advice even more relevant.

    Thanks for the tips especially on mobile devices. Does that also apply to tablet devices?

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM