There are many techniques in CSS to achieve certain results in different ways, CSS sprites being one of them. CSS sprites is a technique used where you can have a large single image containing a set of images that can be broken down using CSS to separate the image into multiple.
To better understand this concept, let us look at the following example image:
As you see in the example image, there are three top bars of different colors all separated by some whitespace between them. Instead of having each of these bars as individual images, you can join them into one as shown above, and with CSS, you can separate them so they seem as separate images.
Moreover, let us say you just wanted the left and right corners of the blue bar instead of the entire thing for an aspect of your website, using the CSS sprites method, you can do exactly that without the need of creating separate images.
Who Uses CSS Sprites?
Many people have the understanding that most major companies do not like to use certain techniques and would rather use generic methods. However, this is not necessarily true, and in fact, major companies such as Ask.com and Facebook use the sprite technique as it is the smarter to move.
Now that you understand the concept of CSS sprites and how they work, we dive right into four advantages of using CSS sprites along with a few tips on usage.
Cut Back On HTTP Requests
One of the main advantages of using CSS sprites is that it cuts back on HTTP Requests. When a user visits your website, the browser requests the data from the server, by having fewer images you cut back on those requests, which in essence, cuts back on load time as well. Remember, the fewer HTTP Requests, the better, and using this technique is one-step forward.
Saves Time
By merging relative images all into one larger image, you are saving yourself time from creating individual images. Additionally, it also makes it easier for you to locate the images you may want to edit as it may be grouped with others, instead of the need to flip through a basket of files to find what you may have been looking for.
Flexibility
By utilizing CSS sprites, you are giving yourself more flexibility over your website’s design and or layout. For example, if you are not using CSS sprites and you have some gradient bars that you use across your website, grabbing a corner of that bar would mean creating a separate image for the corner and to deal with its hassles.
Instead, by using CSS sprites, you can easily slice the corner you want from the image without modifying the image or creating a new image, giving the flexibility you need while saving time.
Tips
Now that you know the benefits of using CSS sprites, we discuss three tips on improving your CSS “spriting” experience.
Plenty of Space
While it may sound jolly to cram in many images into one to benefit from CSS sprites, it is generally not a good idea to leave small gaps between each image. The reason for this is that sometimes content expands quite a bit which sometimes causes other images to appear within the image you selected from the main image or sprite image, this is caused by having your images close to each other initially in the sprite image. Instead, leave some good spacing between each image to eliminate this issue, even if the images may be icons.
Left to Right, Right to Left
No, we are not talking about languages, but rather image placement in your sprite. If images in your sprite are to be used to the right of an element, place the image to the left of the sprite and vice versa. This helps prevent other images appearing in the background of the image you selected from your sprite, which is usually caused by moving the background image by CSS.
To better understand this concept, let us have a look at the sprite below:
Let us say we wanted to use the green book from the sprite, because we intentionally placed it on the right, we will be using it to the left of an element like so:
Using this concept, if we wanted to use the warning symbol on the left, we would have placed it on the right as well instead of on the left within the sprite.
Repeating Images Should Consume Less Pixels
Many people stick some images intended for repeating across the screen in a sprite. When doing so, there is no reason this repeating image should take much space unless designed in a certain way. With that said, your repeating images should be only a few pixels wide as they will be, well, repeating. This not only saves space within the sprite itself, it also saves bandwidth and indeed, time.
To conclude, using CSS sprites may or may not be the way to go for you as it really depends on the type of application it will be used for. If you are considering using the technique for one of your mainstream websites or services and or for your portfolio site, it will definitely be a great advantage for you to use it accordingly.
One of the key things you need to look at before choosing this technique is what browsers the majority of your users use to visit your website. The reason this question sometimes arises is that it sometimes may be very difficult to make your CSS sprites compatible with many of these browsers depending on the techniques you use.
However, if major companies as mentioned earlier use the CSS sprite technique, it sometimes is a good idea to review how they implemented the idea as they may have found a workaround to have it work across many browsers and platforms. I am not saying you should take their code and implement it on your site, but rather get ideas for your implementation by overlooking what they have done or achieved.