Что такое CSS спрайты?

Сегодня мы с вами поговорим о такой замечательной вещи как CSS спрайты.

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

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

Объединяя много картинок в одну, мы снижаем нагрузку на канал и на сервер. Ведь, например если мы объединили 10 картинок в одну, то вместо 10-ти http запросов на сервер будет отправлен всего 1 запрос. Я пробовал объединять с помощью фотошопа все иконки сайта в одну, но это оказалось слишком долго для меня :). И вот тут я нашел сервис, который все это делает сам.

Вот собственно сам сервис — http://spritegen.website-performance.org/.

Скидываем все картинки, которые хотим объединить, в одну папку. Я делал CSS спрайт из картинок одного и того же размера (то есть у меня иконки 16*16, их я все и скинул в одну папку). Папку заворачиваем в ZIP архив, и на сайте выбираем наш архив. Далее мы опускаемся до вот этого меню — Sprite Output Options.

В пункте Build Direction, выбираем в каком виде будет на выходе рисунок: горизонтальный или вертикальный. Далее в пункте Horizontal offset и Vertical offset ставим значения ширины и высоты картинок, которые мы поместили в архив. Ниже выбираем выходной формат спрайта, качество изображения и жмем на кнопку Create Sprite Image.

Теперь расскажу вам суть того, как это все теперь использовать. :)

В CSS файле стилей вашего сайта, когда подгружаются все картинки по одной, структура подгрузки примерно такая:

ssd.home-1 {
background-image:url('./images/icon-1.gif')
}
ssd.home-2{
background-image:url('./images/icon-2.gif')
}
ssd.home-3{
background-image:url('./images/icon-3.gif')
}
ssd.home-4 {
background-image:url('./images/icon-4.gif')
}

А с использованием CSS спрайта структура меняется на вот такую: :)

ssd{
background-image:url('./images/icons.gif');
background-repeat:no-repeat;
}
ssd.home-1 {
background-position:0 0;
}
ssd.home-2{
background-position:0 -16px;
}
ssd.home-3{
background-position:0 -32px;
}
ssd.home-4{
background-position:0 -48px;
}

То есть, суть такова, что мы подключаем всего 1-у картинку, а потом для каждого элемента прописываем позицию нужной части картинки . Во втором примере позиции прописаны для картинок с разрешением 16*16 и сам CSS спрайт (одна большая картинка) вертикальный.

Вот собственно и все что могу сказать о CSS спрайтах.