Технология спрайтов является развитием классического метода с использованием растровой графики, но с рассчетом на более современные браузеры и CSS технологии.
Сутьт метода такова, что все иконки размещаются в одном файле и далее, уже с помощью CSS выбирается участок изображения с нужной иконкой и привязывается к какому-нибудь стилю элемента.
Техническая реализация не очень сложна и состоит из 2-х этапов: подготовка спрайта и подготовка CSS стиля.
Готовим спрайт
Приближенно прикидываете, сколько у Вас иконок одинакового размера (например 16х16), для каждого размера придется делать отдельный спрайт.
Далее, (например) у нас 30 штук иконок 16х16, надо сделать из них спрайт.
Для этого, в графическом редакторе создаем пустой PNG или GIF файл с прозрачным фоном. Размер файла зависит от к-ва иконок и их размера и от того, как Вы их (иконки) будете размещать. Можно в клетку, а можно и в столбик. Я например всегда использовал "в столбик", ибо потом меньше волокиты с координатами в CSS.
Поле нашей картинки мысленно надо разбить на клетки, в каждой из которых потом будет иконка. Размер клетки берется с небольшим запасом (заведомо больше, чем иконка). Для иконок 16х16 пикселей, я обычно делаю клетку 20х20.
Итого, у нас 30 иконок 16х16, размещать их будем в столбик, в клетках 20х20.
Посему, размер нашего пустого файла должен быть 20px шириной и 600рх высотой (30 клеток по 20 пикселей).
В работе Вам очень помогут продвинутые графические редакторы, которые позволяют устанавливать гайдлайны (guidelines), там Вы сразу сможете их поставить с интервалом в 20 пикселей. Зато потом очень легко будет размещать иконки.
Ну и потом, размещаете все нужные иконки в каждой клетке.
Сохраняем файл (в нашем примере это будет sprite.png)
Готовим CSS стиль
В стиле нам надо к чему-нибудь привязать иконки. Это может быть например <span> или, что чаще делают <i>, что мы в нашем примере и реализуем.
Тэг <i> будет являться контейнером для наших иконок и его надо предварительно подготовить.
Важные параметры:
display: inline-block;
background: url('sprite.png') no-repeat;
width: 20px;
height: 20px;
Ширину и высоту контейнера мы указываем так, как у наших клеток для иконок, о которых мы говорили выше.
Ну и далее, надо описать собственно иконки.
Пример:
i.guestbook {background-position: 0 -40px;}
В качестве параметра мы указываем координаты начала нашей клетки с нужной иконкой.
Учтите, что вычисление координат идет с верхнего левого угла изображения.
У самой первой иконки координаты будут 0 0
Ну и далее, ко второму параметру добавляете по 20, так Вы постепенно перечислите все ваши иконки.
З.Ы. Для лентяев и быдлокодеров:
Хочу добавить, что в сети есть полно сайтов-сервисов, где спрайт, вместе с CSS файлом подготовят за Вас. Просто подготовьте отдельные иконки, загрузите туда и получите готовый вариант.
Достоинства
Уменьшается число HTTP запросов, снижается нагрузка на сервер и ускоряется загрузка страницы.
Иконки задаются с помощью стилей, поэтому значительно уменьшается HTML код.
Легко реализовать смену "тем" оформления.
Недостатки
При масштабировании теряется качество, особенно актуально для современных дивайсов с HD экранами.
Более сложный процесс подготовки
Для иконок другого размера надо делать отдельный спрайт, или же колдовать со стилями.