CSS спрайты – не новая технология, она уже стала устоявшейся и широко применимой в веб-разработке. Конечно же спрайты не обязательны для применения, но в ряде случаев они могут дать огромные преимущества, особенно в том случае, если вы хотите уменьшить нагрузку на свой сервер. Если ранее вы ничего не слышали о CSS спрайтах, то сейчас самое время узнать о том, как работает данная технология, какие инструменты использовать для создания спрайтов и освоить технику их применения в своих проектах.
Данная статья открывает цикл статей об использовании техники CSS-спрайтов, так что кому интересно – добро пожаловать под кат!

Что такое CSS спрайты?

Термин “спрайт” берет начало в компьютерной графике, где спрайтом называют растровый графический объект, перемещаемый по экрану. Поскольку сложность компьютерных игр постоянно растет, то для обеспечения приемлемой производительности требуется какая-либо техника отображения высокодетализированных статичных объектов. Одна из таких техник заключается в следующем: все изображения располагаются фактически на одном изображении – мастер-изображении (как на странице ниже), но в соответствии с некоторой сеткой, из которой потом программным способом извлекается нужная часть и помещается в различные места экрана.

Спрайты как правило отрисовываются поверх динамического либо статического фонового изображения.

Спрайт с покемонами, найден где-то на просторах сети

Когда в начале 2000х годов прогрессивные веб-дизайнеры начали искать альтернативу выпадающим меню на JavaScript (с использованием событий OnMouseOver и OnMouseOut), CSS спрайты явились настоящим открытием. Организовать выпадающие меню с использованием спрайтов оказалось более простым и эффективным, чем способ с JavaScript.

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

Когда веб-страница загрузится, она не будет загружать изображения одно за другим (а изображения, показываемые при наведении курсора – по запросу), а загрузит сразу одно мастер-изображение, содержащее все нужные графические элементы. Возможно это не звучит как существенный плюс, но на самом деле это так: давайте посчитаем, эффект, основанный на событии OnMouseOver потребует два HTTP запроса для каждого изображения, что требует времени и как следствие создает неприятный эффект “загружающегося изображения” (особенно неприятно, когда картинка загрузилась не полностью – часть элемента выглядит по-новому, а вторая – еще по-старому). Поскольку мастер-изображение грузится один раз, то подобных неприятностей при использовании CSS спрайтов мы не получим.

Сделаем некоторые выводы: CSS спрайты уменьшают количество HTTP-запросов и, как следствие, время загрузки страницы. Это главная причина, почем спрайты используются на сайтах, работающих под высокой нагрузкой.
Спрайты как правило используются для навигационных элементов, иконок и кнопок.

Где используются CSS спрайты?

Спрайты могут иметь самые различные применения. Большие сайты могут комбинировать картинки в мастер-изображения в зависимости от функционального назначения картинок, создавая независимые друг от друга цепочки мастер-изображений, позволяющие легко обновлять дизайн. Большие отступы между картинками внутри мастер-изображения позволяют побороть изменение масштаба пользователем в браузере, предотвращая появление на границе элементов частей соседнего спрайта.
Как правило спрайты удачно вписываются в фиксированный дизайн, и плохо согласуются с “резиной”.
На самом деле использование спрайтов – компромисс между нагрузкой на сервер и удобством обслуживания – задача, которую решают при разработке веб-приложений.