Генератор спрайтов css: Генератор Css спрайтов

03.10.1992 alexxlab

Содержание

Удобный генератор CSS спрайтов / Хабр

Каким должен быть инструмент, чтобы в нем было удобно создавать и редактировать CSS спрайты? У каждого будет свой ответ на этот вопрос, а я всего лишь поделюсь своими соображениями и продемонстрирую свой генератор спрайтов.

По большей части моя работа со спрайтами сводилась к следующему:

Итак, начнем с самого начала

Краткая история

Прошлое

Давным-давно я верстал сайты. Начальство требовало ускорить загрузку страниц и поэтому я начал объединять картинки в спрайты.

В Photoshop я резал макет на части и затем объединял их с помощью PHP скрипта. Честно, я был удивлен, что в Photoshop нельзя объединить выделенные области в один файл, но в любом случае ожидать от редактора изображений еще и автоматической генерации стилей — уже явный перебор. Я простил разработчиков ~~за такой скудный функционал~~ и написал php скрипт, который генерировал спрайты и файл со стилями.

Сайтов было много, и скрипт существенно ускорял мою работу. Причем правила группировки я писал один раз для одного сайта. Если менялся макет, а области оставались на том же месте, то я просто подсовывал скрипту новую картинку и он заново все генерировал.

Признаюсь, был один недостаток в таком подходе. Качество картинок, которые выдает PHP мягко говоря «не очень». Поэтому я настраивал скрипт таким образом, чтобы в стилях расширения файлов были jpg, png, gif, а картинки генерировались в BMP формат. И потом я вручную конвертировал в нужный формат с помощью Photoshop.

Настоящее

Спустя много лет мне опять пришлось сверстать макет с помощью спрайтов. И тут мне стало интересно. Что появилось за это время для упрощения процесса?

Photoshop опять меня не порадовал. Зато генератор спрайтов появился в Fireworks CS6. Но просмотрев несколько видео и статей, я понял, что он мне не подходит, так как не выполняет всех моих требований.

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

Каким я вижу генератор спрайтов

Если коротко, то генератор спрайтов должен:

Уметь разрезать исходные картинки на части
Уметь соединять порезанные части в спрайты
Одновременно генерировать стили
Главное — иметь удобный графический интерфейс

Ранее соединял картинки и генерировал стили мой PHP скрипт, я лишь прописывал для этого правила. Но сейчас мне показалось этого мало. Как минимум настройка правил в текстовом редакторе уже устарело. Сейчас все должно управляться кнопочками и настраиваться с помощью графического интерфейса.

Но раз уж делать графический интерфейс, то и Photoshop особо не нужен. Выделение областей и разрезание картинки — задача тривиальная для javascript и HTML5.

Все эти четыре пункта явно хотят объединиться в один единственный редактор.

А для редактора очень важно сохранять проект на случай если потом нужно будет что-то подправить.

Как видно, в файл проекта должны сохраняться все исходные картинки и все правила разбивки, объединения картинок и генерации стилей.

Теперь остановимся на графическом интерфейсе. В нем должно быть следующее:

Кнопочки для открывания картинок, правил или всего проекта.
Кнопочки для сохранения результата и проекта.
Настройка правил разбиения картинки на области. То есть: пользователь выделяет области, видит список областей, может их редактировать.
Настройка правил группировки областей в спрайт. Тут должна быть возможность указать в каком месте спрайта должна быть картинка
Настройка правил генерации стилей. Для каждой картинки в спрайте должны настраиваться способ генерирования стилей: генерировать или нет ширину, высоту, repeate-x, repeate-y, no-repeate, имя класса

Главное — при добавлении картинок в проект должны генерироваться некие стандартные правила, чтобы избавить пользователя от лишних действий по настройке. Например, добавили мы иконку «firefox.png». Программа должна автоматически создать область «firefox» (на всю ширину и высоту) и стиль:
.firefox{ width:16px; height:16px; background: url('data:image/png;base64,.....==') 0px 0px no-repeat; }
И потом уже мы можем переместить область в другой спрайт или отредактировать генерацию стилей.

Обзор решений

Теперь кратко, почему мне не подошли существующие решения.

Compass — написан на Ruby. Пишутся стили с особым синтаксисом и программа потом генерирует обычные стили со спрайтами.
Lemonade — суть такая же и на сайте написано что он теперь встроен в тот же Compass.
Glue — командная строка для генерации спрайтов.

