Для чего используется метод css спрайт

Спрайты

Приём, когда один рисунок меняется на другой при наведении на него курсора мыши, называется эффект перекатывания, или rollover. Смену картинок можно сделать с помощью скриптов или стилей, но нужно помнить о некоторых моментах:

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

Чтобы избавиться от этих недочётов все изображения вставляют в одну общую картинку, которая и называется спрайтом. Вывод самого изображения происходит как фон через свойство background , а смена картинки делается за счёт сдвига фона с помощь background-position . На рис. 1 показан спрайт с несколькими картинками.

Здесь используется два набора изображений — сердечки и чекбоксы. Располагать близкие картинки можно как горизонтально, так и вертикально, это не является принципиальным. Для каждого набора в коде создаём свой собственный класс и для него указываем размеры элемента, совпадающие с размерами картинки, в данном случае это 64х64 пикселя. Затем добавляем спрайт в виде фона и при необходимости сдвигаем его через background-position (пример 1).

Пример 1. Смена картинки при наведении указателя

Результат данного примера показан на рис. 2. Куда сдвигать фон — влево или вверх, зависит от исходного расположения картинок.

Рис. 2. Смена картинки при наведении на неё курсора мыши

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

См. также

• background
• background-position
• Линейный градиент
• Несколько фоновых картинок
• Установка фона и градиента
• Фон в CSS
• Фоновая картинка

Для чего используется метод css спрайт

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

Думаю CSS-спрайты — это расширение этой техники. Разница в том, что вместо двух или трёх изображений, скомбинированных в одно, вы можете использовать сколько угодно картинок в одной. Термин «спрайт» пришёл из компьютерной графики и индустрии видеоигр. Идея была в том, что компьютер может создать изображение в памяти, а затем отображать только его часть, что гораздо быстрее чем создавать каждый раз новое изображение. CSS-спрайты имеют ту же идею: получить картинку один раз, отображать для каждого случая свою часть.

Зачем комбинировать эти изображения? Разве не быстрее загружать маленькие?

Нет, это не так. Совсем недавно все разрезали картинки, делали так называемые слайсы, чтобы страница загружалась быстрее. Эта техника создавала видимость того, что страница грузится быстрее, за счёт того, что с сервера подгружалось сразу много кусочков одного изображения, и отображались они почти одновременно. На каждый слайс создавался отдельный http-запрос, и чем больше таких запросов, тем менее эффективна ваша страница.

Ниже представлена цитата из статьи «Performance Research, Part 1»:

В таблице 1 для популярных сайтов показано, что время на загрузку html-разметки варьируется между 5% и 38%. Остальное время (от 62% до 95%) уходит на создание http-запросов для того чтобы подгрузить остальные части документа (например изображения, скрипты и стилевые файлы). Проблема в том, что браузеры могут одновременно качать только в два или четыре потока, в зависимости от версии http и самого браузера. Наш опыт показывает, что сокращение числа http-запросов имеет наибольшее влияние на сокращение времени отклика и зачастую является самым простым способом увеличить производительность.

Время загрузки популярных сайтов.

Время на загрузку HTML	Время на загрузку остальных компонентов
Yahoo!	10%	90%
Google	25%	75%
MySpace	9%	91%
MSN	5%	95%
ebay	5%	95%
Amazon	38%	62%
YouTube	9%	91%
CNN	15%	85%

Каждое изображение на странице, будь оно в теге img или background-image в вашем CSS-файле — это отдельный http-запрос на сервер.

Отлично! Итак, как же это сделать?

Давайте начнём с примера. В представленном CSS для каждого элемента используется своё изображение:

#nav li a #nav li a.item1 #nav li a:hover.item1 #nav li a.item2 #nav li a:hover.item2 . 

Используя технику CSS-спрайтов мы реально можем облегчить наш пример. Вместо 10-ти различных картинок, мы можем сделать одну большую, в которой есть все необходимые нам изображения. Теперь наш CSS будет выглядеть так:

#nav li a #nav li a.item1 #nav li a:hover.item1 #nav li a.item2 #nav li a:hover.item2 . 

