This isn't a big difference, but there needs to be a good reason to accept this larger file... While the total image size (sometimes) goes up with sprites, several images are loaded with a single HTTP request.Browsers limit the number of concurrent requests a site can make and HTTP requests require a bit of handshaking.
If you're using Grunt, Gulp, or Node in general, is a wonderful node package that creates sprites from a glob of images.
Sprity has a lot of great features including formatting output as PNG, JPG (or Data URIs of those), and stylesheet generation in CSS, LESS, Sass, and Stylus.
To compile sprites via command line, install css-sprite globally with: For more information on using css-sprite with Grunt or Gulp (or many other enviornments), head over to the project's repository on Git Hub.
Spoiler alert: they aren't fairies that write your stylesheets for you. In short: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.
Sprite may seem like a bit of a misnomer considering that you're create a large image as opposed to working with many small ones, but the history of sprites, dating back to 1975, should help clear things up.
To summarize: the term "sprites" comes from a technique in computer graphics, most often used in video games.
The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images. CSS Sprites is pretty much the exact same theory: get the image once, and shift it around and only display parts of it.
This reduces the overhead of having to fetch multiple images.
It may seem counterintuitive to cram smaller images into a larger image. Let's look at some numbers on an actual example: That adds up to a total of 14.38KB to load the three images.