CSS-спрайты: что это, почему это полезно и как их использовать

Доброго времени суток, сегодня хочу рассказать вам о том, как сделать css спрайт иконок для своего сайта. Да в прочем не только иконок, но и любых других элементов, например, кнопок, меню и т.д. Хоть графику всего лендинга.

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

Для тех, кто не в теме, то спрайт выглядит так:

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

Но вопрос того, на сколько быстрее или медленнее грузится страничка с использованием спрайтов, я затрону в следующей статье, и она уже точно попадет в нужную рубрику. Так что подписывайтесь в Twitter , чтобы не пропустить анонс статьи.

А в этом посте я постараюсь показать вам внутреннюю кухню того, как используются спрайты в вебе, на примере иконок своего блога.

Итак, я создал простенький спрайт иконок в фотошопе. Особо не заморачивался, но сделал по паре каждой из видов, для того, чтобы показать не только, как пользоваться спрайтом, а и то, как можно использовать спрайты для создания псевдоанимации.

Создание css спрайта – html разметка

Теперь нужно набросать html – разметку. Ничего необычного. Ненумерованный список:

Подписывайтесь на обновления

Вместо «#» — вписывайте адреса своих аккаунтов. Дописывайте title ссылкам. И переходим к добавлению стилей!

Создание css спрайта – css разметка

Задаем стили контейнера:

Socseti {
width: 270px;
height: 150px;
margin:200px auto;
background: url(../images/bg-soc.png) no-repeat;
padding: 15px;
}

Описываем стили для текста и ненумерованного списка, который флоатим по левому краю (стандартная процедура для менюшек и подобных элементов)

Socseti ul {
overflow: hidden;
width: 246px;
margin:20px auto;
}

Socseti ul li {
float: left;
margin-left:2px;
}

Socseti ul li: last-child{
margin-right: 2px
}

Теперь начинается самое интересное. Зададим общие стили для ссылок:

Socseti ul li a {
display: block;
width: 59px;
height: 59px;
}

Как вы могли заметить, я немного ошибся при создании спрайта и поэтому получился идиотский размер 59×59 px — но это не повлияло на визуальное восприятие. Продолжим…
Зададим фоновое изображение первой ссылке.

a. tvitter {

transition: .3s;
}
a. tvitter: hover{

transition: .3s;
}

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

Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 59px, то мне необходимо подвинуть фон на -59px. А также, я хочу чтобы цвет менялся с серого на цветной. Для этого мне нужно опустить фон на 59px. Что и показано здесь:

a. tvitter {
background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
transition: .3s;
}

Для того, чтобы при наведении изменялись стили класса, необходимо задать псевдокласс hover. Что я и делаю тут:

a. tvitter: hover{
background: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
transition: .3s;
}

А для того, чтобы картинка меняла положение — изменил координаты отображения.

Свойство transition — используется для задания скорости изменения положения. Я поставил 0,3 секунды.

Аналогичным способом необходимо задать положение для остальных элементов спрайта, двигая его на 118 рх для отображения RSS — иконки, и вернуть в 0 px для отображения иконки «ВК».

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

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

Что такое CSS спрайты?

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

Зачем это нужно? Спрайты снижают количество запросов к странице от пользователя и уменьшают общий размер изображений. В итоге посетитель быстрее увидит сайт.

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

Чтобы было понятнее приведу аналогию. Представьте что вы смотрите в замочную скважину. Вы видите только какой то отдельный кусок помещеняи по ту сторону двери. Если вы чуть сдвинетесь в сторону и будете смотреть в скажину под другим углом, то увидите какой то другой кусок того же самого помещения.

Терминология

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

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

Когда стоит использовать спрайты? Ответ в общем то один - спрайты нужно использовать если у вас на странице много мелких изображений. Неважно какие это изображения. Если у вас много градиентов с одинаковым расположением, много кнопок, много иконок и.д. Если на какой то отдельной странице много мелких изображений, то можно подумать над использованием спрайтов.

На странице как правило бывают три вида картинок - jpg, png и gif. У всех этих форматов есть два режима загрузки - это обычный режим и режим постепенной загрузки.

Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.

Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.

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

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

Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.

Примеры использования спрайтов

Спрайты с иконками

В одном спрайте у меня будут иконки для:

Списка - одна иконка
Ссылок - три иконки
Формы поиска - одна иконка

