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?

  • 1
    Yes, the problem is in new design. apply new design.
    – Pir Abdul
    Sep 5, 2011 at 10:15
  • 3
    @pir abdul wakeel: You can improve an image file size with RIOT
    – Benoit
    Sep 5, 2011 at 12:19
  • 3
    You should also take a look at designfestival.com/… for non-repeating cum repeating background image.
    – rubish
    Sep 5, 2011 at 14:59
  • 4
    Best practice is to not have users have to load gigantic background images. Hire a designer that understands the medium better.
    – DA01
    Sep 5, 2011 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, 2011 at 18:41

4 Answers 4


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.


before after


before after


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);
  • 8
    Excellent and extremely practical advice. Sep 5, 2011 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
    Sep 5, 2011 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, 2011 at 19:24
  • Look and feel , User experiences and Performances,
    – Pir Abdul
    Sep 6, 2011 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... Sep 6, 2011 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 (https://i.sstatic.net/81dnA.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.

  • 5
    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, 2011 at 12:53
  • I strongly doubt point 2 matters: any serious image format should compress a monochrome area to a few bytes.
    – o0'.
    Sep 5, 2011 at 16:04
  • However if CSS3 supports gradients he could just use a transparent image and set the underlying color via CSS.
    – o0'.
    Sep 5, 2011 at 16:04
  • 1
    If you allow users to specify any image as their background, load times aren't really under your influence anyway... Sep 5, 2011 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. Sep 5, 2011 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.


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.

  • 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
    Sep 6, 2011 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. Sep 6, 2011 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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