Decreasing Load Times With Smaller Previews

The pop-up Timeline image viewer loads a lot of images. In addition to the image which is being viewed, the ‘filmstrip’ section at the top of the window previews the five days prior to the displayed image, and the five days after it. If multiple images have been uploaded for these days, the filmstrip displays all these images in rotation. All these images make the viewer visually appealing, but they’ve tended to increase loading times.

Part of the problem was that Timeline stored uploaded images in three forms – the original image, the large version which is displayed in the viewer (640×480 resolution) and the thumbnail that is displayed in the timeline itself and in the management interface (320×240 resolution). The small images displayed in the ‘filmstrip’ were thus generated by loading the 320×240 thumbnail and resizing it in the browser – wasting a lot of bandwidth.

As of today, Timeline now saves each uploaded image in an extra form – a ‘miniature’ 160×120 version. These mini images are now loaded into the filmstrip instead of the bigger thumbnails, reducing the bandwidth used by the viewer significantly. The result: a typical instance of the viewer which I tested now downloads 233k on the inital load, compared to 464k previously. This means that it loads in half of the time, with no detrimental effects.

Before:

before

After:

after

Comments are closed.