AjaxLine

It is written a lot about CSS sprites but as usual all resources are talking about one idea: saving bunches of little images in single one to make faster site loading speed. In this article I'm trying to collect all my knowledge on this topic and demonstrate some useful tricks.

What are sprites?

I think you already know what they are. Sprites are several little images joined in one graphical file.

Sprite from site "Zhytlobud"

Such a method has several advantages. In the first place a size of one file as usual less then total size of several files. It can be explained by decrease of expenses on storing one image - headings for an image format or custom color box if talking about indexed PNG or GIF. Old-school coders can remeber recommendations of 90th on dividing big file to several little ones to create an illusion that a site is loaded faster :-). Such an approach created just an illusion, because the total amount of several files was bigger then size of one file and it took more time to load an image.

The second important thing is that the number of HTTP requests to a server is reduced. Some guys unfortunately don't pay attention to this - as usual one single request is much more expensive than ten "excess" units of data in one image. We are not going to stop on this because it's a topic of other talk.

So we know that sprites are cool. Is the use of sprites limited only with grouping of different images in one?

Back in past

When I was young and without experience I used to play games. I was mostly interested in the way such games were created. At that time 3D graphics was not commonly used. Allmost all games I played were 2D arcades (Another World, Commander Keen, Moles, Prince of Persia, eh...) that actively used sprites. Generally a word sprite started to be used because of video games and namely video games mostly influenced me as a web developer.

Except of obvious grouping of images we can additionaly mark out several types of sprites.

Splitting into scenes

Elephant from site "Paritet 98"

Splitting into scenes actually is set of scenes for animation saved in one file. For such a sprite create JavaScript controller which manages a sprite speed and shift direction. Comparing to traditional GIF animation this gives us the next advantages::

• 1. It can be used JPEG or semitransparent PNG.
• 2. More wide possibilities on image optimization.
• 3. It´s possible to manage the speed and direction of animation using the same set of scenes (i.e. using one image).

While creating such a sprite you should keep in your mind the following information: for the beginning it it necessary to choose shots big enough to place in without problem any image from the storyboard +10-20% free space from sides to be on the safe side. This will enable you to easily modify an image.

Then adjust precisely the images in the shots not to have jerks at animations. If you do everything the propper way it will take you minimum time and strength to make JS-controller.

Cyclic sprite.

This type of sprites is applied mostly for creating mechanisms such as a preloader: a seriated texture on a block of indefinite width.

Here it is difficult of caurse to refrain from using GIF-animaton. But perfectionists like me might be not satisfied with the softness of movement. Compare: have a look at the example.

In the first variant I've made GIF-animation with 0 ms jerks (namely without jerks at all) between shots.

A disadvantage of such an approach is higher requirements to system resources thus if you have lots of preloaders on the same page it worth to think carefully what is better GIF or JS.

Layers

Sometimes it's not possible to choose a format that fits an image the best way. A good example is a photo with semitransparent decorations.

In this case it would be much more efficient to separate an image into 2 layers: the first is the main image (heart) - save as JPEG and the second is decoration - as semitransparent PNG.

So when we use for each layer an appropriate format we reduce size of the image and improve its quality.

Of course this example is quite simple and primitive. I'm sure that most of developers would do the same. Such type of sprites gives the biggest effect when the main image has nonrectangular shape. A good example the section "Imperia Branch" of this site "Imperia Private Banking": imperia-branch

Vector masks

Unfortunately in some cases it is not easy to separate such images to layers. For example when a main image is nonrectangular shape that contains photography. In this case modern browser technologies SVG, Canvas and VML can be very helpful. With help of them it is possible to apply vector masks on rectangular JPEG image and get a required appearance. For such cases I created library called ictinus, which solves such tasks. You can look example of using sprite masks (and my library :)) on site "iMobilco":

In the middle of the page there is a good looking image of a product and such an image should be transformed in special way (in this case is compact disc box with bent corner). As far as the background is not homogeneous (and as well as also changes) the only obvious method of solving this task is creating a separate PNG image with size more than 100 Kb for each product. It is not an appropriate solution for me, that’s why I decided to experiment with ictinus (for that time it was on very early alpha). On rectangular JPEG image put a vector mask (depends on type of the product), then for this images create PNG shadow. The result is great. Except of big economy of a user traffic I save client’s time and from now on one can set checkbox "Display on main page" in admin interface for any product instead of preparing new images in Photoshop.

Download JS controller for sprite animation.

About the author

This article was written by Sergey Chikuyonok front-end developer and author of Good Sense in Web Development blog.