CSS-спрайты: что такое и как их использовать?

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

Для чего это нужно?

Время , необходимое для загрузки страницы, во многом зависит от количества http-запросов. А каждая загрузка изображения, будь то Code<img> или background в CSS — это http — запрос.

Как это работает?

Давайте посмотри на конкретном примере: 
Вариант 1
В нем для каждого пункта прописана своя картинка следующим образом:

Code#nav li a {background:none no-repeat left center}
#nav li a.item1 {background-image:url(‘../img/image1.gif’)}
#nav li a:hover.item1 {background-image:url(‘../img/image1_over.gif’)}
#nav li a.item2 {background-image:url(‘../img/image2.gif’)}
#nav li a:hover.item2 {background-image:url(‘../img/image2_over.gif’)}
…
Итого для 5 пунктов меню требуется 10 http-запросов и загрузка картинок общим объемом 20,5 Кб

А теперь давайте рассмотрим

Вариант 2

В нем используются css спрайты

и CSS код имеет вид

Code
#nav li a {background-image:url(‘../img/image_nav.gif’)}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
…

Что мы получаем в итоге? 1!!!! http-запрос и загрузку одной картинки размеров 13Кб
Впечатляет? А это ведь только 5 пунктов меню. Представьте, сколько Вы сможете сэкономить на всем сайте?

Это слишком трудно

Кто-то может сказать, что это слишком трудно и не по силам. Но Вы ошибаетесь. Есть сервисы, которые могут выполнить всю работу за Вас. 
Например, сайт Sprite me
О том, как с ним работать, я расскажу в следующей статье.

Что не могут делать спрайты?

Они не могут повторяться. Спрайты подходят для единичных блоков. Иконки — прекрасный вариант использования css- спрайтов.

Когда начинать работу со спрайтами?

Это непринципиально. Вы можете пойти 2 путями:
1. изначально продумать все элементы дизайна и добавить их в одну картинку и прописать в свойствах;
2. а можете сначала создать весь дизайн, а потом воспользоваться сервисом Sprite me, о котором я писала выше и внести изменения.

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

По материалам сайта http://css-tricks.com/css-sprites/