Если на странице сайта используется несколько картинок, то сервер тратит на них свои ресурсы, посылая http запрос к каждой из них. Это приводит к нагрузке на сервер и увеличению времени загрузки страницы сайта. Чтобы, в таком случае, снизить количество запросов и увеличить скорость загрузки страницы сайта, используется техника css-спрайтов, когда несколько маленьких картинок объединяются в одну большую.

Для чего ещё необходимо использование css-спрайтов? Если Вы стараетесь максимально ускорить загрузку Вашего сайта, то наверняка использовали сервис от Google — PageSpeed Insights. При проверке данным сервис страницы Вашего сайта можно будет увидеть сообщение — «Объедините изображения в CSS-спрайты». Так вот, чтобы это сообщение исчезло и Вы повысили на пару баллов значение PageSpeed Score и необходимо овладеть техникой создания css-спрайтов.

Наиболее полезным и типичным примером необходимости использования техники css-спрайтов является использование на странице сайта нескольких иконок социальных сетей. Например, у меня на сайте используется 5 иконок социальных сетей и 1 иконка feed-rss. Итого получается 6 картинок. Получается сервер посылает к каждой картинке 1 запрос и в итоге получается 6 запросов. Нас это не устраивает и мы объединим все 6 картинок в одну. Об этом ниже.

Техника объединения изображений в css-спрайт

Существует много сервисов, предназначенных для объединения изображений в css-спрайты, не говоря уже о том, что это можно делать и самому в photoshop. Я попробовал на практике несколько сервисов, но больше всех понравился вот этот. Он имеет все необходимые настройки и при этом генерирует на выходе необходимый CSS код.

Для начала работ  я подготовил все 6 иконок в PNG формате (Рисунок 1).

Иконка Вконтакте
Иконка Твиттер
Иконка Facebook
Иконка Google+
Иконка Youtube
Иконка feed-rss

Рисунок 1

Далее выставляем необходимые настройки в сервисе spritegen.website-performance.org (рисунок 2):

[servi-spritegen.website-performance.org]

  • Build Direction я выбираю Horizontal (в выходном спрайт-изображении все 6 картинок будут расположены горизонтально);
  • Cмещение по горизонтали: 5 px (картинки будут смещены друг от друга в выходном спрайт-изображении на 5 пикселей);
  • Смещение по вертикали: 5 px.

Остальные настройки оставляем по умолчанию. Но Вы, конечно, можете сами поэкспериментировать с остальными настройками.

Сервис работает с упакованными в ZIP файлами. Поэтому все 6 картинок я сжимаю в ZIP и загружаю в данный сервис. Далее нажимаем «Создать спрайт изображение и CSS».

На выходе получаем спрайт изображение (рисунок 3).

[sprite-izobrajenie]

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

Чтобы встроить спрайт изображение на сайт нужно написать соответствующий HTML и CSS код. Как это сделано у меня Вы можете узнать посмотрев видео (при просмотре выберите качество 720 hd!).

[css-sprite-video-urok]