Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

CSS спрайты (sprites sheet) — способ ускорения загрузки сайта

CSS спрайты (CSS sprites sheet) — специальные таблицы, состоящие из множества маленьких изображений, объединенных в одно большое, благодаря чему все иконки, необходимые для оформления сайта загружаются одним HTTP запросом.

CSS спрайты (sprites sheet) — способ ускорения загрузки сайта

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

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

Очень часто необходимость CSS спрайтов появляется при использовании отличающихся иконок, в зависимости от наведения курсора мышки — например, сначала у кнопки один фон (например, черно-белый), а при наведении мышки он должен поменяться на активный (например, то же изображение, только цветное), но дело в том, что изображение, соответствующее "активному фону", будет подгружаться не заранее, а только в момент наведения курсора, а значит есть вероятность, что произойдет это не моментально, как нужно, а с некоторой задержкой, тогда посетитель сайта на мгновение увидит пустое изображение, которое через секунду-две загрузится и резко откроется. Тогда эстетике будет нанесен значительный урон, а этого же никто не хочет, верно?

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

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

После того, как спрайт готов, необходимо понять, как им пользоваться. Все очень просто — нужно просто задать фиксированный размер для блока, в котором он будет использоваться. Размер блока должен быть равен размеру одной иконки, необходимой для оформления. Ключевым моментом в данном процессе является использование такого замечательного CSS свойства, как background-position, благодаря которому можно смещать фоновое изображение относительно видимой его части. Получается, что у нас как бы есть маленькая прямоугольная дырочка на экране, размер которой равен размеру одной иконки, а слоем ниже находится фоновое изображение (собственно наш с вами CSS спрайт), которое мы незаметно перемещаем так, чтобы в окошке показывалась именно та иконка, которая нам нужна в данный момент

Вот простейший пример использования CSS спрайта при наведении мышки на элемент:

.sprite-button {
	background: url(/i/css-sprite-20.png) 0 0 no-repeat;
}
.sprite-button:hover {
	background: url(/i/css-sprite-20.png) 0 -32px no-repeat;
}

Как видите, мы просто поднимаем спрайт вверх на 32 пикселя и при наведении мышки на элемент с классом sprite-button, его фоновое изображение меняется, хотя при этом используется только одно изображение css-sprite-20.png. При этом, если вы считаете, что лучше будет загрузить несколько маленьких изображений, чем одно большое, то вы сильно заблуждаетесь. Браузер ограничивает число одновременных HTTP запросов, поэтому, чем их будет меньше на вашем сайте, тем лучше. Именно по этой причине иногда объединяют все CSS файлы в один, стремясь минимизировать число обращений к серверу.

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


Предыдущая статья:
CSS градиент фона двумя способами — линейный градиент и внутренняя тень

Читайте также:
Увеличение частоты посещения сайта поисковым роботом


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»