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/
