[Solved] When is a sprite too big?

[dcp3450]

I know reducing your requests to the server will help reduce load time. Placing all of your images into a sprite can really help with this. However, when is a sprite too big?

The sprite for my page is 1.7mb! I thought about splitting the sprite up into smaller sprites. That will increase server requests and would seem to be a pointless task.

My site loads too slow and I’m trying to pinpoint the slow downs.

[noahgelman]

Holy crap… 1.7 megabytes? Jeez, yeah, you have a problem. You don’t necessarily have to have every image in a sprite. It’s okay to have individual images as well. Your page can load and place images as it loads instead of having to grab the ENTIRE 1.7mb file first and THEN placing it.

Plus there’s a good chance that 1 or more of the images need a transparent background, the whole thing needs to be a .png and that increases the file size more than it needs to be. If some can be .jpg’s or can have solid backgrounds, it’s better to split them up.

And if your image(s) are still too hefty, make several sprites and just load which ever ones you need on each page. Although that would be a little more work and not quite as dynamic.

Also, as a final note. I believe if you add or change anything on your sprite, the browser will have to re-cache it, causing even more load time for your returning users.

[dcp3450]

yeah, everything on the sprite needs a transparency. I started splitting the sprite into categories. I may continue to do so. It would cause more HTTP requests but the image sizes would be smaller.

[TheDoc]

Yea – I would split that up. 1.7mb is way too big to require users to download. Why do you require that much transparency?

[noahgelman]

"If the government doesn’t need transparency, then neither do I!"

[dcp3450]

the site uses a "photo-realistic" concept so the images are pretty intense and need to show the background behind it.

I split my 1.7 mb file into a few files. The total number of kb pulled is roughly the same but it loads faster. I sent the page to a friend to check out who’s been complaining about the load time. They said it loaded MUCH faster.

I also checked a page using a speed checker and saw I shaved about 4-5 seconds off my load time.

[noahgelman]

That’s good. You can even move the images into Fireworks to optimize them. It does it better than Photoshop. Should shave off some kilobytes.

[Author]

Posts