Combine images using CSS sprites

Method Type: User (.CSS)
(this means that the method is handled by the webmaster)

Status: Must be applied by the user.

Introduction:

Image spriting has been created and implemented as a standard by video game designers. It allows a lot of textures to be grouped on the same image file so that when the game engine requests the textures only one file has to be loaded. Then the engine chooses which of the textures from the file to show. This use of image spriting pre-dates the creation of CSS by 20 years.

How CSS sprites work:

Combining images with CSS sprites works on the same principle as spriting in game development. When the web browser requests from the server the images on the page it wants to load, there will be created additional HTTP requests for each separate image file. When images are combined with CSS spriting, they are grouped in the same file and when the browser requests the images only one HTTP request is sent to the web server. Then according to the request only the image that is needed is shown instead of the entire group. Although combining images can make the end file bigger than the total sum of the original files, the speed increase from the reduced amount of HTTP requests is much greater than the delay due to the size of the file.

Combining images using CSS sprites provides the following Advantages:

• Fewer HTTP requests to the web server
• Improved page load times
• Caching a single file

How to Combine images using CSS sprites:

Using CSS Sprites offer good speed boost for your website's icon heavy pages. There is a great open source tool to help you optimize your website and combine your images using CSS sprites:

http://spriteme.org

This bookmarklet is basically a JavaScript that will analize the page on which it is started and will find all spritable images. It will also group the images by attributes like pixel dimensions to get the best possible results in spriting.