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?
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
Good
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.
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.
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
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);
}
}
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:
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?
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?
You can play with image compression. There are PNG and JPEG recompression algorithms that can shave valuable kbs from each resource.
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.
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.
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.
