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 {background:none no-repeat left center} #nav li a.item1 {background-image:url('image1.gif')} #nav li a:hover.item1 {background-image:url('image1_over.gif')} #nav li a.item2 {background-image:url('image2.gif')} #nav li a:hover.item2 {background-image:url('image2_over.gif')} ...

Результат

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

#nav li a {background-image:url('image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;} ...

Результат

Таким образом мы уменьшили количество запросов на сервер на 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, а ниже предложенные.

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

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

Опубликовано: 08.12.2009 Просмотров 29168 Ссылка на оригинал Tweet it!
7 comments  

yatanson

2010.01.12 18:32

 Спасибо) полезная статья. Пригодиться!
 

sadomax

2010.06.16 14:16

 Хороший материал спасибо! :)
 

graceman9

2010.10.12 15:54

 Понравилась задумка, как раз надо оптимизировать иконки категорий (около 100шт 21х19px).
Но при попытки реализовать это через SpriteMe он выдал ошибки.

Сначала выдал alert: (1)
"Not all of the images can be combined into one sprite because the image URLs are too long."

Затем сразу же: (2)
"An error occurred trying to create the sprite image."

1. Первую ошибку поборол сократив кол-во (прийдеться переиминовывать вручную типа 1.png, 2.png и не факт что этого хватит).

2. Вторая ошибка значит что SpriteMe работает только на "живом" сайте. т.е. Не работает на localhost.

Поправьте если что-то не верно.
 

basilkot

2010.10.12 16:16

  • похоже на то, что он отправляет на сервер не картинки, а url-ы, поэтому да, SpriteMe будет работать только если эти картинки доступны по постоянному url, и также используются на локальном сайте.

Не представился

2013.04.10 12:42

 Здравствуйте,есть кнопка(начальное состояние) нажимаю на нее и с помощью activ: подменяю изображениею.Вопрос как сделать так чтобы моя кнопка уже не вернулась в исходное состояние.Всем спасибо.
 

basilkot

2013.04.12 12:09

  • тут уж только яваскриптом, css не сохраняет состояния.

    скажем так:
    $("#mybutton").click(function(){ $(this).css("background-position", ""); })

гск

2015.08.25 11:10

 класс http://www.spbdveri.ru/
 

Эльнур

2015.11.15 13:01

 Разъясните мне плиз, что значит перетащить/сохранить в закладки. Я могу только в закладки сохранить сам сайт, а как эту ссылку то сохранить
 

Эльнур

2015.11.15 13:16

 Гребаные браузеры
 

Оставить после себя комментарий

user

2016.10.25

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!