То есть первый набор спрайтов у меня будет содержать пять картинок. Все картинки у меня будут одинакового размера - 16 на 16 пикселей. Спрайтами можно делать изображения с разными разрешениями, не обязательно чтобы разрешение всех картинок совпдало. При разном разрешении картинок чуть усложняется объединени этих картинок в один файл.

В итоге первый пример будет выглядеть так:

Я нашел пять иконок. После чего просто объединил их все в одном файле. Вот такой вот файл у меня получился в итоге:

Обращаю ваше внимание. В данном случае иконки расположены не вплотную, между ними есть небольшие отступы. Как подобрать эти отступы? Можно конечно рассчитать все по пикселям, но наш случай довольно простой, поэтому здесь лучше всего подобрать эти отступы на картинке экспериментальным путем. Сначала объединяем изображения просто на глаз, потом берем самую верхнюю картинку, ставим ее на нужное место. Если картинка находится на своем месте, но при этом откуда то торчит кусок другого изображения, то значит отступ нужно увеличить.

Еще один момент. Последней в списке идет иконка для списка - зеленая стрелка. Почему она именно последняя? Расположение остальных иконок на картинке нам безразлично, но в списке любой пункт может занимать несколько строк и если зеленая стрелка будет где-то посередине, то на следующих строках будут торчать другие картинки. Посмотрите на картинку списка выше, чтобы понять о чем я говорю.

И так. Я нашел пять иконок, объединил их в один файл. Что делаем дальше? Разумеется пишем код:

Пункт списка
Еще один пункт списка
Пункт списка
Еще один пункт списка,
но в две строки
Пункт списка
Еще один пункт списка

Это html код списка. Теперь применим к нему наш спрайт:

Ul li{ padding:0 0 0 21px; background:url("sprites.png") 0 -94px no-repeat; }

Что мы тут сделали? Сделали отступ в каждом

от левого края в 21 пиксель, чтобы текст не заслонял картинку. Потом в качестве фоновой картинки ставим sprites.png. Высота всей картинки со спрайтами в данном случае 110 пикселей и зеленая стрелка находится в самом конце. Высота зеленой стрелки 16 пикселей, то есть стрелка начинается после 94-го пикселя от верха картинки. Это означает что фон мы должны сдвинуть на 94 пикселя вверх. В css коде это написано так «0 -94px», то есть сдвинули на 0 пикселей вправо и 94px пикселя вверх.

Закончим со списком. Теперь сделаем примерно так же ссылки:

A{ padding:0 0 0 20px; background:url("sprites.png") 0 -42px no-repeat; } a{ padding:0 0 0 20px; background:url("sprites..png") 0 -21px no-repeat; }

Что означают селекторы a? Очевидно данный селектор заставляет браузер применить данный стиль ко всем ссылкам, у которых есть атрибут href, значение которого начинается со строки http://сайт/. Сам спрайт применяется примерно так же, как и в случае со списком. Я рассмотрю только одну ссылку - ссылку на мой блог.

Определяем нужную ссылку по href.. Можно просто присвоить класс нужной ссылке или прописать стили в аттрибут style прямо в html коде. Или идентифицировать нужную ссылку любым другим методом.
Делаем отсуп от левого края у конкретной ссылки в 20 пикселей
Указываем в качестве фонового изображения картинку sprites.png
Картинка которую я подобрал для своего блога находится на расстоянии 21 пиксель от верхнего края, это означает, что фон мы должны сдвинуть на 21 пиксель вниз. В css я это прописал так «0 -21px»

Домашнее задание

Спрайты с градиентами

Теперь посмотрим второй пример.

На этой картинке изображено окошко. У окна есть заголовок, тело и подвал. У каждого из этих элементов на фоне установлен градиент. Присмотритесь если этого сразу не видно, там есть переход цвета от бледного к насыщенному.

Я покажу как граденты в этом окошке можно сделать спрайтами. Заголовок и подвал окна будут фиксированной высоты - 30 пикселей. Тело окна будет тянуться в зависимости от длины текста.

Теперь напишем html код окошка:

Начинаем применять спрайты. Начнем с заголовка окна:

#window-header{ height:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; }

В файле gradients.png сначала идет градент для заголовка, потом для тела и потом для нижней строки. То есть градент для заголовка начинается от самого верха. Поэтому мы просто ставим в качестве фона сам файл и позицию указываем как «0 0», то есть никуда не отступать. Чтобы градиент растянулся по горизонтали прописываем «repeat-x».

