May 13, 2016
A CSS sprite is a performance optimization technique that combines multiple images into a single image called a sprite sheet or tile set. Sprites reduce network congestion by reducing the number of downloads needed to render a web page.
Images for a website are typically stored in individual files. Some of these images may be related or may be variations of the same image, such as a plain button and a highlighted button. When a user opens the webpage their browser has to request each of these files, resulting in a slower experience.
With CSS sprites, multiple images are combined into a single image called a sprite sheet. Instead of downloading several files, the user downloads a single file and displays the necessary image (or sprite) by offsetting the file. This removes the overhead of having to request multiple files at the cost of having to download one larger file.
How CSS Sprites Work
A web developer merges several images into a single sprite sheet, placing them in a grid-like pattern. When a particular image is required, the CSS references the sprite sheet, offsets it by the index of the desired sprite, then defines the size of the sprite in pixels.
CSS sprites are commonly used in situations where a web page uses multiple images that have the same size, (e.g. for buttons or logos). Each button references the same sprite sheet but accesses an image by offsetting the sheet by a certain number of pixels. The desired image is then “framed” on the webpage.
How to Create A CSS Sprite Sheet
There are many tools that will automate building sprite sheets, but creating a sprite sheet can be done in any image editing program.
- Create a grid of pixels. A grid will not only help with positioning images, but also in referencing images.
- Add the images. Small images might fit in a single cell, while larger images will take up multiple cells. Most sprite sheets group images by size.
- Add the CSS. There are three attributes used to create a sprite in CSS: width, height and background. Width and height define the size of the image, while background defines the sprite sheet and the location of the desired sprite (in pixels).
- Add the element to the page. An img tag with a placeholder image can reference the CSS sprite by ID or by class. When the page is loaded, the placeholder image will be replaced by the sprite.
Example of CSS Sprites
Amazon’s redesign in October 2014 introduced a concise sprite sheet consisting of only a few icons: the site logo, search button, shopping cart icon and navigation arrows. When a shopper visits amazon.com, a copy of the sprite sheet is cached onto their computer and reused throughout the site. Using a sprite sheet instead of separate images saves Amazon from having to process over 30 additional HTTP requests per session.
Other major service providers including Apple, Google, and Facebook make extensive use of CSS sprites. For services that handle millions of users, reducing the number of requests is a key strategy for increasing responsiveness.
Benefits of CSS Sprites
CSS sprites reduce overall page load time while giving enterprises more control over the performance of their website.
- Users experience faster page load times since images appear as soon as the sprite sheet is downloaded.
- Enterprises see greater throughput and lower resource usage as fewer HTTP requests are made, reducing the amount of network congestion.
When it comes to increasing web performance, reducing the number of downloads is a strategy that enterprises depend on. For web services with millions of users, a sprite sheet could mean the difference between one million and one hundred million downloads.
From your video game console to your web browser, sprites are redefining the way we interact with the digital world.