Question

I am placing a large, non-repeating background image on my website using the CSS background property. Since the image is so large, it takes a long time for some connections to render the image.

Here is my CSS:

#wrapper {
    background: url('large-image.jpg) no-repeat center center;
}

I have already done the following to optimize the image for the web:

• Reduced it to the lowest possible resolution that does not compromise quality
• Changed the image type from a PNG to a JPEG
• Styled the page so that the content is readable even without the background image

My question: To further optimize the image loading time, would it make a difference if I put the background tag at the bottom of my style sheet? Or would the effect of this be negligible?

I tend to order my CSS by the hierarchy of my HTML, so the #wrapper styles are at the top of my style sheet. Does the order of properties in a style sheet make a noticeable impact on load time when the user has a slower connection?

Answer 1

What could affect perceived loading time is initial #wrapper availability – i.e. if at the time of the initial load it is not part of the page and is added with JS, the background image will not begin loading – but I doubt this would be a common scenario.

Background image loading does not affect domready handlers, however if you want to speed up background availability you could try the following:

#wrapper {
    background: url(large-image.png) no-repeat center center,
                url(small-image.png) no-repeat center center;
}

From mdn:

With CSS3, you can apply multiple backgrounds to elements. These are
layered atop one another with the first background you provide on top
and the last background listed in the back. Only the last background
can include a background color.

What this does is effectively allows you to load a lower-res image as the bottom layer of the background, while the expensive hi-res image is still loading. Remember the good old times of lowsrc? That’s the behaviour we’re simulating. Note that both the low- and the hi-res image downloads begin simultaneously, so use this only if the large image is truly unbearably large.

Also: you’re saying you’ve optimized the image; I still suggest you try Yahoo SmushIt, you’d be surprised how muich redundant data can be stripped from a PNG witout loss of quality (I currently have intermittent problems using their service, but it works after a few attempts, alternatively you could use OptiPNG but imo it would be too much effort to set it up and configure for a single image)

Update:

It has been suggested you wait for domready to fire and add your style using $("#wrapper").css(...);. What that does is add inline styling to an element, which would 1) interfere with selector specificity 2) only apply to this particular instance of #wrapper (bad if, say, it is part of ajax content coming from the server).

You could alternatively add a new css rule at runtime:

$('head').append('<style type="text/css">#wrapper {background: url(large-image.jpg) no-repeat center center;}</style>');

This would be organically added to document stylesheets and apply to all future instances of #wrapper, as well as not interfere with selector specificity. You still end up with a brief flash of unstyled content (before the handler is fired and the style is applied) so I don’t advocate this approach.