An Overview of CSS Sprites – What, Where, Why, and How
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 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.
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.
- Have You Optimized Your Website for Speed Yet? You Should.
- Useful CSS3 Generators: Follow the Easy Path to Web Design
- Get Ready for HTML5 – the Wave of the Future
- 11 Innovative HTML5 Websites
- 5 Very Cool CSS3 Tricks
- Fixed and Fluid Website Design: Benefits and Drawbacks
- Is Your Website Viewable with Any Browser?