CODEWITHSUNDEEP
javascripthtmlcss
drnessie
drnessie

Reputation: 897

Are large CSS sprites a good idea?

I have a large CSS Sprite which takes about 3 seconds to load on my high-speed internet. I want to know if this is a good idea or not.

On top of this, I also want to know if I should display a smaller image of just one bit of the sprite will the actual sprite is loading. Although this means two HTTP requests instead of one, I was wondering if it would make a better UI/user experience, if I made the overlay-ed disappear when the document has loaded.

Upvotes: 5

Views: 345

Answers (2)

Matthias Bayer
Matthias Bayer

Reputation: 1179

If your sprite is that big, I would recommend to split your images into logic groups and save them into several sprites (think of 2-4). If not all split sprites are displayed at once on a page, the page load will increase.

Upvotes: 2

user578895
user578895

Reputation:

How large is large?? 3 seconds seems absurd. If you're loading every-image-under-the-sun then no, it's not a good idea. You may also need to look into image optimization (what format is it currently in? Can you post the sprite?)

Basically it's a trade-off. If you're using 1/2 of the images in the sprite on your page, it's fine because you get more of a gain through the fewer HTTP connections then you do a waste for the unused images. If you're using 1% of the images in the sprite, it's not worth it.

As far as your 2nd question goes -- absolutely do that if the sprite needs to be as large as it currently is. You'll see very little loss due to loading one extra small image. The point of sprites is to reduce HTTP connections from 100->10, for example. 10->11 isn't a big deal.

Upvotes: 5

Related Questions