TWG 1.8 is now using css sprites for most of the icons and buttons.
Sprites is a technique that only one big image is loaded which contains all the other images. The position of the images inside the big image are defined in a css. This saves a lot of requests (e.g. in TWG only one language flag is now loaded instead of 29) and bandwith (1 language image = 5kb; 29 language images = 28 kb).
There are a lot of different tutorials out there and I have read quite a
lot to find the best way which should be used if you have an existing
application and you want to introduce sprites.
I have tried different implementation methods and this are the 3 main ways
you will find in the web:
- with ul/li like explained in http://www.alistapart.com/articles/sprites
- with divs like you can see at http://css-sprit.es/
- and with using a img tag as explained here: http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites
And unfortunately the first ones you find with google if you search for “css sprites” are not the easiest and best way in my opinion! Most of the time they use the ul/li solution.
This works fine if you don’t have a complex layout where each pixel counts and should look
exacly the same. I have started with this in the TWGXplorer but was not able to get the exact same positions as before.
Then I tried using divs. This works quite nice at a lot of places but at the end I also had problems to adjust the divs exacly the way I needed it.
So I finally ended up by using the img tag solution. And for an existing application this is the way to go. You simply replace all images with a transparent 1px image and apply the class for the big image and the class for the sprite. That’s really simple and worked for me in all browsers without any modifications.
I was using the sprite generator you find at http://css-sprit.es/. It has the advantage that the size of each image is specified in the css too and not only the position. The disadvantage is that if you run the generator twice with the same images a different sprite can be created because it does not sort the images. I have contacted the author about this and maybe this is already fixed when you read this post.
I hope I have saved someone a little bit time because for me it took quite a while to compare them.
Have fun using sprites,
Michael