Эти инструменты я сравнил с тем что у меня было более пяти лет назад, когда я прописывал правила в php скрипте и он генерировал спрайты. Но сейчас мне уже хотелось именно визуальный редактор.

SpriteMe — перетаскиваем ссылку в букмарклет и потом можно редактировать спрайты на просматриваемом сайте.

Но мне не нужно редактировать спрайты на существующем сайте. Мне нужен редактор на этапе, когда сайт еще верстается.

Spritepad — методом drag-and-drop перетаскиваем картинки на спрайт и справа выводятся все стили. Уже ближе к тому что я хотел. Но почему только drag-and-drop? Неужели сайт лишь демонстрирует новую фичу браузеров? Мне не всегда удобно перетаскивать, я хочу добавлять картинки через обычную кнопку «Открыть». Картинки сохраняются только в PNG? Нельзя создавать одновременно несколько спрайтов? Все-таки этот генератор сильно прост.

Sprite Cow — интересная штука. Если у вас уже есть готовый спрайт, то Sprite Cow поможет вам выделить отдельные области и сгенерировать для них css правила. Но css генерируется только для одной выделенной области. То есть если у вас куча иконок, то нужно каждую выделять и копировать css в ваш редактор стилей. В общем, идея хорошая, может сократить время при определении координат и размеров в спрайте, но сильно уж узконаправленная и опять же не решает моих задач.

Еще онлайн сервисы:

css-sprit.es,
csssprites.com,
spritegen.website-performance.org,
css.spritegen.com

В них процесс выглядит следующим образом:

загрузка картинок,
настройка параметров,
генерация

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

Не захотел я мириться с таким положением вещей и сваял свой генератор.

Рад представить

CSS Sprite Generator by Simpreal

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

На главной странице в разделе «Examples» есть несколько проектов-примеров. Надеюсь они помогут разобраться в возможностях программы.

Генератор спрайтов работает онлайн. Собран из Bootstrap, Knockoutjs и само собой Jquery.

Главное, в ходе разработки проекта было получено много опыта особенно по Knockoutjs. Этот опыт вылился в две статьи на хабре:

Canvas в GIF на Javascript
Оптимизация knockoutjs при динамическом добавлении и удалении темплейтов

Если у кого-нибудь возникнут еще вопросы связанные с реализацией того, что умеет генератор спрайтов, то я с радостью отвечу.

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

Что дальше

За процессом разработки можно следить на smartprogress

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

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

Я лишь пока предполагаю, что очень мало людей в принципе пользуются спрайтами. Например, за последние 5 лет я лишь один сайт так делал знакомым. Реальные же заказчики сейчас не обращают на это внимания.

Поэтому сложно сказать, что будет дальше. Если людям понравится идея программы, то она будет развиваться. Если же нет, то она либо останется как есть, либо превратится в нечто другое.

В любом случае опыт бесценен!
И если мне понадобится сверстать сайт спрайтами, то у меня уже будет для этого удобный инструмент!

краткое описание, основные техники и полезные рекомендации

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

Полезные свойства спрайтов

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

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

В обычном процессе разработки сайта необходимо делать много картинок. Очень часто эти картинки занимают очень мало места, но представляют собой всегда отдельный файл. Для любой операционной системы любого сервера открытие файла — это операция, отнимающая много времени, однако не будет существенно отличаться по времени, когда открывается файл на 13 на 13 пикселей, и когда открывается файл из 16 картинок 52 на 52 пикселя. В первом случае необходимо иметь 16 файлов и 16 операций открытия/чтения, во втором случае 16 картинок будут получены в результате открытия только одного файла.

Если создать наборы таких файлов по тематике (горизонтальное меню, формы диалога, кнопки калькулятора, элементы оформления календаря…) то такие совокупности картинок можно будет мобильно переносить с сайта на сайт.

Обратная сторона медали

Когда есть фанаты, слишком резво рекомендующие использовать спрайты CSS, обязательно находятся те, кто внимательно изучает вопрос и доходчиво показывает, что всегда практичнее работать по старинке.

Действительно, если вместо 16 файлов картинок будет один файл из 16 картинок, то вместо 16 операций открытия/чтения будет одна. Но фокус в том, что у всякого браузера есть кэш, и он загружает что-либо только в крайнем случае. Кроме того, обычно элементы страниц загружаются при первом посещении страницы, а впоследствии подгружаются только измененные.

