Для того чтобы сделать спрайт (sprite) изображения есть не мало сервисов онлайн, но это не всегда удобно, при разработке дизайна на своем локальном сервере. Необходимо чтобы все инструменты были под рукой. Я нашла дистрибутив одного из хороших генераторов спрайт изображений, попробовала установить его на локаль и мне это удалось. Поэтому хочу поделится с вами инструкцией установки на Denwer и русифицированной версией генератора CSS Спрайтов.

Скачайте приложенный ниже архив. Распаковываем в папку home содержимое архива. В нем вы найдете файл unzip.exe который вам нужно положить в бинарники денвера, а именно в /usr/bin/. Так же дополнительно может потребоваться optipng для оптимизации сгенерированных изображений, но этим надо очень умело пользоваться, так как после оптимизации изображение может быть большего размера и с неправильной цветовой гаммой. Мне еще не требовалось использовать optipng — изображения получались меньшего размера чем суммарный размер исходных изображений. Этот файл (optipng.exe) нужно положить в /usr/local/bin/.

Примечание: не создавайте папку www — она там уже есть!

Более подробная инструкция по установке и дополнительная информация находится в файле readme-ru.txt.

Возможности генератора

• Изменение размера исходных изображений в %
• Задание горизонтальных и вертикальных отступов в генерируемых изображениях
• Установка цвета фона или прозрачность
• Форматы получаемого изображения: GIF, PNG, JPEG
• Установка количества цветов для изображения
• Установка качества изображения в %
• Сжатие изображения с помощью OptiPNG
• Задание префиксов, суффиксов и классов для CSS

Зачем использовать CSS спрайты?

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

«Не отходя от кассы…»

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