Генератор спрайтов css: Attention Required! | Cloudflare

Удобный генератор 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

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

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

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

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

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

CSS Sprite Generator by Simpreal

Программа является воплощением всех вышеописанных требований. И много идей еще в процессе реализации.

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

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

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

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

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

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

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

Что дальше

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

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

Реальные же заказчики сейчас не обращают на это внимания.

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

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

Автор: humblegenius

Источник

Ускоряем сайт при помощи CSS спрайтов

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

Что такое CSS спрайты и для чего они необходимы

Самым основным преимуществом использования CSS спрайтов является то, что они позволяют сократить количество http-запросов к серверу. Любое подключение на Вашем сайте: картинки, css-файла, js-файла и другое – это запрос к серверу.

Поэтому, если мы сможем сократить количество запросов к самому серверу (хостингу), то мы сможем увеличить скорость загрузки Вашего ресурса. Таким образом:

CSS спрайт (CSS sprite) – это такая технология, которая позволяет объединять множество мелких графических изображений в один файл. А вызов необходимо элемента (изображения) происходит уже при помощи CSS, определение идет по координатам мыши.

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

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

Как можно сделать CSS спрайт

Для этих целей нам понадобится генератор CSS спрайтов. В сети Интернет таких инструментов масса, поэтому мы воспользуемся одним из них – CSS Sprites generator.

Что касается меня, то для примера я буду использовать иконки социальных сетей, которые размещены в верхнем правой углу сайта:

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

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

• Необходимо выставить отступы между элементами, то есть картинками. Это иногда приходится делать, чтобы при масштабировании не залазили друг на друга. Да и для дизайна иногда полезно такое делать.
• Толщина рамки между объектами. Это необходимо делать тогда, когда визуально их необходимо разделить.
• Выравнивание объектов. Если иконки имеют определенный статический размер, то в принципе тут без разницы, что Вы установите.
• Цвет фона. Так как у моих икон иконок имеется свой фон, то я выбрал прозрачный

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

Чтобы скачать спрайт, Вам необходимо нажать на кнопку Download Sprite PNG, после чего задать свое имя файлу, я задал social.png, вот какой у меня получился спрайт:

То есть – это цельная картинка. Теперь нам остается только это все подключить. Система координаты мне выдала, поэтому я приступаю, у меня получился следующий код:

<!DOCTYPE html>
<html>
<head>
<style>
#social{position:relative;}
#social li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#social li, #navlist a{height:32px;display:block;}
 
#email{left:0px;width:32px;}
#email{background:url('social. png') 0 0;}
 
#facebook{left:42px;width:32px;}
#facebook{background:url('social.png') -42px 0;}
 
#vk{left:84px;width:32px;}
#vk{background:url('social.png') -84px 0;}
 
#twitter{left:126px;width:32px;}
#twitter{background:url('social.png') -126px 0;}
 
#gplus{left:168px;width:32px;}
#gplus{background:url('social.png') -168px 0;}
 
#f-f{left:210px;width:32px;}
#f-f{background:url('social.png') -210px 0;}
 
#rss{left:252px;width:32px;}
#rss{background:url('social.png') -252px 0;}
</style>
</head>
 
<body>
<ulid="social">
  <arel="nofollow" href="#1"><liid="email"></li></a>
  <arel="nofollow" href="#2"><liid="facebook"></li></a>
  <arel="nofollow" href="#3"><liid="vk"></li></a>
  <arel="nofollow" href="#4"><liid="twitter"></li></a>
  <arel="nofollow" href="#5"><liid="gplus"></li></a>
  <arel="nofollow" href="#6"><liid="f-f"></li></a>
  <arel="nofollow" href="#7"><liid="rss"></li></a>
</ul>
</body>
</html>

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

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

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

Также советуем почитать на PressDev.RU

Решите проблемы с производительностью с помощью CSS-спрайтов

Проблема: у вас есть строка меню со стандартными кнопками, включая общеизвестные кнопки «предыдущий / назад» и «следующий / вперед», которые выглядят как …

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

Хорошо рассмотрим юзабилити в первую очередь. Изображения для кнопок выглядят не так плохо. Понятно, что они имеют в виду и что они будут делать, поэтому нет особого смысла добавлять подсказки. Но мы могли бы сделать вещи более гладкими с некоторыми «зависаниями». Что зависает? Наведение — это метод, который динамически меняет компонент, когда мышь «зависает» над ним. Технически всплывающие подсказки являются формой зависания, но существуют и другие типы: компоненты могут менять цвет или светиться. Давайте применим некоторую магию парения к нашим кнопкам prev / next. Наведите указатель мыши на кнопки ниже, сделайте это несколько раз и наблюдайте, как они светятся.

Так как же мы все это сделали? Ну, во-первых, мы делаем альтернативные изображения наших оригинальных изображений. Это можно сделать с помощью любого приличного инструмента редактирования: GIMP, Paint Shop Pro, выбор — для этого примера я просто использовал Picaso. Второе, что нужно сделать, — объединить четыре отдельных изображения с помощью такого инструмента, как
генератор CSS Sprite, в одно изображение.

Почему одно изображение? Ну, это для части производительности. HTTP-запросы могут быть дорогими. Мы не хотим иметь 4 отдельных HTTP-запроса для 4 изображений. Таким образом, вместо этого у нас есть одно изображение, которое содержит все, что нам нужно. Это загружает все четыре компонента за один раз. Затем мы используем некоторые хитрости CSS для:

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

Так как же нам все это … пора взглянуть на CSS.

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:60px;display:block;}
 
