Does a spritesheet use resources for the entire sheet or only what's being loaded from it?

Question

I feel like this is a stupid question since I'm pretty sure the spritesheet uses memory for the entire sheet, but I just wanted to make 100% sure and can't find the answer any where. For a html project I wanted to be 'smart' and make as little http requests as possible, so I created a 2048x2048 image that only has about 150x150 not being used, which is actually great since it can allow me to add other images in the future if I need.

The problem is, after purchasing and configuring a server, I was afraid if a lot of people connected at once, that the server would be using more memory for the bigger spritesheet? I only use 10% of the images in the sprite sheet at any given time, and when they change, the previous ones get replaced. So was it stupid of me to make one big file, will it only use extra memory for no reason? Would the rule of thumb here be, use big sprite sheets for images that are always being loaded, and then split the remainder into smaller sprite sheets that are used only at certain times?

Answer 1

To answer your question, yes the entire sheet is loaded into memory.

However, only once.

Each CSS displays only a small portion of the sprite.

In theory: As you move from page to page that one large image is already in the cache and not requested from the server again. Making the next page load that much faster.

There is much more on caching v/s the number of requests v/s the combined sizes of images that would go into a more complete answer.