CSS спрайты - это графика для Вашего Web-сайта, объединённая в один графический файл. "Почему один файл?" - спросите Вы. Дело в том, что такой подход к хранению изображений позволяет повысить производительность веб-страниц, а также хранить графические изображения более организованно. Давайте взглянем на некоторые из лучших практик применения спрайтов. Само название спрайтов может напомнить Вам об игровых спрайтах, ретро игровой консоли и даже браузерных играх, которые так популярны сегодня:
 
 Итак, применимо к Веб-дизайну, спрайт - это всего лишь один большой файл, содержащий несколько изображений для Вашего сайта, экономящий время загрузки и передачи файла по сети. Когда спрайт, к примеру, содержит 20-30 изображений, то это существенно может облегчить нагрузку на сервер, поскольку, если бы эти изображения хранились по отдельности - серверу пришлось бы делать соответственно 20-30 отдельных запросов для получения каждого такого изображения. Благодаря спрайту на сервер идет всего один HTTP-запрос - для получения одного-единственного изображения. Спрайт визуально может выглядеть не совсем "читаемо" для глаза, поскольку его основная задача - лишь собрать разные "куски" Вашего дизайна воедино. Например, спрайт может быть вот таким:
 
 Спрайты используют большинство современных сайтов, и всем известный ВКонтакте - не исключение. Например, так он хранит в одном файле "кусочки" интерфейса - а именно всем знакомые иконки:
 
 Существенным моментом использования CSS-спрайтов является то, что серверу надо отправить только один графический файл, содержащий все Ваши изображения, а не множество отдельных изображений - и через CSS можно отобразить любой маленький сегмент из этого графического файла в качестве фона для элемента. Некоторые думают, что по отдельности картинки быстрее грузятся, но это не так. Загружая один графический файл с множеством картинок, мы посылаем только один запрос на сервер, а при загрузке большого количества картинок - мы отправляем больше запросов на сервер. Объединение изображений в один файл позволяет не только значительно снизить количество HTTP-запросов, но и уменьшить общий размер файла изображения.
 Приведу еще один пример спрайта. Так хранит элементы графики один известный западный сайт, посвященный дизайну:
  
 
  
 Вы можете спросить - когда лучшим образом подготавливать спрайт? Для этого есть два разных подхода.
 Различные подходы - создаем спрайт до и после создания сайта
 Есть два распространенных подхода при создании спрайт листа - сделать его до или после создания Вашего сайта. Вы можете поместить все изображения в спрайт лист перед созданием сайта. Это то, что мы называем подход "до". Кроме того, Вы можете создать все изображения в виде отдельных файлов, что делает их редактирование более простым. Как только сайт будет построен, и все изображения подготовлены, Вы можете быстро и легко создать спрайт лист, либо вручную, либо, используя один из нескольких инструментов. Это мы будем называть подход "после". Если спрайт листы для Вас в новинку или Вы новичок в Веб-дизайне, то Вам больше подойдёт подход "после". Существует множество утилит, сервисов и программ для помощи при создании спрайтов, большинство из которых распространяются и доступны бесплатно.
 Располагаем картинки в спрайте организованно
 При создании спрайта в Photoshop, желательно сразу все изображения размещать организованно и в какой-то определенной, выбранной Вами последовательности, чтобы потом работать с ними было легко и просто. Старайтесь всегда округлять место под каждое изображение спрайта до ближайших 10 пикселей, или оставлять больше пространства вокруг них, если они все одинакового размера. Когда дело дойдет до написания CSS-стиля, Вам не придется записывать измерения координат, и Вы будете менее склонны забывать числа с координатами нужных изображений. Вот пример удачного размещения разных изображений в одном спрайте:
  
 
  
 От теории - к практике! Создаем анимированную птицу из Angry Birds с помощью спрайта
 Итак, мы познакомились с понятием спрайта в Веб-дизайне, но теория без практики - ничто. Поэтому сейчас мы c Вами создадим наш первый спрайт и научимся делать простую анимацию на HTML-странице. Наш пример будет основан на персонаже из игры Angry Birds - это забавная красная птичка. Для начала подготовим изображение-спрайт в формате .PNG, содержащее 4 фазы анимации птицы:
 
 Создадим где-нибудь на диске каталог angry_bird - туда мы будем помещать файлы нашего примера. Сохраняем спрайт с птичками в этот каталог и называем файл angry.png. Следующим шагом -  создаём в этом же каталоге файл с именем index.html - это будет наша тестовая страничка с анимацией. Далее откроем этот файл в редакторе и поместим туда следующий код:
 
