Preamble

Almost all web developers are sooner or later faced with the need to create interfaces that contain a bunch of small parts. I think the overwhelming majority of our brother, without hesitation, cuts a bunch of these small details into a bunch of small pictures, which he stops at without thinking. about possible troubles or about quite real usefulness of other approaches.

Bad examples

The first bad example is:

The second bad example:

As a third example, see 99% of forums.

Do better

Actually, the idea is to use a single file, where all the icons are collected, against a set of files. And it's not at all difficult, we just need to arm ourselves with the knowledge of CSS and photoshop to glue the icons into one file.
Suppose that our icons have an aspect ratio of 16x16 pixels.
The html code for placing the icon will look like this:

 <div class = "my_icon">
     <div id = "icon_1" onclick = "some_event ()"> </ div>
 </ div>

or so:

 <div class = "my_icon">
     <a href="/dir/file.ext"> <span id = "icon_1"> </ span> link text </a>
 </ div>

Fantasy will tell the developer which option is more convenient to choose in this or that example.
CSS will be, respectively, something like this:

 .my_icon div {
     width: 16px;  height: 16px;
     background: url ('/ cp / images / icons.png') no-repeat;
     cursor: pointer;
 }
 # icon_1 {background-position: 0px}
 # icon_2 {background-position: -16px}
 / * and so on by the number of pictograms * /

If we arrange the icons not only horizontally, but also vertically, we will need a second background-position value that controls the height:

 # icon_4 {background-position: -16px -16px}

using PNG-24 is more profitable than GIF only if there are more than 256 colors in all the “glued” pictograms.
')

Real utility

1. The size of the glued graphic file tends to half the sum of all small files,
2. The number of HTTP requests to the server is reduced from the number of icons per iteration * the number of iterations to one of the * .css file (typical for forums and blogs),
3. Reduced number of html-code.

Solid pluses :)

Authoritative examples for dessert

The first authoritative example:

The second authoritative example:


I hope Habraludyam this topic will serve in good stead.
PS Habra is to take the foregoing. IMHO.
PPS On Habré is a buggy image loading service: (I had to hastily look for a place to put illustrations