Multiple BG Images in CSS vs 1 large Image containing all?

[alston]

Hello,
I already use 1 image to load, for example, all navigation button states and then use the background-position property to call the proper state on hover, active, etc.

My question is this, would it be better to save all images on the same canvas as a file and then use that image over and over along with the background-position property to position the image in each place needed? This would cause less images to have to be loaded/downloaded and should reduce the number of http requests and increase page load time, correct?

[joshuanhibbert]

It depends on the size of the images. If you end up with a massive sprite sheet that contains all the images for your site, it might take a very long time to download, and then your pages would appear to load much slower. Using a sprite sheet for buttons is fine, but I wouldn’t recommend adding other images to it. It also makes it a pain to maintain.

[Author]

Posts