Faster Page Loads With Image Concatenation

Matthew Batchelder has been looking at the impact of latency on web applications with respect to downloading lots of images as icons, based on thoughts he heard from Zimbra when they presented at The Ajax Experience. His piece on Faster Page Loads With Image Concatenation: When designing web applications, icons and images are used to […]

Matthew Batchelder has been looking at the impact of latency on web applications with respect to downloading lots of images as icons, based on thoughts he heard from Zimbra when they presented at The Ajax Experience.

His piece on Faster Page Loads With Image Concatenation: When designing web applications, icons and images are used to enhance the user experience, give visual cues, and simply look sexy. For complex web apps, the quantity and resulting latency of icons and images used can greatly impact page load times...and developers, in most cases, generally try to reduce page load time with a sweet web app rather than increase it.

To reduce latency in my apps, I use Image Concatenation! Coupled with a bit of CSS magic, performance improves and life is great.

Image Concatenation...WTF?

The basic idea is this: Change X number of image downloads to 1 image download by making 1 big image that contains the X images.

As an example, lets say we have these icons:

help settings maximize shade grow close

While those are pretty tiny in size, on page load the user must still deal with downloading 6 individual images. Instead, we can simply concatenate those images using whatever image software that suits your fancy. Like so:

icons

View: Full post

css, design, development, programming, web programming, icons, image size, images, latency, optimization