For those that have been using our Issue Tracker component, they are aware that we have invested a certain amount of time improving the look of the front end screens of the component.   With the emphasis now turning to the changes required for Joomla3.x we recently looked at using CSS sprites.

If you are not familiar with Sprites, they can be thought of as one ‘large’ image containing lots of smaller images.  The theory being that loading one image is a lot quicker than loading a lot of small images and save bandwidth.  The individual images enclosed within the large ‘image’ are accessed by specifying its position within the larger file.

There is a simple article which explains this is slightly more detail, so it is not worth repeating it here. In actual fact there are a lot of articles scattered over the web that go into the use of Sprites, of mixed usage.

One might think that it is a lot of work creating the ‘combined image’ and its references, but there are a number of sites on the web that perform most of the work for you.  We have tried a number of them with varying success.  One of the better ones (in our opinion) is Zero Sprites which creates quite a nice compact combined image and generates the required CSS lines for one to customise and use in ones application.

We have got this all working ourselves, but observe that on a number of web sites we visit that even if we use sprites ourselves the impact on the site as a whole is often minimal since there are so many other ‘components/modules’ etc.  in use that our images are often only a fraction of those in use.  Having said that there is a saying that ‘every little bit helps’ so with that in mind the work involved must be worth it.