Генераторы css спрайтов + подробное описание сути спрайтов

Здравствуйте. В этой статье я хочу поделиться генераторами css спрайтов, а также подробно описать, для чего они нужны в сайтостроении (спрайты, а не генераторы).

Для начала хочу поделиться с вами ссылками на генераторы. В частности, я выбрал 3, вот такие:
SpritePad
SpriteWizard
Inettools
Я не буду объяснять, как работает каждый из них. Там все интуитивно понятно если вы уже знаете суть работы со спрайтами. Если нет, то сейчас я расскажу. Кстати, самым простым генератором я считаю SpriteWizard.

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

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

Когда спрайт готов, нужную иконку отображают в нужном месте следующим образом:

1. Создают маленький блок с фиксированными размерами, как у одной иконки.
2. Задают в качестве фона изображение-спрайт, после чего с помощью позиционирования фона (background-position) задают нужные координаты, чтобы показывалась именно нужная иконка.

Вот так вот все достаточно просто. Естественно, для этого нужно понимать, как работает свойство background-position.

Для чего нужны спрайты?

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

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