Другой аспект. Обычно картинки режут, а не склеивают в один файл. Как-то так сложилась технология а, лучше сказать, обычай. Дизайнер создает макет, а верстка использует его кусочки: мелко нарезанные части макета. Противники спрайтов полагают, что собирание нескольких картинок в один файл — трудоемкое занятие, увеличивающее общее время разработки страницы.

Есть и такие разработчики, которые считают и оптимизируют количество HTTP-запросов, полагая что это занятие более прагматично, чем CSS-спрайты.

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

Автоматизация и CSS-спрайты

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

Следует, однако, заметить, что спрайт из двух-трех элементов или десятка-другого — куда ни шло, а вот когда в спрайте сотня рисунков, то с написанием JavaScript-функции проблем, конечно, не возникнет, но вот сколько труда уйдет на создание такого большого спрайта… Кроме того, склеивать картинки — это одно, генератор спрайтов CSS делает и нужную картинку, и CSS-код под нее, ему абсолютно все равно сколько будет составляющих элементов спрайта. Проблемы возникнут при переделке сайта, изменении дизайна, удалении и добавлении новых элементов. Разрабатывая спрайт, следует подумать не о том, как его использовать, а о том, как его потом изменить.

Тематическая выгода от использования спрайтов

В отличие от языков программирования CSS, это относительно статичный набор правил, вся его динамика определяется правилами и их функциональным наполнением (по стандарту). Рассматривая в комплексе спрайты, HTML, CSS можно создать тематические библиотеки дизайна-функционала.

Например, законченный вариант меню: просто подключив несколько css-правил, js-функций и включив в код несколько HTML-дивов, можно получить результат. Изменив содержание картинки спрайта, можно изменить вид этого меню. Уточнив тело функции, можно скорректировать функционал.

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

Игрушки — золотое дно для спрайтов

Азарт и программирование — несовместимые понятия, но квалификация программиста, пишущего игры, заметно отличается от общебытовой (простое кодирование) и творческой (проектирование и разработка новых технологий, идей).

Дизайн игр апеллирует к векторной графике, потому сочетание SVG-спрайты + CSS-правила не только востребовано, но и часто превращается из объекта разработчика (сайта) в объект реальной игры. В частности, популярная игра Counter Strike применяет к терминам спрайты, спреи вполне осмысленные синонимы: взрыв, кровь, прицел…

Фраза «установить спрайты css v34» для посвященного вполне нормальна и понятна. Спрайты обрели не только полезность в применении по своему существу, но и образовали нишу, которая стала вполне полнофункциональной, доступной и понятной определенному кругу потребителей.

CSS-спрайты: пример

Для переключения страниц сайта на тот или иной язык применяются самые разнообразные варианты, но если селектор языка выполнить в виде иконки, то решение, использующее спрайт, может выглядеть так:

Очевидные недостатки спрайтов

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

Даже используя генератор спрайтов CSS, трудностей не избежать, особенно когда придется переделывать дизайн сайта. Разместить в спрайте несколько десятков картинок — это не массив элементов, графика есть графика, ее, как правило, просто выводят на экран, а не перебирают в коде как массив в поисках нужного элемента.

Стандарт и следующие ему разработчики утверждают, что коль спрайты связаны с правилом background, то это исключительно фоновое изображение, а не элемент сайта. Графическая составляющая элементов страницы должна манипулировать тегами img.

С этим трудно согласиться на том простом основании, что background мало когда воспринимался в качестве общего фона. Это просто фон, неважно чего — миниатюрного элемента или всей страницы в целом.

Между тем, именно графическая составляющая представляется серьезным препятствием в применении спрайтов.

Разумное использование

Несмотря на то что термины «интернет-технологии» и «высокие технологии» принято считать синонимами, на деле это трудоемкий и местами очень нетехнологичный труд. Спрайты не особенно выделаются на фоне других узких мест как в чистом программировании на JavaScript или PHP, так и в части разработки необходимого функционала, настройки процессов наполнения сайтов информацией или, например, фонового создания архивных копий.

Мощь и перспективность используемых систем управления сайтами нивелируется порой нюансами их практического применения, а ручная разработка ресурсов, как правило, приводит к необходимости 1001-й раз переписывать тот или иной собственный алгоритм.

В контексте сказанного важно просто в разумных пределах использовать все, что предоставляет современный инструмент. Не следует слишком рьяно применять одно в ущерб другому, а золотое правило в сайтостроении гласит следующее: нужно думать не о том, как сдать работу как можно скорее, а о том, как ее исполнить так, чтобы в случае любой непредвиденной ситуации можно было быстро решить любую проблему.

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

