Эффективное применение CSS-спрайтов для оформления сайта

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

<span class='block-orange'></span>
<span class='block-blue'></span>
<span class='block-green'></span>
<span class='block-black'></span>

  Для их оформления используются четыре различных изображения с разными параметрами высоты и ширины: первые два - 64 х 64 пикселя, третье - 48 х 48 и последнее, четвертое - 48 х 80 соответственно.

  В этом случаи CSS код бедет выглядеть примерно так:

.block-orange {
 display: block;
 background: url(.../orange.png) no-repeat;
 height: 64px;
 width: 64px;
}
.block-blue {
 display: block;
 background: url(.../blue.png) no-repeat;
 height: 64px;
 width: 64px;
}
.block-green {
 display: block;
 background: url(.../green.png) no-repeat;
 height: 48px;
 width: 48px;
}
.block-black {
 display: block;
 background: url(.../black.png) no-repeat;
 height: 48px;
 width: 80px;
}

  В коде размещены четыре ссылки на четыре разных картинки, для отображения каждой из них будет отправлен отдельный запрос к серверу и чем больше ссылок тем больше запросов, а это несомненно влияет на время и скорость загрузки интернет-ресурса не лучшим образом.
  Но мы можем объединить все необходимые картинки в одно общее изображение (Рис. 1), указывая нужный для оформления фрагмент с помощью CSS свойств.

Рис. 1

  Кроме оптимизации изображений, возможно также оптимизировать и сам код стиля, обращаясь к ссылке спрайта всего один раз. При этом необходимо применять не общее свойство background, а раздельные - background-image, background-position, background-repeat и т.д.
  Свойство background-position указывает на точку начала фрагмента фона, по умолчанию это левый верхний угол, позиция - 0 0. Первое значение - горизонтальное смещение, второе - вертикальное (Рис. 2).

Рис. 2

  На деле выглядеть это будет примерно так:

.block-orange,
.block-blue,
.block-green,
.block-black {
 display: block;
 background-image: url(.../full-sprite.png);
 background-repeat: no-repeat;
}
.block-orange {
 background-position: 0 0;
 height: 64px;
 width: 64px;
}
.block-blue {
 background-position: -64px 0;
 height: 64px;
 width: 64px;
}
.block-green {
 background-position: -80px -64px;
 height: 48px;
 width: 48px;
}
.block-black {
 background-position: 0 -64px;
 height: 48px;
 width: 80px;
}

  Точно также можно оптимизировать CSS код с применением спрайтов для динамических элементов сайта с эффектами псевдоклассов :hover, :active и прочими. Например ссылка кнопки имеет такой вид:

<a class="my-button" href="#" ></a>

  Используем для ее оформления такое спрайт-изображение с размерами 64 х 128 пикселей:

  CSS в данном случаи будет таким:

a.my-button {
 display: block;
 background-image: url(.../sprite-button.png);
 text-decoration: none;
 height: 64px;
 width: 64px;
}
a.my-button:hover {
 background-position: -64px 0;
}

  Живой пример:

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

На этом пока что все. Всем удачных дизайнерских решений.