Provide an example and short tutorial on CSS sprites. Also, show the sample code that would be used in your CSS sprite.
What exactly is a CSS sprite? Here we present a simple, plain-english tutorial on CSS sprites and we will show you how this site – ProgrammerInterview.com – uses a CSS sprite, and also the code that goes along with it.
Why are CSS Sprites used?
Before we show our example of a CSS sprite and our explanation, we should discuss why CSS sprites are used and what they are good for – you can understand this even if you have no clue what CSS sprites are. Basically, the reason CSS sprites are used is to speed up the load time of a website. How do CSS sprites speed up a website? Well, the reason CSS Sprites do this is because they reduce the number of HTTP requests that need to be made when loading a web page.
How do CSS Sprites speed up a website?
Some smart people at Yahoo found out that reducing the number of HTTP requests that a browser has to make can have a very big and positive impact on website performance.
Now you’re probably wondering what exactly an HTTP request is. Well, almost all web pages have many different images that make it a final product when you visit the page. For example, on this page you can see the search bar up in the top right hand corner – that is a separate image. And, you can see the “subscribe me” button in the left sidebar that’s used to allow people to subscribe to our newsletters, and of course there are other images but you get the idea. The point here is that each one of those images is a separate HTTP request that has to be made by the browser to the server – so the “subscribe me” button would be one HTTP request, and the search bar would be another HTTP request, and so on and so forth.
But, what if we combine those separate images into one bigger image – this way only one HTTP request would need to be made for the bigger image, rather than multiple HTTP requests for the smaller images? This reduces the number of HTTP requests that have to be made, and can speed up the loading of a website. And this is what a CSS sprite is all about.
CSS Sprite example
If you are confused now, an actual example will help clarify what we are talking about. To see what an actual CSS sprite looks like, here is the CSS sprite that we use on this page – note that we deliberately made our sprite smaller here so that it’s easier to view on this page:
You can clearly see how multiple images are combined inside this one image, and that is what is called a CSS sprite.
How do CSS sprites work?
Of course, now you must be wondering how we actually get a specific image that we want from the CSS sprite? For example, if we just want the search bar image without the rest of the CSS sprite, then how do we get that piece from the sprite? Well, it’s actually pretty simple – we just use some CSS, and set the sprite as our background image (not for the entire page of course, but just for a CSS class) and then to retrieve the specific image that we want from the sprite, we use the background-position property. This means that we basically point to the entire sprite using the background property, but we then narrow down exactly what we want by using the background-position property. So, for example, the actual CSS that we use to retrieve the search bar image from the CSS sprite looks like this:
CSS Sprite example code
/* input1 is just a CSS class that we use
to include the search bar */
.input1 {
background-image: url(images/spriteme.png);
background-position: -10px -10px;
}
CSS Sprite generator
What is the easiest way to create a CSS sprite? Well, we actually just used a tool called SpriteMe to create the sprite that we use on this website – very easy to use since it creates the CSS sprite for you and also tells you the background-positions to set in your CSS code.
Why are they called CSS sprites?
The term sprite actually comes from the video game industry, which used the term to refer to a big image/graphic file that was used to hold all of the little images being used in the video game. Having just one big graphic file in memory saved the computer from making multiple requests for smaller images, and made things more efficient by just using that one big graphic and then slicing/dicing it to get the smaller images when they were needed. So, as you now know, the idea behind the CSS sprite is pretty much exactly the same as the one that was used in the video game industry.
To learn more about HTTP requests
Since we were discussing HTTP requests as they relate to CSS sprites, we thought you might be interested in some great interview questions that have to do with HTTP requests and will help you understand them in more depth, you should read our PHP Interview Questions and Answers