Image Concatenation to limit http requests is it a solution?

After reading an article about image
concatenation on Ajaxian I tried it myself, but soon I came across some obstacles.
Of course one of these obstacles was the limp dinosaur called Internet Explorer 6. Image
concatenation can be useful, but the drawbacks are really something to keep in
mind.

In the comments of the article
people are complaining that it’s ancient technology and sometimes is called
sprites or tiles. I thought it was pretty cool and was hapyy Ajaxian published
the article.

I will shortly explain what image concatenation is, if you
want more information just read the article on Ajaxian (of course I don’t want
to publish articles about ancient technologies myself 😉 )

With image concatenation you put a bunch of images together
to one big image. The idea is that you can load a lot of images with one request. With small icons for example you’re pretty much waiting on the server roundtrip, not on getting the bytes. Let’s say we have three images of numbers that we put
toghether to one image:

With CSS we can display a part of this image. We can only
this image as a background image and we need a spacer image on top of that
image.

The CSS would look like this:

.icon {
    background: url(‘numbers.png’);
    width: 20px;
    height: 20px;
}


.icon_1 {
    background-position: -0px -0px;
}

 
.icon_2 {
    background-position: -20px -0px;
}

 
.icon_3 {
    background-position: -40px -0px;
}

The html:

<img src=”blank.gif” class=”icon icon_1”/>
<img src=”blank.gif” class=”icon icon_2”/>
<img src=”blank.gif” class=”icon icon_3”/>

It’s pretty easy to understand, but a bit ugly with the
spacer image. But if it can save time it’s worth a try I thought. In our
Locatus project we have a toolbar with about 30 images, so I thought it was a
good idea to concatenate those images for the test.

With FireBug you can sort of measure loading performance of
a website. Click on the net tab of FieBug and enable the All button. When we
load 30 images it looks like this:

I obfuscated the server address because I’m testing on an
external machine (because local testing isn’t very realistic). It’s not a fast
server with only a 1mbit upstream connection. What we can see is that there are five
concurrent connections.  To load the page
takes about 600ms (I tried it a few times and it always was around that number)
Let’s try an example with image concatenation:

On my local machine it was faster, but on an external machine
it’s slower! That I didn’t expect. When we analyze the chart we can see the
image starts loading after the CSS is finished (I tried this several times, so
it’s no coincidence)

Let’s also not forget Internet Explorer 6 (I’m still working
with 6 because a lot of customers still use this version). It’s hard to measure
performance, but I tried it with Webscarab, an http analyzer. This gave a very
interesting result:

I know IE6 is very very old, but caching existed in those
days and why on earth do you want to load the same image 30 times!

Okay, I have a solution for this (I just read in a book that
you have to provide a solution when you’re complaining, so here it is).

It’s another dirty trick, pre-load the image. Pre-loading
the image also solves our ‘problem’ with FireFox.

As we can see the page now loads a bit faster. I don’t think
all these dirty tricks are worth a few ms of load time improvement.

The tricks in a list:

• images
  on the background are unusual
• spacer
  images are bad
• large
  css files with image dimensions are prone to error
• pre-loading
  images is bad
• image
  url’s belong in html, not in css

Okay, it’s a bit faster, but sometimes you have to do too
much to get a little performance gain..