Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
1  
Yes, the problem is in new design. apply new design. –  pir abdul wakeel Sep 5 '11 at 10:15
3  
@pir abdul wakeel: You can improve an image file size with RIOT –  Benoit Sep 5 '11 at 12:19
3  
You should also take a look at designfestival.com/… for non-repeating cum repeating background image. –  rubish Sep 5 '11 at 14:59
3  
Best practice is to not have users have to load gigantic background images. Hire a designer that understands the medium better. –  DA01 Sep 5 '11 at 17:52
1  
@DA01 there are tasteful ways to incorporate large background images into websites. Ways that enhance aesthetics without hampering usability are OK in my book. –  JoJo Sep 5 '11 at 18:41

4 Answers 4

up vote 62 down vote accepted

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.

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);
 }
} 
share|improve this answer
8  
Excellent and extremely practical advice. –  Jimmy Breck-McKye Sep 5 '11 at 9:54
    
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 –  pir abdul wakeel Sep 5 '11 at 19:05
1  
Isn't this a usability forum? if you only care about "look and feel", you should have asked this question on graphicdesign.stackexchange.com . –  JoJo Sep 5 '11 at 19:24
    
Look and feel , User experiences and Performances, –  pir abdul wakeel Sep 6 '11 at 5:47
2  
I don't really see how having an image for purely 'look and feel' makes JoJo's advice any less relevant... –  Jimmy Breck-McKye Sep 6 '11 at 10:26

You should not forget about page loading time. Load time is key factor in conversion from visitors to readers / users, and slow pages are extremely frustrating to work with.

If the large image in question can't be replaced, you can mitigate the effects in five ways:

  1. Most of the background image in your new design is covered by your content. Why not just cut your image in two and crop each half, so only the part that will be shown will be loaded in the first place?

  2. A large portion of your image just fades to solid black. Why not crop this and make the lower half of the page a 'natural' black background with CSS?

  3. You can play with image compression. There are PNG and JPEG recompression algorithms that can shave valuable kbs from each resource.

  4. You can specify the image as a CSS background property, as JoJo suggests, which allows the rest of the page to load first. However, the page must remain legible and (reasonably) attractive without the image being provided.

  5. You could work with a CDN provider, who'll redirect users wanting the image to CDN caches in their own region. This seems like overkill for you, though.

Edit Here - I just resized your image for you using methods 1, 2 and 3 above. After chopping, cropping and resizing, the finished product (http://i.imgur.com/DLoey.jpg) is 21.4kb. That's less than four percent the original size!

All you have to do is place that image on either side of the page's content. If you want to keep the 'reversed' look in the original, simply style the right-hand image according to the instructions in this CSS-tricks article.

share|improve this answer
4  
Never forget file size. Where I work an old programmer refuses to change her intranet app, 98% of the site size is a .bmp (you read that right) used for the layout. It's horrifying and she just doesn't care because she doesn't want to change it, even though it's literally a minute's worth of work. Never forget a minute of your time could save your users minutes of their time every day and every time they use your site. –  Ben Brocka Sep 5 '11 at 12:53
    
I strongly doubt point 2 matters: any serious image format should compress a monochrome area to a few bytes. –  Lohoris Sep 5 '11 at 16:04
    
However if CSS3 supports gradients he could just use a transparent image and set the underlying color via CSS. –  Lohoris Sep 5 '11 at 16:04
1  
If you allow users to specify any image as their background, load times aren't really under your influence anyway... –  Jimmy Breck-McKye Sep 5 '11 at 17:16
2  
If your users don't have the technical knowledge to ensure good usability for themselves and their colleagues, it may be wise not to let them customize the app in the first place. If your application is a white label email app for businesses, you should consider managing images on their behalf. Otherwise, your product's reputation could be damaged, especially if a poor image causes layout problems, makes the design look unfinished, or otherwise creates a suboptimial experience. I've worked on a product that offers branding controls myself, and it creates some real problems. Just my advice. –  Jimmy Breck-McKye Sep 5 '11 at 19:46

Avoid background-position: fixed when possible.

A fixed background increases browser rendering exponentially and can be the difference between a smooth scrolling site and one that feels slow.

share|improve this answer

You mention in a comment that "There is a menu for setting where you can set any image as background. So resizing or scraping is not genuine solution."

If users can upload a background, that doesn't stop you from messing with it. I'd advise running it through an automated image manipulation program (like ImageMagick). You can cut out just the pieces you need (the left and right side of the image), lower the quality, and set it to a reasonable size.

share|improve this answer
    
Yeah, but i need full image, not the left, right. some time loading take time, and some time there is only background-image on 404 page –  pir abdul wakeel Sep 6 '11 at 5:56
    
@pir abdul wakeel, in that case, I'd still recommend running the image through ImageMagick to reduce the size and quality (you can probably get away with 80% or lower quality). The background image in your example is way bigger than it needs to be. –  Brendan Long Sep 6 '11 at 15:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.