CSS-спрайты
О
Часто задаваемые вопросы
Новости

Спрайты CSS

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

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

1: Загрузите свои изображения

Выберите до 20 файлов общим размером 8 МБ.

2: Выберите параметры

Тип выхода: PNG — рекомендуемый JPEGGIF Настройки JPEG Удаление артефактов JPEG: Качество JPEG: Другие настройки Префикс класса CSS: Отступы между изображениями: 0px1px2px3px4px5px10px20px (Это сделает ваш файл немного больше, но может предотвратить наложение изображений друг на друга)

3: Создайте свой спрайт

О

Автор: RoBorg

Что такое спрайт CSS?

CSS Sprite — это набор изображений, объединенных в один файл изображения. Они используются как метод ускорения загрузки ваших веб-сайтов за счет уменьшения количества HTTP-запросов, которые должны делать ваши пользователи. Каждый запрос будет содержать служебные данные заголовков HTTP (включая файлы cookie) и задержку соединения. Используя один файл изображения вместо нескольких, вы можете значительно сократить время загрузки страниц.

Что я получу и как это использовать?

Этот инструмент создает:

Файл изображения
Блок кода CSS

Сначала загрузите файл изображения и добавьте CSS в свою таблицу стилей. Затем замените изображения кодом для загрузки спрайта. Классы CSS генерируются из имен файлов изображений, которые вы загружаете, например: может стать <дел>

Часто задаваемые вопросы

Кто написал это?

Грег, он же RoBorg, — я профессиональный PHP-программист для Just Say Please.
Вы можете подписаться на меня в Твиттере

Как сообщить об ошибке?

На данный момент только через Твиттер.

Как долго вы храните мои исходные изображения и спрайты?

Они не хранятся на сервере.

Являются ли загруженные мной изображения конфиденциальными?

Да.

Есть ли API?

Да — см. страницу CSS Sprites API.

Является ли этот проект открытым исходным кодом

В данный момент нет, но если я получу достаточный интерес, я могу очистить код и опубликовать его.

Как написан этот сайт?

Генератор спрайтов написан на PHP с использованием функций изображения GD. Прозрачные PNG генерируются вручную.

6 надежных генераторов CSS-спрайтов

Спрайты — это не маленькие изображения, они состоят из одного большого изображения.

По сути, это комбинации неограниченного количества изображений, объединенных в одну картинку. Графические дизайнеры используют спрайты изображений CSS, чтобы значительно сократить HTTP-запрос.

Поскольку они объединяют все изображения в один файл, время загрузки становится намного быстрее.

А с помощью позиционирования фона CSS становится проще реализовывать отдельные изображения.

К сожалению, этот метод может занять очень много времени. Это связано с тем, что вам нужно будет вручную объединить каждое изображение, которое вы хотите включить в один файл.

Затем вам придется повозиться с CSS, чтобы изображения отображались правильно.

Но, знаете что? Существуют бесплатные онлайн-инструменты, которые можно использовать для автоматизации всего процесса. В этом посте вы найдете набор инструментов, которые позволяют использовать ваши изображения для создания спрайтов CSS.

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

1. Project Fondue

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

Посетите сайт

2. Онлайн-конструктор спрайтов CSS

Этот генератор позволяет загружать сразу несколько изображений, что позволяет сэкономить время. Затем вам нужно выбрать правильный выходной файл. В зависимости от выбранного вами типа выходного файла вы получите код Sass или CSS. Также включены другие параметры, чтобы сделать изображения спрайтов более интересными.

Посетите сайт

3. SpritePad

Это еще один генератор спрайтов, который позволяет создавать изображения спрайтов CSS за считанные секунды. После загрузки изображений вы можете получить спрайт PNDG и его код CSS. Вы также можете использовать его облачное хранилище, где вы можете хранить свои спрайты CSS. Зарегистрировавшись, вы сможете сохранять свои спрайты в виде редактируемых версий, которые вы можете легко изменить в Интернете.

Посетите сайт

4. Spritebox

Это менее автоматизировано, чем 3 варианта выше. В этом инструменте вы можете загружать спрайты и изменять области, в которых вы можете генерировать CSS. Хотя он не создает для вас спрайты CSS, это все же хороший инструмент, который поможет вам создавать спрайты в Photoshop. Или если вам просто нужна помощь в кодировании спрайтов.

Посетите сайт

5. Холст

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