Чтобы градент целиком влез в зголовок, указываем высоту в 30 пикселей.

Точно так же как и заголовок поставим градиент для подвала:

#window-footer{ height:30px; background: #C0FFC0 url("gradients.png") 0 -60px repeat-x; }

Только на этот раз мы сдвинем картинку вниз на 60 пикселей.

С телом окошка ситуация сложнее. Тело у нас будет растягиваться, в отличии от заголовка и подвала. То есть если мы просто сделаем один div для тела окна и поставим туда градент, то в этом диве появятся сразу все градиенты. Как вариант можно поставить градиент для тела последним по вертикали, но что если у нас несколько градиентов для блоков, которые тянутся? Все сразу не сделаешь последними. Мы сделаем чуть хитрее.

CSS код будет следующий:

#window-body{ position:relative; } #window-body-gradient{ position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 -30px repeat-x; } #window-body-text{ position:relative; }

Теперь расскажу подробнее что мы тут сделали. Вот html код тела окна отдельно:

Как видите в тело у нас вложено еще два дива. Первый «window-body-gradient» будет отвечать за градиент. Второй «window-body-text» нужен для текста. Кроме того, как это понятно из CSS кода мы применили position:relative; для всего тела окна целиком.

Для градиентного дива мы указываем position:absolute. Таким образом мы выбили градиентный див из общего потока. Теперь этот див ни на что не влияет. Так как для всего тела целиком у нас указано position:relative, то градиентный див никуда дальше родителя не уплывает. Прикрепляем его к левому и верхнему краю тела окна с помощью «left:0; top:0;». Указываем высоту градиентного дива - 30 пикселей. То есть тут указываем высоту градиента который мы будем прикреплять, если высота дива будет больше высоты градиента, то в диве будут торчать другие спрайты. И наконец прикрепляем к градиентному диву наш файл gradients.png. Как обычно сдвигаем фон вверх на нужное расстояние, в данном случае сдвигаем фон на 30 пикселей вверх.

Теперь в теле окна у нас есть градиент. Но он заслоняет текст. Чтобы текст не заcлонялся обернем весь текст в див и присвоим ему position:relative. После присвоения текст будет поверх градиента.

Вот в общем то и все. Теперь мы расставили все градиенты в наше окошко. И в заголовок, и в тело, и в подвал.

Такие длинные пояснения я делаю, чтобы совсем все было понятно. Но на самом деле если вы немного разбираетесь в верстке, то вам наверное будет достаточно посмотреть сами примеры:

В очередной раз продублировал ссылку.

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

До того, как в CSS появился псевдокласс:hover , создание ролловера - элемента, который меняет свой вид при наведении курсора - реализовывалось через язык JavaScript. Сейчас это делается намного проще, но есть один недостаток: если в состоянии:hover (т. е. при наведении курсора на элемент) должно появиться какое-то фоновое изображение, то оно начинает загружаться в момент наведения курсора, а не при общей загрузке страницы.

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

Что такое спрайты CSS

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

Спрайт, в котором собраны все используемые иконки Спрайт со значками соцсетей и их вариациями для:hover

Преимущества CSS-спрайтов

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

Как создать спрайт из картинок

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

Ручной способ создания спрайтов - занятие довольно долгое. Поэтому, когда использование спрайтов стало набирать обороты, появились онлайн-сервисы по автоматическому созданию спрайт-листов, например, Spritegen , RetinaSpriteGenerator и другие. Вы загружаете необходимые изображения в отдельных файлах на сайт, и для вас генерируется спрайт, который вы сразу можете скачать на компьютер.

Как пользоваться спрайтами CSS

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

HTML-разметка выглядит следующим образом:

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

Переходим к CSS. Первым делом запишем общие стили для всех ссылок:

A { background-image: url(https://goo.gl/1t18Rz); background-repeat: no-repeat; height: 98px; width: 100px; display: inline-block; margin-right: 10px; }

Следующие две строки - высота и ширина каждого элемента . Каким образом определялись эти значения? Здесь мы отталкивались от размеров значков в спрайте. Высота каждой иконки равна 98 пикселям, а ширина - 100 пикселей. Далее мы будем позиционировать фоновую картинку для каждой ссылки, подстраивая фон таким образом, чтобы значок ровно вписался в «окошко» ссылки размером 98×100 пикселей.

A.facebook { background-position: left top; }

Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение top:

A.twitter { background-position: -100px top; }

Аналогичное действие мы проделаем для остальных ссылок, прибавляя к каждому последующему горизонтальному позиционированию еще 100 пикселей, тем самым сдвигая спрайт всё больше и больше влево. Получится такая картина:

A.youtube { background-position: -200px top; } a.instagram { background-position: -300px top; } a.linkedin { background-position: -400px top; } a.tumblr { background-position: -500px top; } a.google { background-position: -600px top; }

Результат работы данного кода показан на скриншоте ниже:

Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y:

A:hover { background-position-y: bottom; }

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

Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):

Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition):

