Jun
6
Hurry up and wait - Image concatenation
Filed Under htmlgoodies |
This seems to be the mantra of most websites nowadays. Granted there are a hundred reasons the site is slow from 35 programs and services using processing power on your machine, to the lack of bandwidth available from the 1000s of students on campus downloading torrents. Whatever the reason, if you’re responsible for a website, you don’t want one of those reasons to be YOU and how you built it.
What am I talking about? There are many different ways to streamline a site and make it faster. The bottom line is the overall size of a page in kb. This includes ALL source files such as external stylesheets, javascript files, flash, wav, mp3, mov, embedded objects like you-tube videos and the easiest to fix - Images and icons.
There is a current discussion on the Luminis Developer’s Network (SHAMELESS PROMOTION) regarding making the Luminis portal software faster. It is a JAVA and XML based system that has some issues with load times (depending on its load) and developers are looking to ways to speed it up. Out of the box it isn’t too bad, but once you start hacking and moding it (to make it useful) it starts to lag. … Hmmm - that leads me to believe that the mods are the cause of the problem 
Actually, this is kind of the case. The mods are typically one off things produced by various developers, usually without much collaboration. It is up to the admin to meld it in with their portal when they implement, there are reasons for this methodology I won’t go into now.
That all brings me to the point of this post. One of the topics being discussed on the LDN post is that of Image Concatenation. The developer (Matt from Plymouth State) that brought it up is quite knowledgeable on the subject and has a fantastic blog post about it. To explain what this is I’ll snip a piece from his post (and apparently some images as well) to help demonstrate what this is :
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:
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:
What does this get you? It achieves a couple things.
First and foremost - there’s 1 http request that goes to the server instead of 6. During high bandwidth times, this will help overall performance. Figure 1000 people hit the site within a 30 second period - that’s 6000 requests in 30 seconds vs only 1000. In bandwidth terms, what does that mean?
Matt has these stats posted on his blog :
The individual icon sizes are:
574 bytes
571 bytes
583 bytes
569 bytes
572 bytes
574 bytes +
——————-
3443 bytesThe concatenated image (sprite, tiled image, whatever you want to call it
) size is: 1802 bytes
Back to the example above.
6000 requests = 20,658,000 kb = 20.6M in 30 seconds
1000 requests = 1,802,000 kb = 1.8M in 30 seconds
That’s a HUGE difference.
I won’t go deep into how to do this, you can read it in his post but here’s a the Reader’s Digest condensed version : you position the icon using CSS. Think of it as a View-master (remember those from way back?) and you’re moving the concatenated image around so the next image is displayed in the little view finder. Pretty slick.
Matt has a nice scalable example on his site, so read through it and start to tackle your pages.