CSS спрайты

photoshop

Для чего нужны css спрайты? Они позволяют увеличить скорость загрузки веб-страниц. Спрайт — это несколько объединённых изображений фона в одно, которые при помощи css-кода отображаются по отдельности. Количество HTTP-запросов сводится к одному, что повышает производительность сайта.

Разберём код CSS для отдельных фрагментов спрайта, а изображения будем готовить в Photoshop. Оговорюсь: подойдёт любая графическая программа, главное, понять механизм работы css-спрайтов. Для их создания применимы и сервисы, генерирующие спрайты, — о них в конце материала.

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

Допустим, нам надо сделать css спрайт из трёх иконок-указателей. Описание создания начального изображения опускаю, всё просто: 30px на 30px, прозрачный фон — круг с оливковой заливкой — белая галочка:

как сделать спрайт

Спрайт у нас должен получиться размером 30px на 90px. Создаём для него новое изображение, пока 30 на 30, копируем в него начальное. Далее начальное поворачиваем на 90° по часовой стрелке: «Изображение — Вращение изображения». Теперь нужно увеличить размер будущего спрайта по вертикали до 60рх:

процесс создания

Делается это просто: «Изображение — Размер холста» (Alt+Ctrl+C), задаём высоту 60px, а в «Расположении» нажимаем средний верхний квадратик, чтобы стрелки получились как на скриншоте. Жмём OK — это увеличит (продлит) изображение по вертикали вниз:

Размер холста в Photoshop

Повторим процедуру для третьей иконки-указателя. Теперь о коде CSS. Вот как он будет отличаться для 3-х элементов:

элемент1 { background: url(pics/button.png) 0 0 no-repeat;
padding-left: 30px;}
элемент2 { background: url(pics/button.png) 0 -30px no-repeat;
padding-left: 30px;}
элемент3 { background: url(pics/button.png) 0 -60px no-repeat;
padding-left: 30px;}

По сути, для всех трёх элементов различается только значение background-position, точнее его второе значение. Оно отрицательное и отвечает за смещение нашего изображения button.png по вертикали. Код дан условно, остальные свойства для различных случаев будут разные. Отступ слева подходит для следующего примера с андроидами.

Отступление: иконка с прозрачным фоном выглядит одинаково на любом фоне, если её сохранить в png. А при смене общего фона страницы или её участка не потребуется менять иконки. В форматах gif и jpg прозрачного фона нет, при сохранении он будет белый.

Теперь о нюансах. Например, иконка служит фоновой картинкой для заголовков h1-h6. Мы можем рассчитать её размер для высоты одной строки. А если заголовок образовал вторую строку, то вылезет следующая иконка:

фоновая картинка для заголовков

Решение простое. Чтобы это предотвратить, можно явно задать высоту заголовка height, но это подходит не для всех случаев. Или сделать отступы между изображениями, а для точности использовать направляющие: «Просмотр — Линейка» (Ctrl+R). Просто зажимаем курсор на горизонтальной линейке и тащим вниз направляющую (бирюзовую), а совмещаем её с градуировкой вертикальной линейки:

отступы между изображениями

Таких направляющих можно сделать сколько надо, в т.ч. вертикальных. В Photoshop есть ещё пара инструментов, которые могут пригодиться: «Просмотр — Показать — Быстрые направляющие» (розовые на скрине ниже). Они становятся видимыми при передвижке иконки инструментом «Перемещение» (V) и служат для выравнивания с «соседями». Это, кстати, более сложный css спрайт:

css спрайты

Там же находится инструмент Сетка (Ctrl+'). Сетку удобно применять для css спрайта, состоящего из одинаковых по размеру иконок. Чтобы включить-отключить эти инструменты нужно поставить или убрать галочку для пункта «Просмотр — Вспомогательные элементы» (Ctrl+H).

Скажу по секрету: опытные разработчики и дизайнеры делают css спрайты ещё в процессе разработки сайта и дополнительно сохраняют их в формате psd, где сохраняются слои, с возможностью их редактирования. Это позволяет изменять отдельные изображения в объединённом спрайте в случае необходимости.

В сложных css спрайтах необходимо рассчитывать координаты для обоих значений свойства background-position — мужайтесь, у кого с математикой неважно (это шутка).

Вместо Photoshop для изготовления css спрайтов годится любой другой графический редактор. В Сети существует много сервисов для генерации спрайтов: читайте об оптимизации изображений, где даётся описание лучших генераторов css-спрайтов и инструментов для сжатия png, jpg и gif файлов без потери качества.

CSS спрайты существенно увеличивают скорость загрузки сайта — проверить этот показатель можно, используя сервис PageSpeed от Google.

Уроки Photoshop: