Web Design: CSS Image Sprite

CSS Image Sprite is a method of combining several images into one image file to reduce HTTP requests and optimize web load performance.

There are many ways and handy tools to do this, or else you can also do it traditionally with Photoshop.

But, through all my experience of dealing with CSS Image Sprite, there is no other way that much easier than using Sprite Function for Compass. So, let’s take a look at how it works.

Recommended Reading: Syntactically Awesome Stylesheets: Using Compass In Sass

Starting Compass

Before working with Compass codes, we need to create Compass project watch it. So, every time there is a change in the project including the images and the .scss, Compass will compile it into the proper form.

Let’s open your Terminal or Command Prompt (if you are on Windows), and run the following commands.

Combining Images

As we mentioned above, you can use Photoshop to manually join the images or you can also use some handy tools, such as SpriteBox or SpriteMe. Compass integrates this feature in the Function. Let’s say we have the following icons under images/browsers/<images>.png folders.

Icons by Futurosoft

To join those icons in Compass, we can use @import rule and then direct it to the image folders followed by the image extension through the .scss stylesheet, like so

After saving the file, Compass will combine those images and generate new image files, as follows.

Layout Orientation

Furthermore, we can also set the sprite orientation. As you can see in the screenshot above, the images are arranged vertically by default. In case vertical orientation does not fit the circumstances, we can direct them horizontally or diagonally with the following variable $<map>-layout: horizontal; or $<map>-layout: horizontal; replace the <map> with the folder name where you saved the images.

Horizontal

Diagonal

Adding Image In The Stylesheet

Once we have done combining the image, we add the image in the stylesheet through background image. Traditionally we will do it this way.

In Compass, we have a couple of ways that are much simpler. First, we can generate something like those CSS rules with this syntax @include all-<map>-sprites;. Replace the <map> with the folders where we store the images.

This line above when compiled to regular CSS generates the background image definition as well as each of the position, as shown below.

Or, we can also add background image individually to particular selectors with this syntax @include <map>-sprite(image-naem);; as in previous codes replace the <map> with the folder where we store these images. Here is an example.

Then, Compass is clever enough to identify the background position, without us having to specify it explicitly. In regular CSS, that line above will turn into

Specifying Container Dimension

The last thing we need to do is specifying the container height and width that contain the image. We commonly do it in traditional way by manually inspecting the image width and height (most likely through image info or image properties).

With Compass, we can utilize this function <map>-sprite-height(image-name) or <map>-sprite-width(image-name) to retrieve the image width and height. In this example, we will retrieve one of the image width and height and store the value variables as well assign the background image with @include directive.

When we compile these codes above, it turns into the following in regular CSS.

The post Web Design: CSS Image Sprite appeared first on MODERNWEBZ.COM.