Imagesprite and http request

My site design loads in around 120 images for the homepage along, this does not include images in the content. . So I am looking at the possibility to converting it into an imagesprite.

But looking around on the internet, I discovered there are many ways to create an imagesprite, And YSlow speaks of http request which can also be reduced by creating an imagesprite,

But if I create 1 imagesprite for my entire site, and I include the sprite for every div, ( using the background url), it will not reduce my http request, right?

What do you recommend me?

first of all, do not create one sprite for all images. 120 images in one sprite may cause in heavy file size and you probably will not need all images on every page used in this sprite.

Try to categorize your images like icons, logos or something like this. And the biggest achievment of css sprites is the file size in total. It’s loaded in cache and maybe never loaded again.

You http requests may not be much less (but i think its still enough), but the file sizes and thus the time of the http request will diminish substantially.

But no matter how you look at it, css sprites are used properly in most cases better than single images.

doitmax said
Try to categorize your images like icons, logos or something like this. And the biggest achievment of css sprites is the file size in total. It’s loaded in cache and maybe never loaded again.

The biggest benefit of sprites is the reduction in the number of http requests. Putting 20 images in a single sprite reduces the number of http requests from 20 to 1. Since the browser can only load 2 resources at a time, those 20 images would have loaded 2 at a time, while the others waited. The size of a sprite will be roughly the same as the individual files, maybe a little less, or in some cases more.

Thanks for your responds, But what is the best way to make a imagesprite,

Like #prev{background:url(‘img_navsprites.gif’) -47px 0;}, but to me this seems like 1 http request per object, or create a div for every category and use the background position tag?

jadove said
Thanks for your responds, But what is the best way to make a imagesprite, Like #prev{background:url(‘img_navsprites.gif’) -47px 0;}, but to me this seems like 1 http request per object, or create a div for every category and use the background position tag?

You can have dozens of elements with the same background url (the sprite you created), and just change the background position on each one. The browser will only make an http request for the first one. After that, it will realize that it already has the image, and use the one it already has. This is much better than connecting and downloading 2 images at a time, and then connecting again and downloading 2 more, and so on.

If possible, you should serve your sprite from a different hostname (e.g. images.domain.com), or domain (www.mydomainimages.com) and do not serve cookies from this domain (the browser will foolishly download all of the cookies everytime it grabs an image.

If you are really a pro, map this hostname or domain to a CDN provider like Amazon Cloudfront so that users connect to an edge server near them, instead of the same server that serves the rest of your site. This also reduces the load on your server and helps you with traffic spikes.