Таким образом мы уменьшили количество запросов на сервер на 9, и объём загружаемой информации почти на 8 Кбайт. Но это маленький пример, представьте что будет на реальном сайте.

Звучит так, что у меня появилось много дополнительной работы.

Как однажды сказал Чак Норрис: «Все великие вещи требуют большой самоотверженности». Я конечно не уверен ему ли принадлежат эти слова, но это в любом случае хороший совет 🙂 Но к счастью для вас, существует множество веб-сервисов, которые помогают реализовать спрайты без особых усилий. Я остановлюсь на одном — это SpriteMe.

SpriteMe

SpriteMe — это закладка. После того как вы разместите её на панели закладок, отправляйтесь на свой сайт, а затем нажимайте на неё. Откроется окошко в правой части вашего сайта.

Сверху вы увидите список всех фоновых изображений текущей страницы сайта. Ниже список изображений, которые, вероятно, невозможно использовать как спрайты, а также причины. Если вы думаете иначе, вы можете перетащить ссылки из одного списка в другой. После того, как вы собрали необходимые изображения в верхнем списке, вам остаётся нажать на кнопку «Make Sprite». Всё! Ваши картинки собраны в одну и вы можете её сразу посмотреть

Для текущей версии сайта это изображение может выглядеть так:

И наконец, SpriteMe также позволяет экспортировать CSS. Нажмите на соответствующую кнопку (export CSS) и вы увидите необходимый код. Например:

.link2article < background-image: url(/Content/images/Theme/more.png); background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/6a02f43daf/spriteme1.png); background-position: -10px -156px; > .articlefooter < background-image: url(/Content/images/Theme/comments_bg.png); background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/6a02f43daf/spriteme1.png); background-position: 490px -265px; >

Перечёркнутые строки — это строки из вашего CSS, а ниже предложенные.

Что не может быть спрайтом?

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

Для чего используется метод css спрайт

1. На первом этапе создания необходимо группировать картинки по типам (jpg, gif, png и тд) , поскольку объединять изображения разных типов в одно невозможно.
2. При помощи любого графического редактора (я обычно использую фотошоп) сливаем все маленькие картинки в одну.
3. При помощи css свойства background-position выводим в необходимых местах страницы нужную нам часть картинки.

Практические замечания по использованию css спрайтов

• Если небольшие элементы дизайна сайта (пункты меню, различные кнопки и тд) меняют свой фон при наведении на них мыши или клике по ним мы должны пользоваться методом, поскольку это не просто оптимизирует загрузку страницы, а позволяет нам избежать бага с «пустой» кнопкой, когда после наведения на что-то мы пару секунд видим пустое место, а после появляется картинка. При использовании спрайтов файл картинки один, следовательно загружается он один раз при переходе на страницу и смена фона при наведении происходит мгновенно, ведь меняется лишь область картинки показываемая пользователю.
• Метод используется для картинок из оформления сайта, а не из содержательной его части. Не стоит склеивать картинки несущие на себе смысловую нагрузку и тд. Разница в загрузке 3 или 5 файлов никак не повлияет на скорость подгрузки страницы, а может иметь ряд негативных последствий с точки зрения сео. Подробнее о этом можно почитать тут.
• Если область показа картинки предполагает, что вокруг картинки будет свободное пространство, то это также нужно учитывать при склейке спрайта, оставляя необходимые зазоры по краям.
• Сохраняйте исходники с не слитыми слоями при склейке картинки. Возможна ситуация, когда в дальнейшем вам, к примеру, придется поменять размер пары элементов дизайна, тогда при отсутствии исходника придется ради пары мелких правок перерисовывать спрайт с нуля.
• Не переборщите с размером картинки. Знайте во всем меру, ведь если ваш файл будет весить несколько мегабайт, то возможна ситуация, когда пользователь будет наблюдать экран без оформления несколько секунд после его загрузки.
• Применяйте фантазию при создании спрайтов. Правильно расположить в нем иконки не так просто, как может показаться на первый взгляд. К примеру, при расположении иконок слева от элемента дизайна можно склеить спрайт лесенкой, что ограничит зону видимости других картинок спрайта и в целом файл спрайта останется компактным. (ниже линиями помечены зоны видимости иконок).

