Используем спрайты и снижаем количество запросов к серверу

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

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

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

Для создания спрайта (sprite) нам необходима картинка, которая будет включать в себя все необходимые элементы. Посмотрим на картинку:

На данном изображении у нас представлены иконки навигации, которые мы объединили в коллекцию. Далее данные иконки показываются через следующие CSS объявления:

.nave {height:23px;background:url('img/anav.gif') no-repeat 0 0;}
.home {height:23px;background:url('img/anav.gif') no-repeat 0 -23px;}
.mail {height:23px;background:url('img/anav.gif') no-repeat 0 -46px;}

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

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