Managing Images with CSS Sprites

Introduction

The best way to make faster web connections is to reduce the number of requests. By combining multiple small images into one larger image, you will reduce the number of requests, and possibly even reduce the amount of data you serve to your users.

One simple approach for combining images is to use image sprites. A sprite is a group of images collected into a single image. The images contained in the sprite can be rendered with CSS and displayed individually where they are needed. This allows several image resources to be downloaded at once.

Using CSS and sprites can reduce the number of server requests, save bandwidth, and speed the loading of image resources for your app.

This Best Practice Deep Dive provides some background on sprites and issues involved with image requests, tells you how AT&T ARO can help identify images that could be replaced with sprites, and provides recommendations for using sprites.

Background

Sprites (also known as image sprites, CSS sprites, sprite sheets, or tile sets) are a concept that originally came out of computer game design that was later adapted for web design. By combining numerous small images or icons into a larger image called a sprite, and managing the presentation of the smaller images in a web page, designers realized they could reduce the number of requests to the server.

After one larger image is created from the smaller images, CSS is used to place specific parts of the composite image at different coordinates on the page. Combining images into as few files as possible by using sprites and managing them with CSS reduces the number of round-trips and delays in downloading other resources, reduces request overhead, and can reduce the total number of bytes downloaded by a web page.

The Issue

Numerous image requests slow down your application or website. The best way to increase the speed of your website is to reduce the number of requests, and implementing Image sprites can be an easy way to do this.

Best Practice Recommendation

The Best Practice Recommendation is to manage images in a manner that reduces HTTP requests.

One method for doing that is to use CSS sprites to group many small images into one large image to streamline the number of downloads and render files more quickly.

AT&T Video Optimizer runs tests for images that could be suitable for creating sprites. The test determines if there are groups of small images that could be sprite candidates. It creates a table of these small files in the test results, and by clicking on a row in the table, you will be taken directly to that image file in the Video Optimizer Diagnostic Tab where you can (among other things) view the image and see its position on the trace timeline.

To implement sprites as efficiently as possible, consider the following:

• Most image formats (especially JPEGs) do not benefit from compression, however SVG does.
• Most other media formats (for example, audio and video) do not benefit from compression.
• Very small files (for example, files less than 1k) generally do not benefit from compression.
• Combine images that are loaded on the same page and that are always loaded together.
• Combine GIF and PNG images first.
• Combine small images to reduce overhead from one request per image to one request for the entire sprite.
• Combine cacheable images.
• You can use a spriting service, which makes creating and implementing sprites easy.
• Minimize the amount of "empty space" in the combined (sprited) image.
• Combine images with similar color palettes in the same sprite.
• Be aware that sprites may display differently on different browsers.
• When referencing the images within a sprite, you must identify the correct starting position in the composite sprite image.
• You must specify the exact coordinates in the style sheet to define where an image within a sprite is located.