CSS Sprite file is too big to handle

151 Views Asked by At

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.

Can anyone suggest how should I handle one big sprite? should I break it into multiple files or is there any other suggestion to improve the page load time.

1

There are 1 best solutions below

1
Jonathon Philip Chambers On

The best size is 4096 x 4096 What is the maximum sprite sheet size I can use for android devices?

So long as you are using fewer pixels than that, you should be fine. The only logical reason to break up your sprite images smaller than that is if you want to give the user an image to look at while they wait for the others to load. (Or if there are some images you know some users will never see on their visit.) But it will increase the loading time overall.

As for file size, add compression to your personal taste. If your hatred of the loading time and your hatred of the compression artefacts are equal, you have found the right balance.