Sprites have, since as early as 2003, become a mainstay in web development as a means to have better control and less user-end overhead when graphics are being presented on a web page. I have recently started to use them more often for various things, such as collections of small and related icons and for situations where pre-loading graphics, such as hover effects, is required to maintain visual style. Yet, they have disadvantages in that they require quite a bit of overhead, both when creating the sheet graphic and the CSS that determines the coordinates the browser needs to use to display the correct content. This small article investigates the reasons for using sprites, how they work and whether they are, in the end, really worth it.
What Are Sprites?
They were 2D images, or sections of an image plate, that are super-imposed into the game space, adding visuals with very little computing overhead
Sprites are a form of adding graphic content that can be sourced from the old days of video game consoles, where computing power, particularly that which handles graphic content, was heavily limited. They were 2D images, or sections of an image plate, that are super-imposed into the game space, adding visuals with very little computing overhead, hence the name ‘sprite’. Often the parent graphic was a single “sheet” of images, arranged in a grid against a transparent background. The game engine would pick out the relevant image by sending the XY coordinates and dimensions of the segment that is required. This way, it saves in memory and processing power. In web development, the principle is more or less the same. Two or more images are added to a single file, their visibility is controlled by determining the dimensions and the coordinates of the required graphic.
How Are They Used on the Web?
In CSS this would best be performed by using the ‘background-position’ property which can be used either by itself or in the ‘background’ shortform.
background-position: x y;
background: #FFF url(./image-location/) no-repeat x y;
Why Should you use them?
As for their effectiveness, it can be said they reduce overall file-size as combining them into a single file saves on overhead, but the advantages of using a single file go further than simply affecting disk usage. I find this to be most obvious in graphics that have separate states, such as being hovered over, or to show visited or current pages. The reason being, is that until an images is active, the browser avoids loading it which reduces initial load times for the page; however, this causes a noticeable glitch as the hover-state image loads. Using a single file as a sprite avoids this by loading all the required states at once. The disadvantages of using this method is, for the most part, the time required to format the sprite. While this depends on the complexity of the graphic, it will nevertheless be a chore to merge the separate images into a single graphic.
For me, best practice for using sprites is for groups of similar graphics, particularly if they have multiple states or variants. For me this usually ends up being either menu buttons or social networking icons, the latter being the same or quite similar across multiple site designs. They are also simple, square graphics that can be quickly and easily set up, as much the graphic content itself as well as the CSS code needed to interpret it. Personally though, I avoid using large sprite plates with many graphics as while it may save overall bandwidth, the overhead will be too great to be truly practical.
Over all, it seems the advantages out-weigh the disadvantages when it comes to the choice of implementing sprites. However, there are certain situations where having sprites proves to be a better choice than others. Nevertheless, they are certainly a handy way of dealing with image effects on a website, and to help keep the overall file size down to as low as possible for the size-pedantic developer.