CSS Sprites?

[Ogran]

Hi, I'm trying to reduce the loading times of the website I'm working on; and I've read that using sprites instead of indivual image requests would help.

I've used an online sprite generator to get the sprite 'map?' and the underlying code. I'm just not sure where to put it.
I've been given this to insert into the background somewhere, perhaps the header.php etc:

#container li {
background: url(spritemap.png) no-repeat top left;
}

I also have the classes needed for the defining, such as:
.box-bot-bg{ background-position: 0 0; width: 200px; height: 188px; }

Would I just need to put this into my current CSS, or would it involve a bit more work?

Thanks.

[gjh42]

This CSS would definitely not work as is, unless you currently have custom elements with id #container and class .box-bot-bg.
We need a lot more information on where you are using this and a link to see your site before we can advise on using your generated style rules (which would go in your stylesheet.css if they are applicable). Depending on where you want to use sprites, it may not be feasible to insert them into dynamically-generated elements.

[kuroi]

It's certainly possible to use sprites for Zen Cart sites. We use them quite often and it can have a significant impact on loading times and the smoothness of rollovers.

But it's quite an advanced technique - certainly not something that you just drop into a site. It requires quite a lot of planning and precision positioning of images within the sprite, so that they can be referenced to pixel accuracy in the css.

[toyseller]

Although this topic about CSS Sprites was created several years ago.

I too would like to know about sprites.

According to http://gtmetrix.com/reports/www.tidytoys.co.uk/evNapt3l this is the number 1 thing that could be used to speed up my website.

This report said which images needed to go into a sprite ... so I paid for someone to create me a sprite and to create the css file that points to the images in the sprite.

I couldnt find any information that would show how and where to change the zen cart coding to pick up and use the ccs and sprite for a zen cart.

Even if I could be shown how to pick my credit card logos up from the sprite that would be great.

[gjh42]

You would have to locate every bit of code that uses one of those images, and change it to refer to the sprite image instead of the individual image. Then you would have to alter the CSS to use selectors that address the particular element that contains the image. If your paid worker correctly built the CSS to refer to all the correct elements, you should be okay there.

Be aware that there are numerous elements that do not have uniquely identifiable class/id tags or any way to single them out from all other like items. In those cases, you will need to add tags to achieve enough individuality to address unique elements.

[gilby]

You would have to locate every bit of code that uses one of those images, and change it to refer to the sprite image instead of the individual image. Then you would have to alter the CSS to use selectors that address the particular element that contains the image. If your paid worker correctly built the CSS to refer to all the correct elements, you should be okay there.

Be aware that there are numerous elements that do not have uniquely identifiable class/id tags or any way to single them out from all other like items. In those cases, you will need to add tags to achieve enough individuality to address unique elements.

iow Far toooo much work
For so little (if any) gain...