Ever since browsers began supporting images, web page authors have fought a constant battle to balance image use against file size. Weapons used in this battle have ranged from compression to sprites to delayed loading. Browsers and internet connections are getting faster and faster all the time which removes some of the pressure in the tiniest-but-nicest balancing act, however perceived page load time is still arguably one of the more important ‘features’ of a web page.

One particular page, or battlefield if you’d prefer, is already well populated with sprites, gifs, tiles, dynamic loading and other articles of image warfare. Load times are reasonable, special effects add just a touch of awesome and animated loading icons politely ask people to stick around just a moment longer. However, without realizing it, I had a secret weapon stored quietly in our database: multiple resolutions of the same images.  Many image-heavy websites use this powerful resource to decrease their page load times. Low resolution images serve as placeholders or thumbnail images while higher resolution images are either loaded later or are available for on-demand viewing.

In my case, our team has a bit of nifty math that resizes a thumbnail based on mouse location. We wanted to resize to a larger size than our low-resolution images, but didn’t want to tax our visitors with downloading 15 to 30 relatively large images. Our solution was to use our low-resolution images for the initial load, since they look just fine at the starting size for our thumbnails. Then, once a user mouses over an image for the first time, we reset the source of the thumbnail to the higher resolution image. In most browsers, the download for one of our single high-resolution images is fast enough that it should nicely interrupt a visitor’s train of thought about that image. I can imagine the mental commentary to go something like: “This image is kind of grainy.. Oh! That’s much better.”

Here’s the basic idea in a bit of javascript-ish pseudocode:

imageListWrapper.onMouseMove = function (mouse) {
  foreach (image in imageListWrapper)
  {
    //do resizing stuff here, then...
    if (mouse.x > image.left && mouse.x < image.right)
    {
      if (image.src.contains("size=small"))
      {
        image.src = largeImageSrc;
      }
    }
  }
}