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.



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:

Also popular now: