If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

I was reading about Image Concatenation in CSS today. The concept allows for all the individual images on a website to be displayed from a single larger image. The extremely useful benefit of this is less image HTTP requests. This technique is only applicable to sites that already have some form of static image delivery but need further performance.

The performance gains are due to the fact that every HTTP request has an overhead, even if you are using a lightweight HTTP server rather than Apache (Apache is not the fastest for this kind of task.) then there is still the cost of serving each incoming connection. These include socket connection costs, file finding (to retrieve the image, from cache or disk.) and the not-insignificant TCP/IP overhead. Although most browsers limit the number of requests they perform simultaneously it still puts an extra load on a web server.

There is one problem with all this, you need to get all your individual images (gif,jpg,png) onto one single larger image. When I read the original article it occurred to me that I already had a solution from a previous project I had written. This surprisingly comes from the realms of games. It is a common concept within games development to take a large number of smaller images and putting them into square shaped memory areas (sometimes on memory boundaries.) To this end I wrote a system to read a range of images and perform a ‘best-fit’ into a x by y area.

Below I have included an example of taking a set of fonts and applying them into a defined space. The space has been reduced from left to right (300×300, 250×250 and lastly 220×220).

The images above show the workings of the system.

And these are the results.

So what I am now thinking is I need a way to make this happen all automatically, to extract all images from a particular page of a site and then munge them all together and to then alter the CSS to take account of it. (to be continued….)