#prev{left:0px;width:60px;}
#prev{background:url('http://3.bp.blogspot.com/-NekIPaPQXUk/T0ggAVAvqwI/AAAAAAAAAbk/SR9zaKoWr1w/s200/sprite.png') 0 0;}
#prev a:hover{background: url('http://3.bp.blogspot.com/-NekIPaPQXUk/T0ggAVAvqwI/AAAAAAAAAbk/SR9zaKoWr1w/s200/sprite.png') -60px -60px;}
 
#next{left:61px;width:60px;}
#next{background:url('http://3.bp.blogspot.com/-NekIPaPQXUk/T0ggAVAvqwI/AAAAAAAAAbk/SR9zaKoWr1w/s200/sprite.png') 0 -60px;}
#next a:hover{background: url('http://3.bp.blogspot.com/-NekIPaPQXUk/T0ggAVAvqwI/AAAAAAAAAbk/SR9zaKoWr1w/s200/sprite.png') +60px 0px;}

объяснение

1. CSS показывает стилизованный список навигации. Список с id = «navlist» получит преимущества в стиле.
2. Элемент с id = «prev» обнаружит коллекцию изображений, также называемую «листом спрайта», и выделит ту часть изображения, которую он хочет, т. е. стрелку влево
3. Элемент с id = «next» убирает стрелку вправо
4. «prev» и «next» имеют изображения при наведении, которые также взяты из листа спрайта и будут отображаться, когда на них наводит курсор мыши.

Итак, поехали. Лучшее удобство и простота использования. Хороший день работы. Итак, есть еще вопросы? Ну, очевидно, почему бы просто не использовать карту изображений? Это также уменьшит количество HTTP-запросов. Это правда. Но это не так гибко, как использование CSS-спрайтов. Когда используются карты изображений, изображения должны быть непрерывными. Используя технику CSS-спрайтов, вы можете разделить их по своему вкусу. Целый набор изображений может быть помещен на один спрайт, а затем может использоваться вместе, отдельно и в любом порядке, который вы хотите. Фактически, именно так большинство компаний использовали CSS-спрайты. Они создают спрайт-лист, который содержит различные изображения для всех частей веб-приложения. 
Встроенные изображениядругой подход. Этот подход загружает изображение в том же HTTP-запросе, что и страница, и, таким образом, также уменьшает HTTP-запросы, но также увеличивает размер HTML-страницы. Браузерная поддержка CSS спрайтов также лучше.

Итак, кто-нибудь еще использует спрайты CSS — черт возьми, да! Узнай что-нибудь здесь …

 

6 Генератор CSS-спрайтов Онлайн-инструменты

Несколько дней назад я хотел использовать значок Twitter с одного из моих других веб-сайтов, но не смог сохранить его с веб-страницы. Затем я изучил исходный код страницы и обнаружил, что он использует спрайты CSS для отображения всех изображений социальных закладок из одного большого изображения. Итак, моя тема WordPress использует CSS Sprites для более быстрой загрузки страниц, а я совершенно не знал об этом. Тогда я решил изучить его и как использовать его на веб-странице.

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

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

1. Генератор CSS-спрайтов:

Это один из лучших онлайн-инструментов для изображений CSS-спрайтов и получения их CSS-кода и HTML-кода. Самое приятное то, что вы можете создать свою учетную запись здесь, а затем войти через некоторое время, чтобы получить данные своего старого проекта.Вы можете добавить больше изображений в проект и снова сгенерировать код. Очень полезный инструмент для дизайнеров, которые создают темы и много используют методы CSS Sprite.

2. Производительность сайта Генератор спрайтов CSS:

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

• Поддержка различных языков
• Загружайте файлы в формате zip, очень удобно, если у вас есть более 50 файлов для использования.

3. CSS Sprite:

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

4. Sprite Box:

Инструмент Reverse для создания кода CSS для отображения выбранного изображения из одного изображения. Визуальный редактор WYSIWYG и интерфейс на основе JQuery просты и удобны в использовании.Отличный инструмент, который можно использовать, если вы просто хотите, чтобы часть изображения отображалась с использованием спрайтов CSS.

5. Sprite Gen:

Простой онлайн-инструмент для создания изображения CSS Sprite и получения его CSS-кода. Подходит для базового использования, основан на Ajax и имеет простой интерфейс.

6. Спрайты CSS:

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

Надеюсь, вам понравился пост, не забудьте поделиться им с другими.

стежков: Бесплатный генератор спрайтов CSS

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

Загрузить простые изображения

Вероятно, нет более простого способа создания спрайтов, чем с помощью Стежков. Изображения, которые вы хотите объединить в файл спрайтов, можно загрузить через веб-интерфейс. Он поддерживает форматы JPG, PNG и GIF. После загрузки изображения автоматически размещаются в рабочей области. Вы можете определить, хотите ли вы, чтобы изображения были расположены в виде компактного блока, рядом друг с другом или одно под другим.Вы также можете настроить расстояние между отдельными изображениями. Каждое изображение требует отдельного имени, чтобы впоследствии его можно было присвоить HTML-элементу. Кроме того, к спрайту добавляется префикс, предшествующий всем классам, которые будут сгенерированы.

После того, как все файлы изображений загружены и названы, вы можете загрузить файл спрайта в формате PNG вместе с соответствующей таблицей стилей. Файл таблицы стилей содержит общий класс с префиксом имени, в который встраивается файл спрайта в качестве фонового изображения. Кроме того, для каждого изображения определяется класс, указывающий положение изображения в спрайте через «background-position». Он также содержит информацию о ширине и высоте изображений. Имя класса для каждого изображения состоит из префикса и конкретного имени, которое вы дали каждому изображению в генераторе.

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

 <дел> 

В приведенном выше примере мы предполагаем, что префикс спрайта называется «спрайт».Это имя по умолчанию. Помимо класса «sprite», элементу