Have Geek Brain

How would you optimize / simulate "random" loading of large image files?

We use large background images (high resolution photos, up to 700 KB) for our page design. This is part of the experience of the site, when you browse, you see different images.

Currently, each time the page is requested, another (random) image is loaded from a pool of ~ 15 images, which can grow over time.

I'm looking for a sane way to optimize this:

  • To prevent the user from downloading a large image file on every pageview
  • To reduce the load on the server (this is a problem, will the server keep images in memory?)

Ideas I have so far include:

  • A timer that downloads another image at set intervals.
  • Gradually loading other images in the background using ajax
  • Linking images to specific content (pages, tags)

The question is how to make it feel somewhat random by minimizing page load times and hitting the server?

+1


a source to share


3 answers


I usually avoid sites with huge images, I am very impatient. I would revise your design.



+1


a source


As a first step, you have to make sure the images can be cached correctly:



  • use correct urls (no session id, etc.)
  • set appropriate http ETag headers
+1


a source


First, the rumor that only background images are 700kb amazes me. In addition to the ON content screen ... this is a pretty heavy site.

First, I'll try to use the image compression tools. Two tools come to mind Imagemagick and PNGCrush. PNGCrush is great for reducing all extraneous metadata attached to photos without compromising on photo quality.

I only recommend this as image compression will help you download less content, which means faster load times, which ... at the end of the day ... is what users want.

I would cache the images as well, so that when the user revisits the site, the image is already cached from their end. This minimizes the HTTP requests that are generated every time a user visits your site. An example of where this method is used on a commercial site is www.reactive.com. If you take a look at the /js/headerImages.js file, they use image caching. Oddly enough, you'll find the same src code at: http://javascript.internet.com/miscellaneous/random-image.html

Considering that you mentioned that the images are loaded by accident, I am assuming that you are using a Javascript library such as jQuery to create the effect. If so, you can minimize page load times by using a CDN rather than linking to a local copy of the jQuery library that is stored on your server. I performed performance testing on a site I did for a client and saved 1.6 seconds on average over 20 hits through this technique!

Hope this helps now :)

+1


a source






More articles:


All Articles