Генератор CSS спрайтов Instant Sprite

Некоторое время назад в разделе новостей мной был анонсирован перевод интерфейса предыдущей версии генератора css спрайтов (css sprite generator) Instant Sprite – бесплатной браузерной программы, предназначенной для создания CSS спрайтов, реализующих новую прогрессивную технологию увеличения скорости загрузки веб-страниц. В этом обзоре я хочу более подробно рассмотреть процесс создания css спрайтов в этой программе и её возможности. Толчком к написанию этой статьи стало очередное обновление этой едва ли не лучшей программы для объединения картинок в css спрайты и их дальнейшего использования на веб-страницах. Ранее в статье «CSS спрайты» мной были рассмотрены ещё три программы для автоматического создания (генерации) спрайтов, которые позволяют легко и просто объединить изображения в спрайты CSS. В той статье мной упоминалась программа Instant Sprite и её возможности, но детального обзора я не делал. Здесь же я постараюсь раскрыть её ключевые функции и особенности. Несмотря на то, что считаю эту программу едва ли не лучшим генератором css спрайтов, я рекомендую заинтересованным пользователям перейти по вышеупомянутым ссылкам и ознакомиться с ними. Их содержание во многом перекликается с содержанием этой статьи и должно быть полезным для знакомства с css спрайтами и их практическим применением на веб-страницах. Кроме этого вас может заинтересовать статья аналогичной тематики «Создание css спрайтов в графическом редакторе Gimp», а также статья «Практическое применение css-спрайтов на сайте»

Несколько слов о css спрайтах и как использовать css спрайты. Основой метода является объединение множества фоновых картинок, размещённых на сайте в одну составную мозаичную картинку. Как правило, это различные логотипы, иконки, кнопки и другие графические элементы навигации, управления и визуального оформления сайта. Дальнейшее размещение css спрайтов на веб-странице осуществляется при помощи позиционирования средствами CSS с использованием свойства background-position. Изюминка этой технологии состоит в значительном уменьшении HTTP-запросов на загрузку изображений. Вместо множества (порой десятков и более) запросов на загрузку отдельных картинок остается всего один запрос на загрузку этой составной мозаичной картинки. Применение css-спрайтов намного увеличивает скорость загрузки картинок, поэтому сама страница, где они используются, открывается в браузере намного быстрее. Дополнительной фишкой этого метода является простая и удобная реализация rollover-эффекта изображений без использования скриптов для создания эффектных и стильных меню, кнопок управления и других графических элементов, применяемых на сайтах. Некоторые тонкости позиционирования css спрайтов на веб-страницах и их координат рассмотрены в предыдущей статье «CSS спрайты». Здесь я не буду повторяться, поэтому рекомендую прочитать упомянутую статью.

Вернёмся к теме этого обзора − бесплатной браузерной программе для создания css спрайтов Instant Sprite. Сразу оговорюсь, программа не работает в браузерах Internet Explorer (по крайней мере в IE6), о чём честно предупреждает при открытии в упомянутых браузерах.

скриншот Instant Sprite

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

скриншот Instant Sprite

За время, прошедшее с момента публикации предыдущего анонса этой программы, в ней исчезла неработающая опция оптимизации выходных изображений (отсутствовавшая, кстати, в онлайн-версии) и появилась опция сохранения изображения в формате Data URI. Наверное, что-то было доработано ещё. Опцию Data URI, я знаю слабовато и ещё нигде не использовал, поэтому рассматривать не буду. Однако замечу, что она в последнее время достаточно часто используется как ещё один метод представления графики на веб-сайтах. Обновленную версию программы Instant Sprite я также русифицировал (громко сказано, переведено всего несколько фраз и слов). Бесплатно скачать ее можно со страницы загрузки русификаторов.

Чтобы можно было оценить возможности программы Instant Sprite и сравнить их с возможностями других аналогичных программ по созданию css спрайтов сразу приведу список её характеристик и особенностей:

  • Веб-интерфейс программы (работать можно в любой ОС, достаточно открыть индексный файл в браузере)
  • Простота, продуманность и интуитивность интерфейса
  • Удобство использования
  • Возможность загрузки сразу нескольких файлов из системного диалогового окна
  • Возможность загрузки файлов методом перетаскивания
  • Возможность тестирования программы с помощью демонстрационных изображений
  • Просмотр и управление загруженными файлами (сортировка, удаление)
  • Множество входных форматов изображений (нужные gif, png, ico; ненужные bmp, jpeg и др.; файлы Фотошопа psd не поддерживаются)
  • Возможность задания необходимого смещения изображений
  • Задание необходимого расположения изображений в спрайте (вертикальное, горизонтальное, диагональное!!!)
  • Автоматическое создание CSS и HTML для спрайта
  • Возможность задания своих имен классов, css-префиксов и суффиксов и пр.
  • Возможность прямой корректировки CSS и HTML в окне программы
  • Немедленное отображение внесенных изменений
  • Копирование CSS, HTML и самого спрайта прямо из окна программы
  • Предварительный просмотр созданного спрайта
  • и многое другое…

Как работать с Instant Sprite? Очень просто. Скачиваете программу с сайта проекта на Гитхабе или переведенную программу с моего ресурса на странице загрузки русификаторов. Распаковываете zip-архив в любую удобную папку, открываете папку site и запускаете в браузере файл index.html (испытать возможности и поработать можно и на онлайн-сервисе программы).
Если вы всё правильно сделали и используете современный браузер, то в его окне вы увидите следующую картинку.

