Спрайты CSS — что это и зачем нужны. Пример. Онлайн сервисы для генерации спрайтов CSS

Для начала краткое вступление. При загрузке странице браузерам допускается только 2 запроса к серверу (у современных браузеров это число увеличилось до 6). Каждый элемент сайта будь то файл с таблицей стилей, файлы javascript, картинки являются независимыми загрузками, которые требуют отдельного запрос на сервер.

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

Еще давным-давно (2003-2004) было предложено решение этой ситуации с главной целью ускорить загрузку сайта с помощью уменьшения количества запросов к серверу. Это технология получила название "Спрайты".

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

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

Например, вместо 10 картинок грузится одна, но побольше. При грамотном распределение это ускоряет работу сайта. Однако здесь главное не переусердствовать. Не всегда объединение картинок дает преимущество в загрузке сайта.

Пример спрайта CSS

Рассмотрим небольшой пример реализации спрайта CSS. Допустим, мы сделали следующую картинку из трех отдельно взятых стрелочек.

Чтобы обратится к нужной стрелке в CSS надо прописать

<html>
<head>
<style>
	.strelka {
	width: 15px;
	height: 15px;
	float: left;
	background: url(strelka.jpg) no-repeat;
	}
	.yellow .strelka{ 
	background-position: 0 0px;
	}
	.green .strelka{ 
	background-position: 0 -15px;
	}
	.blue .strelka{ 
	background-position: 0 -30px;
	}
</style>
</head>
<body>
<div class="yellow">
	<div class="strelka"></div>
</div>
<div class="green">
	<div class="strelka"></div>
</div>
<div class="blue">
	<div class="strelka"></div>
</div>
</body>
</html>

Вот как это выглядит на странице:

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

Чтобы вырезать значок RSS мы должны написать следующие отступы

background-position: -90px -40px;

В примере мы подняли изображение на 40 пикселей вверх и на 90 влево.

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

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

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

Онлайн сервисы для создания спрайтов CSS

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

http://www.spritebox.net/

http://draeton.github.io/stitches/

← Перейти в каталог CSS уроков