Подводя итоги

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

CSS-спрайты

CSS-спрайт – способ объединить много изображений в одно, чтобы:

1. Сократить количество обращений к серверу.
2. Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.
3. Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.

Рассмотрим, как это работает, на примере дерева:

Сейчас «плюс», «минус» и «статья» – три отдельных изображения. Объединим их в спрайт.

Шаг 1. Использовать background

Первый шаг к объединению изображений в «спрайт» – показывать их через background ., а не через тег IMG .

В данном случае он уже сделан. Стиль для дерева:

.icon < width: 16px; height: 16px; float: left; >.open .icon < cursor: pointer; background: url(minus.gif); >.closed .icon < cursor: pointer; background: url(plus.gif); >.leaf .icon

Шаг 2. Объединить изображения

Составим из нескольких изображений одно icons.gif , расположив их, например, по вертикали.

Из , и получится одна картинка:

Шаг 3. Показать часть спрайта в «окошке»

А теперь самое забавное. Размер DIV для иконки – жёстко фиксирован:

/*+ no-beautify */ .icon

Это значит, что если поставить в качестве background объединённую картинку, то вся она не поместится, будет видна только верхняя часть:

Если бы высота иконки была больше, например, 16×48 , как в примере ниже, то было бы видно и остальное:

…но так как там всего 16px , то помещается только одно изображение.

Шаг 4. Сдвинуть спрайт

Сдвиг фона background-position позволяет выбирать, какую именно часть спрайта видно.

В спрайте icons.gif изображения объединены так, что сдвиг на 16px покажет следующую иконку:

/*+ no-beautify */ .icon < width: 16px; height: 16px; float: left; background: url(icons.gif) no-repeat; >.open .icon < background-position: 0 -16px; /* вверх на 16px */ cursor: pointer; >.closed .icon < background-position: 0 0px; /* по умолчанию */ cursor: pointer; >.leaf .icon < background-position: 0 -32px; /* вверх на 32px */ cursor: text; >

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

Отступы

Обычно отступы делаются margin/padding , но иногда их бывает удобно предусмотреть в спрайте.

Тогда если элемент немного больше, чем размер изображения, то в «окошке» не появится лишнего.

Пример спрайта с отступами:

Иконка RSS находится в нём на координатах (90px, 40px) :

Это значит, для того чтобы показать эту иконку, нужно сместить фон:

background-position: -90px -40px;

При этом в левом-верхнем углу фона как раз и будет эта иконка:

Элемент, в котором находится иконка (в рамке), больше по размеру, чем картинка.

/*+ no-beautify */ .rss < width: 35px; /* ширина/высота больше чем размер иконки */ height: 35px; border: 1px solid black; float: left; background-image: url(sprite.png); background-position: -90px -40px; >

Если бы в спрайте не было отступов, то в такое большое «окошко» наверняка влезли бы другие иконки.

Итого

Когда использовать для изображений IMG , а когда – CSS background ?

Решение лучше всего принимать, исходя из принципов семантической вёрстки.

Задайте вопрос – что здесь делает изображение? Является ли оно самостоятельным элементом страницы (фотография, аватар посетителя), или же оформляет что-либо (иконка узла дерева)?

Элемент IMG следует использовать в первом случае, а для оформления у нас есть CSS.

1. Сократить количество обращений к серверу.
2. Загрузить несколько изображений сразу, включая те, которые понадобятся в будущем.
3. Если у изображений сходная палитра, то объединённое изображение будет меньше по размеру, чем совокупность исходных картинок.

Если фоновое изображение нужно повторять по горизонтали или вертикали, то спрайты тоже подойдут – изображения в них нужно располагать в этом случае так, чтобы при повторении не были видны соседи, т.е., соответственно, вертикально или горизонтально, но не «решёткой».

Далее мы встретимся со спрайтами при создании интерфейсов, чтобы кнопка при наведении меняла своё изображение. Один спрайт будет содержать все состояния кнопки, а переключение внешнего вида – осуществляться при помощи сдвига background-position .