Когда применять спрайты?

Спрайты. Когда использовать, а когда нет? Итак, каждый из web-мастеров и верстальщиков при создании сайта хоть раз сталкивался в css с применением спрайтов. Что такое спрайты?

Давайте рассмотрим применение спрайтов на примере одной из сверстанных нами работ сайта векторного и растрового клипарта

Как видите, данный спрайт включает в себя больше 20 иконок, которые устанавливаются фоном для декорации различных элементов (для обозначения автора материала, даты его создания, категории размещения, количества просмотров, комментариев, декорации заголовков модулей, например: облако тегов, история, контакты и т.п.).

Спрайты и css

Рассмотрим, например, как в данном случае использовать спрайт для отображения иконки автора в приведенном примере (которая располагается слева под названием материала, а в спрайте — вторая по вертикали).

div.catItemHeader span.catItemAuthor,
div.itemHeader span.itemAuthor {
        background: url(../images/modules-sprite.png) 0 -34px no-repeat;
      }

Для этого мы назначаем свойству css: background-position значение 0, -34px (0 пикселей – сдвиг слева и на 34 пикселя – сдвиг вниз).

А теперь приведем пример применения спрайта для стилизации названия модуля Контакты в правой колонке.

#ja-col1 div.moduletable_friends .moduletable-header span,
#ja-col2 div.moduletable_friends .moduletable-header span{
    background: url(../images/modules-sprite.png) -200px 15px no-repeat;
}

Для этого мы назначаем свойству css: background-position значение -200px 15px (-200 пикселей сдвиг вправо и отступ на 15 пикселей от верхнего края элемента).

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

Как следует из приведенных ранее примеров, положительное значение смещения по вертикали css:background-position смещает фон вниз, отрицательное поднимает вверх. Положительное же смещение css:background-position по горизонтали сдвигает фон вправо, а отрицательное – влево.

Допускаются также при верстке спрайтами и другие единицы измерения, как относительные, так и абсолютные.

Преимущества верстки спрайтами?

При использовании технологии спрайтов во время загрузки сайта удается минимизировать количество запросов от браузера к серверу (так как мы запрашиваем всего лишь одно изображение, и используем его области в дальнейшем для стилизации фона различных элементов, вместо 20 отдельных изображений в приведенном выше примере). Следовательно, сайт грузится быстрее.

Также из этого следует еще одно преимущество применения sprite ов при создании сайтов на этапе верстки макета страницы. Например: при отображении различных областей единого спрайта, устанавливаемых через свойство css: background-position, визуальная смена фона будет моментальной (наше изображение уже полностью загружено браузером), а не «прерывистой». Когда же используются несколько отдельных изображений, при смене фона происходит загрузка дополнительного изображения. Это занимает некоторое время, и посетитель видит «пропадание» и «появление» фона элемента.

В каких ситуациях при верстке сайта следует применять спрайты?

Для всех элементов, у которых заранее известны (ограничены): длинна и высота. А свойство css: background-repeat установлено в no-repeat (не повторять фоновый рисунок, показать только один раз).

Где спрайты применять накладно?

1. Если Вы назначаете элементу фон, для которого свойство css: background-repeat установлено в repeat-x,repeat-y, repeat («повторить» фон по горизонтали, по вертикали, в обоих случаях).
2. Так же не советую Вам компоновать спрайты большого размера. Здесь опять отличился IE, который не отображает фоновые изображения, размер которых больше 100 кбайт (по крайней мере за 8-м еще замечена сия оплошность).
3. Спрайты совершенно не применимы для элементов, которые могут иметь обширные динамические размеры: ширину и высоту. Например, некоторые web-мастера все же пытаются применить технологию спрайтов для стилизации ненумерованных и нумерованных списков, что, зачастую, приводит к курьезам, так как при определенной высоте/ширине элемента «появляются» «артефакты» — другие совсем неожиданные части спрайта.

Отчасти «увеличить» область применения спрайта можно правильной его компоновкой.

Как же «компоновать» изображения в области спрайта?

Если ширина элементов заранее не известна, но при этом элементы имеют четко обозначенную высоту, Вы можете компоновать спрайты для таких элементов вертикально с отступами между ними, равными максимальной высоте элемента.

Если же ширина элемента ограничена, но не известна высота: тогда можете компоновать горизонтально с отступами, равными максимальной ширине.

Также, как было показано в приведенном мною примере, Вы можете использовать «гибридную» компоновку спрайтов (вертикально, горизонтально, по необходимости).

Увеличиваем эффективность верстки при использовании спрайтов

Совет: всегда используйте одни и те же кратные расстояния между изображениями, объединенными в sprites. Разместите их, скажем, в Adobe Photoshop, с равными отступами между друг другом. Что в дальнейшем позволит Вам не тратить время на «визуальный подбор» значения для свойства css: background-position. А просто определить ее, как произведение номера нужного элемента на постоянную величину расстояния.

Пример: в моем примере отступ для горизонтальных изображений в спрайте равен 50 пикселям, и чтобы «указать нужное значение» я номер картинки слева – направо умножаю на 50 (и отнимаю 50, так как в первое изображение в спрайте находится в позиции с координатами X-0, Y-0). И точно знаю, что если мне понадобится пятая горизонтальная иконка, ее координаты для свойства css: background-position будут: -200px,0.