How does memory usage in browsers work for images - can I do one large sprite?

225 Views Asked by At

I currently display 115 (!) different sponsor icons at the bottom of many web pages on my website. They're lazy-loaded, but even so, that's quite a lot.

At present, these icons are loaded separately, and are sized 75x50 (or x2 or x3, depending on the screen of the device).

I'm toying with the idea of making them all into one sprite, rather than 115 separate files. That would mean, instead of lots of tiny little files, I'd have one large PNG or WEBP file instead. The way I'm considering doing it would mean the smallest file would be 8,625 pixels across; and the x3 version would be 25,875 pixels across, which seems like a really very large image (albeit only 225 px high).

  • Will an image of this pixel size cause a browser to choke?

  • Is a sprite the right way to achieve a faster-loading page here, or is there something else I should be considering?

1

There are 1 best solutions below

1
Web Tech Tips On

115 icons with 75 pixel wide sure will calculate to very wide 8625 pixels image, which is only 50px heigh...

but you don't have to use a low height (50 pixel) very wide (8625 pixel) image.

you can make a suitable rectangular smart size image with grid of icons... say, 12 rows of 10 icons per line...

115 x 10 = 1150 + 50 pixel (5 pixel space between 10 icons) total 1200 pixel wide approx. 50 x 12 = 600 + 120 pixel (5 pixel space between 12 icons) total 720 pixel tall approx.