Combining graphics together in one

What do You think about it?

[jetteroheller]

I just optimize my web site.

The new version has many images, so a lot of objects
to load.

I read an article about combining many small images to reduze request overheds.

Just tested the following

<div style=left:100;top;100;width:100;height:100;overflow:hidden>
<div style=left:-100;top:-300><img src=combined.png></div>
</div>

And there is really a rectangle showing the wanted part of the picture.

Not jet tested, but the trick should even work with mouse over.

Something like a mouse over version of combined.png

theoreticall, I could combine my
8 arrows with mouse over
5 icons with no mouse over
6 icons with mouse over 2 pictures.

2 http requests instead of 33

What do You think about the trick?

What disadvantages could be compared to normal small images?

[swa66]

What you describe is known as CSS sprites. They are used by some of the major players (Yahoo, Ask.com, ...) I know of no drawbacks.

[KevinBoss]

I love sprites and I've been using them for years. I've never run into any issues with using them.

This tool might make your life a little easier:
[spritegen.website-performance.org...]