Puting many small graphics into one big image

[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.

Before:

<a href=example.com/example.htm><img src=right_arrow.png onmouseover=omo(this) alt="this is an examlpe"></a>

After

<div style=left:100;top;100;width:20;height:20;overflow:hidden>
<div style=left:0;top:-300><a href=example.com/example.htm><img src=combined.png alt="this is an examlpe"></div>
</div>

So the search engine spider would find about 30 times "combined.png"

The advantage is to reduce load time by reducing the over head to load 30 small graphics.

But what could be the disadvantage?

I asked similar in the html group here, but they answer this question only on a browser point of view.

[tedster]

This technique is called "CSS sprites" - and it is one of the factors that Yahoo's YSlow tool [webmasterworld.com] recommmends. Google uses it on their own sites and the Google Code group has proposed a utility (not yet available) to make maintenance of the combined image easier. So I doubt that there's any negative effect for organic text search, but clearly there would be for image search.

To the degree that keywords in an image file name could be a relevance signal for the main url that displays them, you would not be getting that bit of additional pop. No big deal, IMO. That's more of a reinforcing signal than a primary one.

[jetteroheller]

Thanks, seems I have an other week to optimize my sites.

Most of my visitors are new and come direct from Google.

So they have nothing from my site in the cache,
and I think first user experience is important

My roadmap to optimization:

1.) Move javascript call from the head to the bottom
2.) Optimize CSS
3.) The less than 2 kb CSS into the head of the html file (advantage at first call)
4.) Deliver javascript compressed
5.) Just working today, deliver html compressed
6.) the combining pictures method