TinyWebGallery Blog

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:

1. with ul/li like explained in http://www.alistapart.com/articles/sprites
2. with divs like you can see at http://css-sprit.es/
3. 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

The RC1 of TWG 1.8 is now available in the forum:

http://www.tinywebgallery.com/forum/viewtopic.php?t=2321

This version of TWG will use sprites to improve loading times (I have already removed 315 images without loosing any functionality!), has an impoved administration (e.g. I added the config parameters for sorting) and I added the new language strings for the new features of TWG 1.8.x
Please check your language file if it is fully translated AND the file language/language_default.php.

Translate it to your language and sent it back to me. The backend has some new translations as well – please check the folder admin/_languages if you can help to finish the translations there.

Have fun using TWG,

Michael