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

/ Рубрика: CSS

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

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')
}

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

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
}

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

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

Автор — Неизвестный автор

Дата написания — 2008-01-15

Источник: www.realcoding.net

Спасибо,

Спасибо, интересная инфа

ах вот они

ах вот они какие... много встречался но не знал как наз...)))

И в очередной

И в очередной раз веб удивляет меня. Когда-то все это через JS делалось, при этом создавалось два (!) комплекта картинок... И чтобы вторые успели подгрузиться, они выводились на странице в виде картинок 1х1. Сейчас все куда красивей, конечно.

Пардон -

Пардон - неправильно имя написал в предыдущем посте :)

По сути,

По сути, бестолковая вещь.

Очень даже

Очень даже толковая вещь.

Сам использую везде и всегда.
Доходит до того, что на сайте всего остаётся 2-3 картинки с графикой, которые содержат порядка двух десятков фрагментов графики, при том, что размер спрайтовой графики в десятки раз меньше, чем куча гифов.

Спасибо за

Спасибо за статью!

Благодарен за

Благодарен за статью!

Отличное

Отличное разъяснение. Благодарен.

неплохая

неплохая статья, вот тут тоже очень интересно про спрайты рассказано css спрайты

Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Сохранить установки".