A { transition: all 0.2s ease-out; }

Итак, теперь вы знаете, что такое спрайты CSS и чем они могут быть полезны. Помимо предотвращения задержек при загрузке фоновых картинок, использование спрайтов помогает снизить нагрузку на сервер. Кроме того, это удобный способ хранить все графические элементы интерфейса в одном месте.

Вот мы и разобрали основные методы стилизации ссылок. Рекомендуем вам дополнительно попрактиковаться, чтобы закрепить полученные знания. А следующая глава нашей книги посвящена CSS-анимации, реализация которой стала возможна благодаря свойствам, появившимся в CSS3. И в первом уроке мы разберем свойство трансформации -

Вы слышали об этом, но...

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

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

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

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

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

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

Каждое изображение на странице, будь оно в теге 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, а ниже предложенные.

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

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

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

Что такое CSS спрайты?

Представьте одну, большую картинку, на которой изображены все ваши иконки, разделители, кнопочки, стрелочки и прочие составляющие дизайна. Она грузится вместе с сайтом, все как обычно. Вот только не создает кучу запросов на все файлы, а исполняется одним запросом. Круто? Несомненно. После загрузки в нужном месте отображается нужная часть большой картинки.

Я где-то видел статистику (не вспомню, где, поэтому ссылочку не дам) — от 5 до 40% времени составляет собственно страницы, все остальное — обработка запросов сервером. Логично предположить, если уменьшится количество запросов — скорость загрузки вырастет пропорционально.

Давайте чуть подробнее рассмотрим плюсы и минусы использования спрайтов:

Плюсы использования спрайтов:

Минусы это технологии:

при верстке необходимо указывать не только картинку, но и позицию фрагмента, что не совсем удобно и привычно.
увеличение нагрузки на сервер. Большая картинка занимает больше оперативной памяти, учитывая «пустышки» между фрагментами.
для изменения одной иконки придется ковырять весь файл, что не слишком удобно. Хотя, может оно и к лучшему

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

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

Где создать спрайты?

Наверное, самый старый инструмент для создания CSS спрайтов. Отличительная черта — есть русский вариант интерфейса, это удобно. Хорошо настраивается, причем не только создание картинки, но и код CSS. В целом — отличный генератор, рекомендую. Кстати, кроме этого, сервис умеет генерировать фавиконы и рассчитывать права доступа для Unix систем.

CSS Sprites Generator

Этот генератор тоже неплох, имеет все необходимые настройки, генерирует на выходе файл чуть меньшего размера, чем предыдущий сервис. Отличительная особенность — удобный вывод кода CSS для каждого изображения.

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

Sass - это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.

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

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

Сервис написан на HTML5, работает только в Chrome и Firefox, но развитие таких сервисов радует. Веб не стоит на месте и это хорошо Очень простой, минимум настроек. Но, если вы хотите быстрое и простое решение — этот генератор подойдет на 100%

Генератор спрайтов для настоящих джедаев Установите программу, укажите путь к CSS файлу со старой версткой и этот сервис все сделает за вас. У него куча возможностей — рекомендую почитать документацию на официальном сайте.

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

Отличный сервис, который работает так — заходите на готовую, сверстанную как обычно, страницу. Жмете на иконку сервиса (предварительно ее нужно установить букмарклетом) и все — сервис собирает все изображения с этой страницы и генерирует спрайт с кодом. Очень удобно, есть настройки, что конкретно необходимо собрать в кучу. В общем — неплохой сервис.

Очень простой, но понятный и удобный генератор. Перетащите картинки, который нужно объединить, расположите их как вам хочется и нажмите кнопку — спрайт и код готовы. Минус этого сервиса — работает только в Хроме и Огнелисе.

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

Надеюсь, теперь вам не страшна работа с CSS спрайтами и ваши проекты будут еще быстрее.