Лёгкий способ создания спрайтов

Если вы когда либо использовали Page Speed от Google или YSlow от Yahoo для оптимизации сайтов, то скорее всего видели совет «Используйте CSS спрайты».

CSS спрайты позволяют снизить количество HTTP запросов за счёт компоновки всех изображений в одном файле. Этот файл вы можете показывать на страницах, используя его в качестве фона. Задав ширину и высоту элемента,можно установить фон с нужной позицией, background-position, при котором будет видна только нужная часть всего большого изображения.

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

Сложность создания спрайтов в компоновке, особенно если очень много файлов, например иконки для online игры.  Доступно множество иконок и вставка их в один документ — весьма трудоёмкая задача.

К счастью есть CSS Sprite Generator, который принимает сжатый файл с иконками и выдаёт Вам спрайт.

CSS Sprite Generator так же может фиксить баг, связанный со старыми версиями Opera, изменять ширину и высоту входящих изображений и генерировать CSS классы для применения их к нужным элементам.

————————————————————————————————————

Вольный перевод, источник http://www.webmonkey.com/2011/06/create-image-sprites-the-easy-way/