An Overview of CSS Sprites – What, Where, Why, and How

CSS Helper
Using CSS Sprites has become much more popular over the past years. However, the use of CSS sprites has gotten even more attention since Google is using page loading speed as a ranking criteria in its algorithm. Here is a closer look at what CSS sprites are, why using them will be a benefit to your page loading speed and bandwidth consumption, as well as a quick overview of how to create them.

CSS Sprites have proven to be a great way to speed up the loading time of a web page. However, many people, especially webmasters with little CSS knowledge, still don't know what they are or how to use them. If you don't really understand CSS, you should take some time to learn the basics of CSS. However, even with a small foundation, learning how to use CSS Sprites doesn't have to be problem. Here is an introduction to CSS Sprites to give you a better understanding of exactly what they are, what they do, and the benefits that they can provide.

Keep in mind that this is nowhere near a full-fledged CSS sprite tutorial. Rather it is an introduction to what CSS Sprites are, why they are used, and how to use them.

What Are CSS Sprites?

In the most fundamental terms, CSS sprites is a way to use one large image to display multiple smaller images. It is commonly used for navigation bars as well as displaying social media icons. Currently, most people will add an image to their web page with either HTML <img> element or with CSS as <div> background. A CSS sprite is defined as the background of multiple HTML elements in which a unique background position is set for each element.

Where Did CSS Sprites Come From?

The term "sprite" was actually first introduced through the video game industry. The original premise is that if a computer could hold an entire image in it's memory but only display a part of that image at any given time, then it would run faster than having to continually get new images. CSS sprites operate under the same basic concept. The web page grabs a large, single image and only displays part of it when it is called upon.

Why Use CSS Sprites?

The idea behind CSS sprites originally was to simply speed up your web pages load time. It does this by minimizing the amount of HTTP server requests that are made while your page is loading. For example, if you have 10 images that can combined into 1 CSS sprite, then you will only have 1 HTTP request instead of 10. Before CSS sprites were commonly used, the exact opposite was being done. People were taking a few large images and breaking them down into dozens of tiny images. The reason for this was because visually, the page “appeared” to load faster. However, now that search engines, particularly Google, has added page loading speed to its algorithm, everyone is trying to make their total load time as small as possible. As an added bonus, it will also shrink your bandwidth usage.

How to Create CSS Sprites?

The process of creating a CSS sprite used to be much more labor intensive than it is now. Previously, you would have to spend time creating and combine images, adding an icon graphic as the CSS background image, then position the background, and finally do the tweaking necessary to make everything look perfect.

Fortunately, there are now a number of tools that you can use to create a CSS sprite. Here are a few websites that will help you get your CSS sprites created quickly and with little effort.

SpriteMe.org

SpriteMe.org is definitely one of the most popular and most used tools for CSS sprite creation. It is actually a bookmarklet that will allow you to create a CSS sprite from any webpage that you are on. This tool does several things for you. First, it will find background images on your site. Next it will group all of these images into CSS sprites. Once this is done, you can click the “generate sprite” button to actually create the sprite. It can even help you recompute your background positions and inject the sprite to your current page. If there is a single tool that you should use, the SpriteMe bookmarklet is definitely the one.

The Rest

There are a number of other tools to choose from that are useful if you do not have the images already on your webpage. These tools will actually let you upload images to them and then create a CSS sprite for you. There are a variety of these available including: CSSSprites.com, Spritegen.Website-Performance.org, and CSS-Sprit.es.

Subscribe to WebmasterFormat RSS Feed Follow WebmasterFormat on Twitter
Anonymous (not verified):

Ton hundred informations like

Ton hundred informations like this, but there is no informations the step by step how to sprite the css. Can you show me how to do it?... because not simple as you write to sprite all css

WF Admin:

The easiest way is by using

The easiest way is by using some of the tools from above. SpriteMe.org is my favorite.

If you would like to do it by hand, collect all the images that you want included in one sprite, open Photoshop or any other image editing software and include all the images in one big image. You can place them one next to or below other. Then when writing css, use width and height properties to determine size of any particular area, and use background-position property to determine which part of larger image will be shown in that particular area. Often you'll have to use negative values to position selected part properly. More about background-position: http://www.w3schools.com/css/pr_background-position.asp