HTML
<p>[html][nl]</p><div>[head][nl]</div><div>[tab][meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;][/meta][nl]</div><div>[tab][title]Урок Allineed.Ru - Демонстрация работы со спрайтами[/title][nl]</div><div>[tab][link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;][/link][nl]</div><div>[tab][script type=&quot;text/javascript&quot; src=&quot;http://code.jquery.com/jquery.min.js&quot;][/script][nl]</div><div>[tab][script type=&quot;text/javascript&quot;][nl]</div><div>[tab][tab]$(document).ready(function() {[nl]</div><div>[tab][tab][tab]// здесь будет код на jQuery, создающий анимацию[nl]</div><div>[tab][tab]});[nl]</div><div>[tab][/script][nl]</div><div>[/head][nl]</div><div>[body][nl]</div><div>[a href=&#39;#&#39;][nl]</div><div>[tab][div id=&#39;birdImage&#39; class=&#39;bird-sleeping&#39;][/div][nl]</div><div>[/a][nl]</div><div>[/body][nl]</div><div>[/html][nl]</div>

 Немного поясню, что мы сейчас сделали. Во-первых, мы задали нашему HTML-документу кодировку UTF-8, а значит, должны сохранить наш index.html в этой кодировке. Можно задать и другую, например, windows-1251, - для нашей задачи это не принципиально. Далее, мы подключили к документу файл стиля style.css (его пока нет в нашем каталоге angry_bird, его создадим чуть позже). Также мы задали ссылку на внешний скрипт и подключили библиотеку jQuery - с помощью jQuery мы будем осуществлять динамическую смену картинок нашей птицы и менять её "фазы" из спрайта. Также мы подготовили внутренний JavaScript-блок, куда дальше поместим код, делающий анимацию птицы. Ну, и наконец, - основное тело документа содержит единственную гиперссылку, внутри которой DIV-блок, и у него ID задан в качествеbirdImage, а класс по умолчанию -bird-sleeping. Это значит, что наша птица при открытии страницы будет "спать" - это соответствует левому нижнему изображению внутри спрайта - где у неё закрыты глаза. Теперь самое время "нарезать" наш спрайт, т.е. выделить из него отдельные изображения.
 Нарезаем спрайт, используя сервис SpriteCow.Com
 Задача "нарезки" спрайта является довольно трудоёмкой - она требует внимательности, чтобы не ошибиться с координатами, определяющими каждое изображение в спрайте. К счастью, на сегодня есть сервисы, которые полностью снимают эту головную боль с дизайнера и верстальщика. Я использую для нарезки и рекомендую Вам сервис http://spritecow.com. Суть сервиса проста и очень удобна - мы мышью выделяем каждую картинку птицы, а SpriteCow выдает нам готовый CSS-код с координатами. Всё, что нам останется сделать - это просто задать 4 стиля для каждой фазы птицы! Зайдя на сайт, видим 2 кнопки - "Open Image" и "Show Example". Нам нужна первая кнопка, жмём на неё:
 
 В открывшемся диалоге - выбираем наш файл спрайта angry.png, после чего видим, как наш спрайт загрузился на сайт. Далее нам необходимо определить цвет фона, для этого жмём на панели инструментов "Pick Background" и указываем на белую область нашего спрайта - это позволит правильно вырезать каждую фазу птицы:
 
 Выделяем первое изображение и получаем автоматически для него CSS-код:
 
 Теперь, самое время создать в нашем каталоге angry_bird файл стилей style.css. Туда последоватьльно вставляем 4 сгенерированных куска CSS-кода, только вместо стандартного класса.sprite, предлагаемого нам SpriteCow назовём наши стили более понятно. Также, поскольку изображение спрайта у нас хранится прямо в корне каталога, удалим из свойстваbackgroundненужный элемент пути - imgs/. У меня вышло так:

CSS

	 

	/* "обычная" птица. Левое верхнее изображение в спрайте */

	.bird-normal {

	background: url('angry.png') no-repeat -12px -16px;

	width: 97px;

	height: 94px;

	}

	 

	/* "Счастливая" птица. Правое верхнее изображение в спрайте */

	.bird-happy {

	background: url('angry.png') no-repeat -118px -17px;

	width: 97px;

	height: 94px;

	}

	 

	/* "Спящая" птица. Левое нижнее изображение в спрайте */

	.bird-sleeping {

	background: url('angry.png') no-repeat -12px -120px;

	width: 97px;

	height: 94px;

	}

	 

	/* "Злая" птица. Правое нижнее изображение в спрайте */

	.bird-angry {

	background: url('angry.png') no-repeat -118px -120px;

	width: 97px;

	height: 94px;

	}

 Последний шаг - пишем код на jQuery, создающий анимацию.
 Теперь, когда мы успешно нарезали спрайт и поместили 4 стиля для каждого изображения в наш файл style.css, нам остается написать код на jQuery, который будет добавлять анимацию при наведении на нашу гиперссылку и при щелчке по ссылке. Как мы помним, по умолчанию у нас задан классbird-sleeping, т.е. наша красная птичка будет "спать" при открытии документа :)
 Вся анимация будет строиться на 3-х методах jQuery:
hover- обработчик наведения курсора на ссылку и "ухода" курсора с ссылки. Когда будем наводить курсор, птица будет "просыпаться" - т.е. класс станетbird-normal
mousedown- обработчик нажатия левой кнопки мыши на ссылке. При этом птица будет становиться "счастливой" - т.е. DIV-блоку будет присваиваться классbird-happy
mouseup- обработчик отпускания левой кнопки мыши. При отпускании птица будет становиться "злой" - т.е. DIV-блоку присваивается классbird-angry
 Итак, вставляем следующий код в место, которое мы подготовили во внутреннем блоке JavaScript, размещенном на странице:

JavaScript
 $(document).ready(function() {
	// здесь будет код на jQuery, создающий анимацию
	$("#birdImage").hover(function() {
		$(this).removeClass("bird-sleeping");
		$(this).removeClass("bird-angry");
		$(this).removeClass("bird-happy");
		$(this).addClass("bird-normal");
	}, function() {
		$(this).removeClass("bird-normal");
		$(this).removeClass("bird-angry");
		$(this).removeClass("bird-happy");
		$(this).addClass("bird-sleeping");
	});

	$("#birdImage").mousedown(function() {
		$(this).removeClass("bird-sleeping");
		$(this).removeClass("bird-normal");
		$(this).removeClass("bird-angry");
		$(this).addClass("bird-happy");
	}).mouseup(function() {
		$(this).removeClass("bird-sleeping");
		$(this).removeClass("bird-normal");
		$(this).removeClass("bird-happy");
		$(this).addClass("bird-angry");
 	});
});

 Готово! Тестируем анимацию
 Ну, вот и всё! Наша птица готова и внесла жизнь своей анимацией в страницу! :) Просмотреть демо можно тут. Скачать архив с примером - внизу статьи.