Пропустить навигацию

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

19.11.2007 ,

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

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
  • Оптимизируем загрузку веб-страницы

Комментарии

  1. о. спасиб. давно использую эту технику, но ее название узнал от вас. =)

    — Zigzag Nov 19, 11:10 PM #
  2. метод хороший с точки зрения оптимизации...
    но как я понимаю, при таком подходе не будут работать бэкграунды с репитом...

    — MASe May 21, 01:22 PM #
  3. Довольно интересно! Странно что раньше я об этом не знал.. Век живи – век учись :)

    — Sirius Aug 11, 04:44 PM #
  4. Зачетно! Придется опять переписывать движок с css. Я обажаю оптимизировать ;)

    — andrei Oct 29, 10:41 PM #
  5. вот придумали новый подход к оптимизации стилей
    Data URI [CSS] Sprites – http://duris.ru

    — Руслан Dec 14, 08:39 PM #
  6. Прикольно. Респект автору статьи – всё понятно объяснил!

    — Александр Jul 5, 05:34 PM #
  7. Техника интересная, буду стараться использовать для нескольких мелких изображений.

    Пожелание к автору, добавить название статьи в title, чтобы ее было удобно добавлять в закладки ;)

    — July Nov 16, 02:00 PM #
  8. Спасибо за пожелание, добавил.

    higher Nov 16, 03:26 PM #