CSS спрайты

Использование CSS-спрайтов позволяет существенно сократить количество HTTP-запросов к серверу, которые посылает ваш сайт. Несколько изображений объединяются в одно большое изображение с определёнными координатами X и Y.

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

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

Как реализовать механизм спрайтов

В принципе, ничего сложного. Для этого надо использовать свойство CSS и поместить картинки в один файл.

Возьмем самый простой пример. На сайте //vishpha.ua/ru/ системные иконки (домик, лупа и конвертик) реализованы таким способом.

Создается картинка , размер которой 84 на 60 пикселей. И с помощью CSS отображается только нужная часть.

Ниже привожу код CSS.

/*
* System navigation
*/

<code>#nav-ico {</code>
<code> float: right;</code>
<code> margin: 49px 15px 0 1.2em;</code>
<code>}</code>

<code>#nav-ico li {</code>
<code> float: left;</code>
<code> height: 19px;</code>
<code> border: 1px;</code>
<code> padding: 0;</code>
<code> margin: 0;</code>
<code>}</code>

<code>ul #nav-ico {</code>
<code> margin: 0 auto;</code>
<code>}</code>

<code>#nav-ico li {</code>
<code> width: 28px;</code>
<code>}</code>

<code>#nav-ico li a,</code>
<code> #nav-ico li a:hover,</code>
<code> #nav-ico li b {</code>
<code> background: url('/i/ico/sysnav-ico.gif') no-repeat 0 0;</code>
<code> display: block;</code>
<code> height: 100%;</code>
<code> width: 100%;</code>
<code>}</code>

Вот здесь задаются координаты для смещения картинки.

<code>#nav-ico li.home a {background-position: 0 0;}</code>
<code>#nav-ico li.search a {background-position: -28px 0;}</code>
<code>#nav-ico li.contacts a {background-position: -56px 0;}</code>
<code>#nav-ico li.home a:hover {background-position: 0 -20px;}</code>
<code>#nav-ico li.search a:hover {background-position: -28px -20px;}</code>
<code>#nav-ico li.contacts a:hover {background-position: -56px -20px;}</code>
<code>#nav-ico li.home b {background-position: 0 -40px;}</code>
<code>#nav-ico li.search b {background-position: -28px -40px;}</code>
<code>#nav-ico li.contacts b {background-position: -56px -40px;}</code>

Может вам еще понадобиться генератор CSS спрайтов (//ru.spritegen.website-performance.org/).