advice on the correct way to use a css sprite

[andreea115]

hi everyone.

i am new to using css sprites and just have a few quick questions.

i have a page that consists of over 40 images,

10 in the header part (menu buttons- hover and normal state)h
10 in the middle part
and 25 in the footer part of the page

my question is this. do i create just one large sprite image containing all the images on the web page or do i create three separate sprite images. i.e

1 sprite for the header part
1 sprite for the middle part
1 for the footer

**question two:**
i suspect that the advice will be that i should only make one large sprite image; if so, then my next question is this.

if a web page contains over 30 images, will it not cause a slow down in dowload time to upload such a large image. Will it not be faster to simply cut up my images into 3 separate sprite images

Question three

some of my sprite images will have to go on top of other sprite images on the page. what code can i use that will enable me to place one background image over another from the sprite board.

thank you for your kind attention and i look forward to hearing from you

warm regards

Andreea

[ToxicFire]

That’s alot of image’s, personally first I’d go through those and see what can’t be replaced by a much more reusable piece of css.

As for how to divide your sprites up depends on how big a single sprite file would be, and how many other requests are been made for other files when the site loads. If the file would exceed more than say more than 90-100k i’d divide it up a bit. If there are lots of other requests though it might be wiser to stick with a single file. Also consider what is the likely connection it will be downloaded on, if its always gonna be high speed broadband large filer no worries.

Question 2: Well see above but basically its a question of number of requests vs file size. Oh and don’t forget to lossesly optimise your images get them as a small as you can.

Question 3: is a little bit vauge, but assuming you have one div with a background image, and then the other div with the background image, its just a matter of overlaying them with positioning.

[TreeRoot]

Question 1 & 2:

Depends on the file size. If it’s reasonable, say 70kb or below, I’d do one image. Compress the file as much as possible. If it’s a PNG, use a compression service such as http://tinypng.org/

If it’s 32-bit, push it down to 8-bit. Push the colors down even further. If it can look good at 128 or 64 colors instead of 256, do it.

If you’re using monochromatic images, then the color usage will be so low that you can get away with a big sprite with many images.

Question 3:

As ToxicFire said, use positioning while playing with z-index to get some on top of others.

[Author]

Posts