Интерфейс Instant Sprite

Для знакомства с программой воспользуемся третьей предлагаемой опцией и посмотрим её в работе. Я разделю скриншот, иллюстрирующий работу программы, на несколько частей для удобства просмотра и описания функций Instant Sprite.
Начнём. Щёлкаем по ссылке, реализующей третью опцию – испытание возможностей программы с помощью демонстрационных изображений. Программа загружает имеющиеся в её составе демо-картинки и представляет во всей красе результаты своей работы.

Миниатюры

На этом скриншоте представлены демо-изображения в виде списка с указанием их параметров (вид, имя, тип и размер). С левой стороны имеются значки удаления соответствующих картинок из списка. При наведении курсора мыши значки меняют цвет, кроме этого строка активного (удаляемого) изображения окаймляется точечной рамкой. Это достаточно удобно для визуального восприятия. Если сместить указатель мыши со значка удаления, то он приобретает вид четырехглавой стрелки (индикатор перемещения). Нажав левую кнопку мыши можно легко переместить активное изображение на другое место в списке. Этим обеспечивается сортировка изображений в нужном порядке.

Параметры

В этой части программы, показанной на скриншоте выше, можно задать параметры выходного спрайта: промежуток между изображениями, компоновку спрайта и формат файла спрайта. Небольшое отступление: как я не пытался получить спрайт в формате GIF мне это не удавалось. Это наблюдалось и на онлайн-сервисе и в оффлайн-версии программы, и в предыдущей версии, и в этой. Выходной файл всегда был в формате PNG 32 бит. Для нормального использования спрайта при отображении в старых браузерах, которые в должной мере не поддерживают прозрачность PNG, желательно перевести файл в 8-битовый формат с сохранением прозрачности. Очень удобно это делать в программе Riot. В нескольких других программах, которые я использовал для этих целей, преобразовать PNG с нужными параметрами было сложнее или результат преобразования был далек от необходимого. В этом разделе вы можете попробовать изменить все параметры и наблюдать интерактивное изменение выходного спрайта (промежутки между картинками, компоновка). О назначении промежутков (смещений, отступов) между картинками я говорил в предыдущих статьях и повторяться не буду.
Установим параметры, как указано на скриншоте и продолжим.

Спрайт

Дальше мы видим выходной спрайт в выбранной компоновке (горизонтальной) и две возможные опции.

  • Открыть изображение в новом окне – при щелчке по этой опции спрайт открывается в новом окне (вкладке) вашего браузера. Эта опция позволяет скопировать спрайт для дальнейшего использования как с помощью контекстного меню браузера, так и из главного меню (всё это можно сделать и в основном окне программы).
  • Скопировать Base64 – эта опция работает только при открытии программы под локальным сервером и позволяет скопировать спрайт в формате, необходимом для использования в Data URI. Для многих пользователей эта опция будет не востребована, а кому-нибудь может пригодиться. Скриншот этого раздела программы под локальным сервером приведён ниже.
Спрайт

Также под локальным сервером нормально открывается страница ЧаВО, которую я переводить не стал, как и не стал править пути для нормального открытия этой страницы при работе программы не под локальным сервером. При желании эту страницу можно открыть автономно из папки FAQ.

Следующий раздел, представленный на скриншоте ниже, даёт возможность выбрать варианты использования спрайтов на веб-страницах.

Использование спрайта
  • Верхняя нотация информирует пользователя о возможности применения регулярных выражений при использовании спрайтов и дает ссылку на RegExp для знакомства с регулярными выражениями.
  • Следующая строка красноречиво говорит о том, что мы можем применить при создании стилевого файла для реального использования спрайтов. Попробуйте что-нибудь применить (кроме префикса CSS) и посмотрите на интерактивное изменение стиля, приведенного ниже. Подсветкой на скриншоте я выделил опции, которую предлагает программа по умолчанию. Не обращайте внимания на красные подчеркивания в листинге, у меня в этот момент была включена в браузере проверка орфографии и спеллер подчеркнул незнакомые слова.
  • Далее приведен стиль для использования спрайтов. Зеленой подсветкой я выделил ссылку на мастер-спрайт, в котором вы можете увидеть размеры каждой картинки, входящей в него. Они одного размера 16х16 и поэтому достаточно задать размеры только здесь. В случае использования в спрайте разноразмерных картинок стиль будет несколько иной – размеры будут прописаны в стиле для каждой картинки. (Пример на скриншоте ниже.)
Скриншот стиля
  • Дальше показан кусочек html-разметки для использования спрайтов на веб-страницах.

Последним идет раздел предпросмотра, который отображает наш спрайт на веб-странице в соответствии со стилем и разметкой приведёнными выше. Естественно, вы можете применить собственную HTML-разметку, опираясь на предложенный стиль.

Спрайт на странице

Вот и всё, что я хотел рассказать об Instant Sprite. Загрузка в программу реальных изображений как поодиночке, так и множественным выбором проста и не вызовет затруднений, поэтому её я освещать не стал. Пользователям, которые только начинают осваивать css спрайты, рекомендую просмотреть все страницы моего ресурса, затрагивающие эту тему.
Вот ссылки на них в порядке публикации:

Если статья вам понравилась, поделитесь с друзьями.