CSS sprites: basic techniques and useful tools
- Tutorial
Using CSS sprites on the site allows you to increase productivity and correctly organize the interface elements.
Sprite Sheet is one large image of small graphic elements of a site, such as icons or buttons. And thanks to CSS, you can display each element separately.
The main advantage of using sprites is a single loading by the server of all elements in one file at once. some might think that uploading small, low-weighted images can increase site performance, but this is not the case - the number of HTTP requests increases with individual images. Also, using a single sprite allows you to reduce the weight of the graphics. Example sprite on webdesign tuts :
Example code for using sprites on a page ( demo ):
Also, sprites are often used to create a simple and cross-browser hover effect ( demo ):
There are two approaches to preparing sprites: before and after site development. In the first case, all small interface pictures are compiled into a single file at the final stage of site creation. In this case, it is convenient to edit individual images, and also use them separately, if necessary. This method is more suitable for beginner web designers.
More experienced developers prepare sprites at the initial stage, this allows you to better organize the graphics of the future design, as well as prepare the PSD template for layout.
When preparing a file with sprites, it is worthwhile to compact the images as much as possible, and if they are the same size (for example, icons), create a grid
that makes it easier to use sprites on the site: Prepare the file in such a way that future changes in it do not affect the location of existing elements, otherwise you have to edit all the CSS. A PSD file with sprites must be well-marked: you must clearly name all layers and groups, and try not to merge layers, which may be changed in the future.
Compass is a great framework that can create sprites from a folder with images. Also uses Sass.
Lemonade is a tool that allows you to create files with sprites by simply adding a line of code to Sass files.
SpriteMe is a bookmarklet that can generate and view sprites used on the site.
Here's what the bookmarklet’s working layer looks like:
Fireworks CS6 - the latest version includes a sprite generation feature.
Spritepad - drag-and-drop service for creating sprites
Sprite Cow - service for conveniently "slicing" manually prepared file with
Glue sprites - command line for generating sprites
CSS Sprites - another generator with advanced settings
SpriteRight - generator application for Mac
Used materials and useful links:
Sprite Sheet is one large image of small graphic elements of a site, such as icons or buttons. And thanks to CSS, you can display each element separately.
Practical application
The main advantage of using sprites is a single loading by the server of all elements in one file at once. some might think that uploading small, low-weighted images can increase site performance, but this is not the case - the number of HTTP requests increases with individual images. Also, using a single sprite allows you to reduce the weight of the graphics. Example sprite on webdesign tuts :
Example code for using sprites on a page ( demo ):
Also, sprites are often used to create a simple and cross-browser hover effect ( demo ):
Before or after?
There are two approaches to preparing sprites: before and after site development. In the first case, all small interface pictures are compiled into a single file at the final stage of site creation. In this case, it is convenient to edit individual images, and also use them separately, if necessary. This method is more suitable for beginner web designers.
More experienced developers prepare sprites at the initial stage, this allows you to better organize the graphics of the future design, as well as prepare the PSD template for layout.
Organization of design elements
When preparing a file with sprites, it is worthwhile to compact the images as much as possible, and if they are the same size (for example, icons), create a grid
that makes it easier to use sprites on the site: Prepare the file in such a way that future changes in it do not affect the location of existing elements, otherwise you have to edit all the CSS. A PSD file with sprites must be well-marked: you must clearly name all layers and groups, and try not to merge layers, which may be changed in the future.
Useful tools
Compass is a great framework that can create sprites from a folder with images. Also uses Sass.
Lemonade is a tool that allows you to create files with sprites by simply adding a line of code to Sass files.
SpriteMe is a bookmarklet that can generate and view sprites used on the site.
Here's what the bookmarklet’s working layer looks like:
Fireworks CS6 - the latest version includes a sprite generation feature.
Useful Services
Spritepad - drag-and-drop service for creating sprites
Sprite Cow - service for conveniently "slicing" manually prepared file with
Glue sprites - command line for generating sprites
CSS Sprites - another generator with advanced settings
SpriteRight - generator application for Mac
Used materials and useful links:
- CSS Sprite Sheets: Best Practices, Tools and Helpful Applications - tutplus.com
- CSS Image Sprites - w3schools.com
- CSS Sprites: What They Are, Why They're Cool, and How To Use Them - css-tricks.com
- Using CSS Sprites to optimize your website for Retina Displays - Maykel Loomans