Web Hosting Reviews & Ratings

August 05, 2010

What are CSS Sprites?

When you heard the word “sprites” you generally picture little images, but a sprite is actually one large image. CSS sprites are a simple technique that allows the coder to combine an unlimited number of images into one. The term “sprites” is a phrase from early video game programming and development.

What’s the idea behind sprites?

Originally, sprites were an idea that the computer could store an image or graphic into memory then retrieve and display only parts of that image at a time. This is significantly quicker than having to continually access new graphics. Essentially, the sprite was a large merged graphic

CSS sprites follows the same procedure; retrieve the image once, change it around, and only display segments of it thus saving time and decreasing the amount of resources need to grab multiple images.

Wouldn’t one large image be slower to load?

Although this may be the thought, it’s much quicker to load pieces of one image than to load many small graphics. Each image is coded to be a separate HTTP-request and as the number of requests increase, so does the amount of time to access them.

Limitations of Sprites

One important function that sprites do not serve is the ability to do repeating graphics. Sprites were developed to only work with single blocks of code. A prime example of a CSS sprite can be found in icons.

Best Methods for Creating CSS Sprites

There are two routes to take when creating CSS sprites; either at the beginning or the end. Initially deciding to utilize sprites from the start of the project will allow you to build them as the project commences. It’s advantageous to keep Photoshop (or some other editing program) open so you can simply drop items in as needed.

The other method of creating sprites all at the end of the project tends to be the best method. That way, you don’t have to think about sprite creation during development allowing you to focus on other aspects of the project.

CSS sprites follow the same procedures as prehistoric video gaming methods. This results in faster page loading as graphics can be accessed in segments as opposed to retrieving them one at a time from numerous locations. This takes much more time and eats up vital resources. Utilizing this reemerging method will produce more satisfied end-users and a higher retention rate.

Tags: Photoshop,  CSS sprite,  CSS,  sprites