CSS Sprites и их использование

Автор: http://higher.com.ua/

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

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

Очень наглядный пример демонстрирует дизайнер Jason Edmond Beaird на сайте jasongraphix.com. При наведении на логотип, расположенный справа, изображение как бы "оживает". Если вы попробуете разобраться в его CSS файле, то обязательно наткнетесь на статью, подробно рассказывающую об этой технике.

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

Какие выгоды можно извлечь из этого и не проще ли использовать множество несколько изображений для различных элементов?

Использование множества отдельных изображений довольно привычный способ и наиболее часто используется в процессе создания сайта. Вырезали из дизайна огромное количество иконок и вставили во все необходимые элементы. На первый взгляд создается впечатление, что страница грузится быстрее; графические элементы появляются один за другим, постоянно создавая дополнительные HTTP запросы, что далеко не улучшает эффективность вашей страницы (Оптимизация веб сайтов Web Site Optimization: 13 Simple Steps и Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests).

Практика показывает, что от 5% до 38% времени загрузки страницы уходит на загрузку HTML, остальные 62%-95% составляют HTTP запросы (загрузка скриптов, изображений и т.д.). Каждый тэг <img /> и фоновый рисунок составляют отдельный запрос. Несложно догадаться, что уменьшение количества HTTP запросов является одним из основных способов оптимизации загрузки и эффективности работы вашего сайта.

Рассмотрим действие CSS Спрайта на примерах. Возьмем единую разметку, и в таблице стилей для первой будем использовать отдельные изображения, во второй — спрайт..

Без использования спрайтов:

dt.home {
	background-image:url('../img/application_firefox.gif')
}

dt.preferences {
	background-image:url('../img/application_flash.gif')
}

dt.web {
	background-image:url('../img/comment.gif')
}

dt.users {
	background-image:url('../img/copy.gif')
}

Пример 1

С использованием спрайта:

dt {
	background-image:url('../img/icons.gif');
	background-repeat:no-repeat
}
...
dt.home {
	background-position:0 0
}

dt.preferences {
	background-position:0 -30px
}

dt.web {
	background-position:0 -63px
}

dt.users {
	background-position:0 -95px
}

Пример 2

Для проверки работы сайта и скорости загрузки различных элементов страницы можно воспользоваться WebSiteOptimization.com.

Для простоты создание спрайтов существует сервис CSS Sprite generator.

Ссылки по теме:

• CSS Sprites: What They Are, Why They're Cool, and How To Use Them
• CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
• CSS Sprites: Image Slicing's Kiss of Death
• CSS Sprite generator
• Web Site Optimization: 13 Simple Steps
• Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests
• WebSiteOptimization.com
• Оптимизируем загрузку веб-страницы