Эта статья - обзор генератора css спрайтов Instant Sprite - бесплатной браузерной программы, предназначенной для создания CSS спрайтов, реализующих новую прогрессивную технологию увеличения скорости загрузки веб-страниц.
Программа разработана Брайаном Гринстедом (Brian Grinstead) - автором еще нескольких хороших программ для веб-разработчиков. Назначение программы: создание CSS спрайтов, и эту задачу программа выполняет просто, элегантно и эффективно. Программа бесплатная, с открытым исходным кодом, распространяется по MIT-лицензии. Скачать Zip-архив программы Instant Sprite можно на https://github.com/bgrins/InstantSprite
Толчком к написанию этой статьи стало очередное обновление этой едва ли не лучшей программы для объединения картинок в css спрайты и их дальнейшего использования на веб-страницах. В статье рассматриваются ее ключевые функции и особенности.
Несколько слов о css спрайтах и их использовании. Основой метода является объединение множества фоновых картинок, размещенных на странице в одну составную мозаичную картинку. Как правило, это различные логотипы, иконки, кнопки и другие графические элементы навигации, управления и визуального оформления сайта. Дальнейшее размещение css спрайтов на веб-странице осуществляется при помощи позиционирования средствами CSS с использованием свойства background-position. Изюминка этой технологии состоит в значительном уменьшении HTTP-запросов на загрузку изображений. Вместо множества (порой десятков и более) запросов на загрузку отдельных картинок остается всего один запрос на загрузку этой составной мозаичной картинки. Применение css-спрайтов намного увеличивает скорость загрузки картинок, поэтому сама страница, где они используются, открывается в браузере намного быстрее. Дополнительной фишкой этого метода является простая и удобная реализация rollover-эффекта изображений без использования скриптов для создания эффектных и стильных меню, кнопок управления и других графических элементов, применяемых на сайтах.
Вернемся к теме этого обзора − программе для создания css спрайтов Instant Sprite. Сразу оговорюсь, программа не работает в браузерах Internet Explorer (по крайней мере, в IE6), о чем честно предупреждает при открытии в упомянутых браузерах. Кроме этого для нормальной работы программы в браузере должна обеспечиваться поддержка Javascript.
Чтобы можно было оценить возможности программы Instant Sprite и сравнить их с возможностями других аналогичных программ по созданию css спрайтов сразу приведу список ее характеристик и особенностей:
- Веб-интерфейс программы (работать можно в любой ОС, достаточно открыть индексный файл в браузере)
- Простота, продуманность и интуитивность интерфейса
- Удобство использования
- Возможность загрузки сразу нескольких файлов из системного диалогового окна
- Возможность загрузки файлов методом перетаскивания
- Возможность тестирования программы с помощью демонстрационных изображений
- Просмотр и управление загруженными файлами (сортировка, удаление)
- Множество входных форматов изображений (нужные gif, png, ico; ненужные bmp, jpeg и др.; файлы Фотошопа psd не поддерживаются)
- Возможность задания необходимого смещения изображений
- Задание необходимого расположения изображений в спрайте (вертикальное, горизонтальное, диагональное!!!)
- Автоматическое создание CSS и HTML для спрайта
- Возможность задания своих имен классов, css-префиксов и суффиксов и пр.
- Возможность прямой корректировки CSS и HTML в окне программы
- Немедленное отображение внесенных изменений
- Копирование CSS, HTML и самого спрайта прямо из окна программы
- Предварительный просмотр созданного спрайта
- и многое другое...
Возможности программы впечатляют и обеспечивают быстрое, полностью контролируемое и управляемое создание css спрайтов.
Мой русификатор предыдущей версии программы Instant Sprite можно найти на странице этого ресурса http://www.softforfree.com/programs/perevod_interfeysa_programmyi_instant_sprite-32287.html
К сожалению условия публикации статьи оставляют за рамками многие вопросы создания css спрайтов в программе и их применения на веб-страницах. Заинтересованные читатели могут найти на моем сайте полную версию статьи, проиллюстрированную множеством скриншотов.
