Background images - faster load

Associate
Joined
10 Jan 2006
Posts
483
We are trying to work out how some sites (airbnb, entrusters etc) that use large background images on their home page manage to make them load so quickly and with such good quality.

We have resized the images on our site down to 300k but they are still quite slow to load.

One other thing worth mentioning is that the images are on a carousel so maybe all three are loading at once. (Our site is www.1roof.org - on the live version files are 3000k! as we haven't deployed new version until we have found a much better solution.)
 
First, save them as JPG instead of PNG, and with lots of compression. Here's one of your BG images saved as a JPG compressed down to 20%, it comes out around 120KB with very little loss of quality. (Obviously you can tweak this to get a compression ratio you're happy with.)

http://i.imgur.com/tueuJ5K.jpg
(Original here: http://www.1roof.org/assets/home-carousel/1-169d497a7889f6d4302053afc817ee8d.png)

Second, host them somewhere else. Are you on shared hosting of some kind? Get an Amazon S3 bucket or similar and serve the images from that - it'll be much quicker.

And yes, loading all three images at once will delay the page. Why do you need three?
 
Last edited:
Back
Top Bottom