Image Preloading Optimization

by Jason on October 11, 2012

If you find yourself needing to load many images for your web application there are some things you must consider in order to achieve maximum performance.

WTF am I doing?!

Can you avoid so many images all together? Consider using CSS sprites.

Some other obvious considerations:

  • Compress the images
  • Use a CDN such as Amazon Cloudfront for hosting
  • Ensure proper caching is in place. Browser and server-side.


Ok, so you’ve exhausted the obvious, and yet you still have a ton of images to preload. How can we optimize this?

The first thing that you should realize is there is a limit to the number of concurrent downloads a browser can perform per host.
For most modern browsers this number is 6, but occasionally it can be higher or lower (FYI this is not well documented).

You’ll notice that big sites like Google, Flickr, etc tend to utilize 2-5 CDN hostnames to host their assets. This is the number you should strive for if possible.

The downside to additional hostnames is the extra latency involved in performing DNS lookups, so adding extra hosts will not always result in faster downloads. You must test.

Once you get extra hosts in place, think about using this library to help properly optimize the download queues.

JavaScript Image Preloader