Блог от AS3Coder'a о JavaScript, HTML, CSS... и немного о Flash.

среда, 24 сентября 2014 г.

Сеты изображений. TexturePacker.

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

Набор изображений

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

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



На экран они выводятся  с помощью любого HTML-элемента и стиля background с указанием соответствующей позиции:
.icon { background: url('/icons.png') transparent no-repeat -16px -16px; }
Таким образом, у нас получается один большой файл со всеми изображениями, вместо множества маленьких.

Преимуществом такого способа являются:
  • удобства при разработке и поддержки проекта
  • хоть какой-то порядок в графических ресурсах проекта
  • самое главное - это меньшее количество запросов к серверу.
Если вы со мной согласны, то поговорим о том, как собрать уже имеющиеся изображения в один файл. Кто-то называет его атласом, текстурой или еще как-то, но мне больше подходит "сет" - от английского слова set (ряд, серия, набор...).

Сборка сета

Самым подходящим инструментом для выполнения подобной задачи является программа TexturePacker. Загрузить и установить её можно с официального сайта. Имеются версии для всех популярных операционных систем.



Устанавливаем, открываем и видим окно для выбора проекта:



Нас интересует пункт CSS. После выбора откроется окно проекта:



В него попробуем перетащить несколько иконок и сразу увидим предварительный вариант нашего сета:



В левой части будет находиться список файлов:



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



  • Путь к .css-файлу со стилями:



  • Всевозможные отступы между иконками:



Пример

В качестве примера я попробую объединить несколько изображений адресной книги из бесплатной коллекции иконок fugue-icons:


Вот такой сет у меня получился:


А вот и CSS-описание к нему:
/* ----------------------------------------------------
   created with http://www.codeandweb.com/texturepacker 
   ----------------------------------------------------
   $TexturePacker:SmartUpdate:3381f3f5613a5b4583ac8d9fc2098c0c:50c3d538df782baf783f7806cded96e4:1a4beba4193919b01a56dc2c2a237cfe$
   ----------------------------------------------------

   usage: <span class="{-spritename-} sprite"></span>

   replace {-spritename-} with the sprite you like to use

*/

.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(icons.png);}

.address-book {width:20px; height:20px; background-position: -48px -26px}
.address-book--arrow {width:20px; height:20px; background-position: -4px -4px}
.address-book--exclamation {width:20px; height:20px; background-position: -4px -26px}
.address-book--minus {width:20px; height:20px; background-position: -4px -48px}
.address-book--pencil {width:20px; height:20px; background-position: -26px -4px}
.address-book--plus {width:20px; height:20px; background-position: -48px -4px}
.address-book-blue {width:20px; height:20px; background-position: -26px -26px}
.address-book-open {width:20px; height:20px; background-position: -26px -48px}
В итоге

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

И еще

Работать с TexturePacker можно из под командной строки. Более подробно можно ознакомиться в справке.

Смотрите также:

Комментариев нет:

Отправить комментарий

Можно использовать некоторые HTML-теги, например <b>, <i>, <a>

Поиск по блогу

Обо мне



Farid Shamsutdinov (AS3Coder)
Russia, Tatarstan, Kazan
as3coder@gmail.com

Подробнее...

Постоянные читатели

© 2014 Farid Shamsutdinov. При копировании материалов, ссылка на источник обязательна. Технологии Blogger.