Этот инструмент позволяет автоматизировать процесс создания CSS спрайтов. Просто дайте ему ZIP файл, содержащий 2 и более изображений (GIF, PNG или JPG), и он будет генерировать спрайт-изображение и соответствующие правила CSS для ориентации и отображения каждого элемента изображения.

Настройки

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

Изменение размеров исходных изображений

Ширина и Высота
Если ширины или высоты установлены менее чем на 100% исходных изображений, то они будут уменьшены в размере прежде чем будут скопированы в получаемое изображение. Этот инструмент не позволяет установить размер более чем 100%, так как увеличение размера изображений приводит к снижению качества получаемого изображения. По умолчанию ширина и высота составляют 100% (без изменения размера).

Дубликаты изображений

Игнорировать дубликаты изображений
Повторяющиеся картинки копируются в получаемое изображение и отдельные CSS правила создаются для каждого дубликата.
Удалить повторяющиеся изображения, но объединить правила
Инструмент сравнения MD5 по содержанию каждого изображения точно определит те из них, которые являются точной копией другого, содержащегося в ZIP. Эти дубликаты удаляются и CSS правила для них объединены в одно правило.

Настройки получаемого спрайта

Смещение по горизонтали
Эта величина определяет горизонтальное расстояние между рядами изображений в получаемом спрайт-изображении. Эта величина должна быть достаточно большой, чтобы учесть ошибку повторения фона в Safari Мы рекомендуем придерживаться значений по умолчанию.
Смещение по вертикали
Эта величина определяет вертикальное расстояние между каждым следующим изображением. Эта величина должна быть достаточно большой, чтобы принять во внимание увеличение размер шрифта пользователем. Мы рекомендуем вам проектировать свой сайт так, чтобы посетители могли увеличить размер шрифта в два раза прежде, чем следующее фоновое изображение станет видимым.
Обернуть колонки для исправления ошибки Opera
Opera 9.0 и ниже имеет ошибку, которая влияет на CSS смещения фона менее чем -2042px. Все значения, меньше чем это, рассматриваются как -2042px. Когда эта настройка выбрана Генератор CSS Спрайтов создаёт новую колонку каждый раз, когда вертикальное смещение достигает -2000px.
Цвет фона
Устанавливает цвет фона для получаемого изображения. Эта область содержит 6-ти значное значение шестнадцатиричной насыщенности цвета. Если оставить пустым и получаемый формат установлен GIF или PNG, то фон будет прозрачным.
Получаемый формат
Поддерживаются GIF, PNG и JPG. GIF и PNG может быть с прозрачным фоном. По умолчанию используется PNG.
Количество цветов
Ограничивает количество цветов, используемых в получаемом файле для сокращения общего размера файла. Этот параметр применяется к PNG и GIF.
Качество изображения
Укажите качество получаемого изображения в процентах. Этот параметр применяется только в формате JPEG.
Сжать изображение с OptiPNG
Когда отмечено, то получаемый файл обрабатывается с помощьюOptiPNG в целях дальнейшего снижения его размера. Часто это будет в два раза меньше от исходного размера файла. Этот параметр применяется только к PNG.

Настройки получаемого CSS

CSS префикс
Каждое полученное CSS правило начинается с введённого текста. Поддерживается добавление селекторов id и class. Следующие символы разрешены - a-z, 0-9, _, -, # и .
Согласование образца имени файла
Любые действительные регулярные выражения могут быть использованы. Оберните в круглые скобки часть, которую вы хотите извлечь из имени файла каждого изображения. Будет использоваться в качестве основы для расположения имён класса.
Префикс класса
Введённый текст будет добавлен перед каждым полученным именем класса. Особенно важно, чтобы полученные имена классов не начинались с цифры, поскольку это приведёт к недействительности селектора (как определено в рекомендации W3C). Следующие символы разрешены - a-z, 0-9, _ и -. Префикс не может начинаться с цифры.
CSS суффикс
Введённый текст будет добавлен в конце каждого правила CSS. "CSS суффикс" позволяет те же символы, что и "Префикс класса".