CSS Sprites Generator

We're not talking about fairies or sodas here; for years, when video games were entirely 8 bit and played on slower devices like NESes and Game Boys, all the images of the game were a part of one greater image. Sort of like this: 

From Super Mario Bros. for Nintendo DS, taken from here.

Anyway, to have all of these as separate images would have taken a great toll on the memory. Instead, programmers found a way to reduce wait times and make the games run more smoothly by taking all these images and putting them into one giant one. Then, they'd only have to display a specific portion of the larger image. 

Today, in a world of constant optimization, efficiency, and need for speed, you can make the most consistent images on your site (backgrounds, icons, other images that display on most pages, et cetera) into a single sprite to reduce the number of HTTP requests for the client and reduce your site's load time. 

To use sprites, you'll define what portion of the image you want to be shown by using the "background-position" property in CSS. Normally, you'd have to use Photoshop or a similar program to find the coordinates for each image, but this is tedious and usually not the most effective or efficient solution. To save yourself some trouble, use a CSS sprite generator. This one, from CSSsprites.com, allows you to upload your images (individually only, unfortunately), then gives you the sprite and the CSS code for each. [CSS Sprites Generator]