Grow your CSS skills. Land your dream job.

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

  • # March 26, 2012 at 4:26 pm

    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?

    # March 26, 2012 at 7:05 pm

    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".