Иконки, смайлики и т.п. зло: методы борьбы
Преамбула
Почти все веб-разработчики рано или поздно сталкиваются с необходимостью создания интерфейсов, содержащих кучу мелких деталей. Думаю, подавляющее большенство нашего брата, не долго думая, режет кучу этих мелких деталей на кучу маленьких картинок, на чем и останавливается, не задумываясь о возможных неприятностях или о вполне реальных полезностях иных подходов.
Плохие примеры
Первый плохой пример:
Второй плохой пример:
В качестве третьего примера см. 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 цветов во всех «склееных» пиктограммах.
Реальные полезности
- Размер склееного графического файла стремится к половине суммы всех мелких файлов,
- Сокращается количество HTTP запросов к серверу с
кол-во иконок на итерацию * кол-во итераций до одного из файла *.css ( характерно для форумов и блогов), - Сокращается кол-во html-кода.
Сплошные плюсы :)
Авторитетные примеры на десерт
Первый авторитетный пример:
Второй авторитетный пример:
Надеюсь, Хабралюдям этот топик сослужит хорошую службу.
P.S. Хабру стоит взять вышеизложенное на вооружение. ИМХО.
P.P.S. На Хабре глючит сервис загрузки изображений :( пришлось наспех искать место для размещения иллюстраций
комментарии (58)