Background images - faster load

[dominatrix1]

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.)

 

[azibux1]

Are the images stored on the server, or being pulled from online storage?

 

[AJK]

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?

 

[Siliconslave]

CDN - a content delivery network such as akami, or in AirBnB's case muscache which is hosted on amazon s3 (have a look at the element in chrome). Essentially they distribute the images so they are physically closer to the requestor and thus serve them quicker

Dimensions 1600 × 700
File size 176 K
BMIME typeimage/jpeg
URL https://a0.muscache.com/airbnb/stat...o/436914-611fe483545f7a1907ed1b7fcdc369d2.jpg