Преамбула

Почти все веб-разработчики рано или поздно сталкиваются с необходимостью создания интерфейсов, содержащих кучу мелких деталей. Думаю, подавляющее большенство нашего брата, не долго думая, режет кучу этих мелких деталей на кучу маленьких картинок, на чем и останавливается, не задумываясь о возможных неприятностях или о вполне реальных полезностях иных подходов.

Плохие примеры

Первый плохой пример:

Второй плохой пример:

В качестве третьего примера см. 99% форумов

Делаем лучше

Собственно, идея состоит в использовании одного файла, где собраны все пиктограммы, против множества файлов. И это вовсе не сложно, нам достаточно вооружиться знанием CSS и фотошопом, чтобы склеить иконки в один файл.
Предположим, что наши иконки имеют соотношение сторон 16х16 пикселов.
html-код размещения пиктограммы будет выглядеть примерно так:

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

или так:

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

Фантазия подскажет разработчику, какой вариант удобнее выбрать в том или ином примере.
CSS будет, соответственно, примерно таким:

.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}
/* и так далее по количеству пиктограмм */

Если мы расположим пиктограммы не только по горизонтали, но и по вертикали, нам потребуется второе значения background-position, регулирующее высоту:

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

использовать PNG-24 выгоднее чем GIF только в случае наличия более 256 цветов во всех «склееных» пиктограммах.

Реальные полезности

1. Размер склееного графического файла стремится к половине суммы всех мелких файлов,
2. Сокращается количество HTTP запросов к серверу с кол-во иконок на итерацию * кол-во итераций до одного из файла *.css ( характерно для форумов и блогов),
3. Сокращается кол-во html-кода.

Сплошные плюсы :)

Авторитетные примеры на десерт

Первый авторитетный пример:

Второй авторитетный пример:


Надеюсь, Хабралюдям этот топик сослужит хорошую службу.
P.S. Хабру стоит взять вышеизложенное на вооружение. ИМХО.
P.P.S. На Хабре глючит сервис загрузки изображений :( пришлось наспех искать место для размещения иллюстраций