6

Recently I've been working on a site that incorporates a heavy amount of artwork in the form of large background images. On a lot of high end sites with big budgets large background images seem to load in almost instantly, whereas mine seem to take 1-2 seconds on average.

My questions is, how can I achieve faster loading of background images? I've already compressed my images and used the appropriate file types.

Here's an example of a site with an instantly loading background image: http://lanadelrey.com/

  • 5
    Rent better, high speed servers. You mention you already compressed the images with the right file types, so it's hard to tell what you expect from us. If you think your question is answerable in a not-subjective, code-specific way, please add information that shows that. Images, by itself, are not code related, or can't be optimised by a line of code. At least, not when you are talking about a single image. If you are trying to load multiple backgrounds at the same time, there might be a solution by post-poning load of non-vital images. – Bram Vanroy Nov 25 '16 at 11:14
  • @6rs_Leon as per my understanding you need to deploy it in high end servers. It will provide you better performance and high speed rendering..It will not depend upon web server kind of things actually you can code in any language, it is related to system performance – Santhucool Nov 25 '16 at 11:17
  • I'll always try and persuade my clients to host their sites on better servers, however this isn't always a possibility. In most cases the loading of HTML elements is fine, it's just background images that I have issues with. I'm curious to know if there's any other techniques that would help. –  Nov 25 '16 at 11:17
  • 1
    CDN (as indeed it is at lana del ray's website) – Daniel Nov 25 '16 at 11:17
  • 2
    You could try [preloading the images](http://stackoverflow.com/questions/476679/preloading-images-with-jquery), wouldn't speed things up though – George Nov 25 '16 at 11:17
  • Hide all page contents until everything you need for the initial display has loaded, and then show everything. Then, continue to load any other resources that you may need. It doesn't make it load quicker but it's presented better and makes the delay less noticeable since everything is displayed at once. – Reinstate Monica Cellio Nov 25 '16 at 11:18
  • Make sure you do not have any blocking script before that – Rajesh Nov 25 '16 at 11:18
  • @George I didn't think preloading background images due to the fact they're defined in CSS. Thanks for the link! –  Nov 25 '16 at 11:20
  • @6rs_Leon doesn't matter, preloading the images will mean they're cached and load faster when the CSS image is called as it makes the same kind of request an img tag would – George Nov 25 '16 at 11:21
  • A CDN can work wonders - we host all image assets on AWS (Amazon) – Paul Thomas Nov 25 '16 at 11:21
  • @Daniel Have you got an examples of reliable CDNs? –  Nov 25 '16 at 11:21
  • Also, not sure if you happen to be using WordPress, but we recently have been using an Amazon S3 plugin which automatically uploads the content to a bucket there so all image assets are handled by the server there – Paul Thomas Nov 25 '16 at 11:23
  • @PaulThomasGC That sounds great, I'll have a look into it –  Nov 25 '16 at 11:26
  • https://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/ is an interesting read on perceived speed – pee2pee Nov 25 '16 at 12:31
  • @PaulThomasGC I do the same and then use cloudfront CDN to help speed it up even more – Riley Nov 25 '16 at 13:27
  • prefetch (described [here](https://www.nccgroup.trust/uk/about-us/newsroom-and-events/blogs/2016/may/why-background-images-are-slow-to-display-and-how-to-make-them-appear-faster/) with example) worked great for me. – Anupam Aug 12 '17 at 11:54

3 Answers3

3

There are several optomizations that you could include to make the image load faster:

  1. Place the background-image CSS property in the head of your HTML file, which will start downloading it earlier than if it was in a CSS file.

It's important to understand how a browser loads resources, and interprets the files that it has loaded.

enter image description here

The network feature in Google Chrome's Debug tools can be helpful, but if you really want to understand this then read: https://varvy.com/pagespeed/display.html and https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

  1. Serve your images and larger resources on a different domain, browsers limit the number of concurrent connections (file downloads) to a single domain. Or just use a CDN.

  2. Reduce the file size of your image.

peterp
  • 3,145
  • 1
  • 20
  • 24
0

How big the size of your images is? On your provided example link, the background picture, wich you can get from this link:

http://cdn1.umg3.net/89-cdn/splash2015/lana-splash-background-2.jpg?v=1

is only 147KB. For me, this is not really big and makes sense that load being fast.

You can make many different thing in order to load your images faster:

  1. Make images size smaller, (Lower res, jpg compression, etc)
  2. Rent higer speed servers. They cost more, but if you need more speed, you have to pay for it because a low speed server can make a bottleneck.

I hope this helps!

kelmi92
  • 394
  • 2
  • 8
  • I've got a couple of instances where the background image takes up the entire vertical width and height of a users viewport and also cases where the background takes up about 50-75% of width and height, like on one page websites. Compression is something I already do and it makes a huge difference, but it could still be better. Thanks for the advice –  Nov 25 '16 at 11:24
  • The size in KB please? – kelmi92 Nov 25 '16 at 11:25
  • it's only 71.334KB –  Nov 25 '16 at 11:29
  • Then it seems that your problem is that the host where you are hosting your images is slow. For ensure that this is your problem, you can try to set the background image of your website loading the background image of the example site you provided, it would be like this: background: url('http://cdn1.umg3.net/89-cdn/splash2015/lana-splash-background-2.jpg?v=1') If the background image load fast, you can be sure that the problem is that. – kelmi92 Nov 25 '16 at 11:39
0

Most noticeably the quality of the server will improve the speed at which users can fetch images. However, you can easily optimise some things when you are loading multiple backgrounds in CSS.

First it is important to know that even though an element is not visible (e.g. display: none) its background-image as defined in a CSS file will still be loaded. (Load this fiddle and take a look at the network tab of your devtools, you'll see that the image is loaded.) This is some important information because it means that parallel requests will be made for all images (even the ones not visible) eating away the bandwidth. In other words, the speed of loading is slow partially because the browser is loading images it doesn't need yet.

For a solution you'll need some JavaScript because you need to do a few things:

  • initially only load the background-image that you need (can be done in CSS)
  • load other images in the background
  • dynamically insert the CSS background property to the elements as soon as the loading has finished

Another solution would be to use lazy loading, in which rather than loading the images in the background any way, only start loading the images when you are (relatively) certain the user will need to see the background image (for instance when the position of the image is close to become visible in the viewport).

Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239