Всю работу с изображениями в TARS можно разбить на две части: «Спрайты» и «Отдельные изображения».
TARS поддерживает работу с двумя форматами избражений для спрайта: PNG и SVG. Общий подход отлично описан в презентации веб-разработчика Тимофея Чаптыкова. Кратко подход описан ниже. Преимущество данного подходо раскрыто в презентации и не будет объяснено ниже.
Здесь не будeт описаны преимущества склейки интерфейсных (и других мелких или частоповторяющихся изображений) в единый спрайт. Если вы не знакомы с понятием спрайт — подробности по ссылке.
Вы можете пропустить теорию и сразу перейти к описанию работы со спрайтами.
В настоящий момент существует большое число экранов с различной плотностью пикселей. Например смартфоны с экранами с диагональю 5' и разрешением экрана 1920x1080. При этом есть экраны с диагональю 23', которые имеют такое же разрешение. Каждый пиксель такого экрана (с большой диагональю) отображает каждый отдельный пиксель картинки. Экраны смартфонов (с характеристиками 5' и 1920x1080) отображают изображения иным образом: 1 пиксель картинки размывается на 3 пикселя экрана смартфона. Количество пикселей, на которое размываеся изображение обозначается как dppx. Более подробно можно прочесть здесь и здесь. Предположим у нас есть спрайт PNG-изображений. Такие картинки имеют фиксированные размеры. Если мы будем размазывать такую картинку на количество пикселей в 3 раза большее, чем размеры картинки, то изображение будет размыто.
Чтобы избавиться от этой проблемы, можно использовать изображение в 3 раза большего размера для подобного экрана, при этом размер картинки в css задавать исходя из размера оригинального изображения (свойство background-size).
На данный момент существуют экраны с dppx от 1 до 4 (скоро будут и выше). Готовить спрайты для 4 размеров экранов — это очень много работы.
Выручает SVG. Векторный, не зависит от dppx экрана, отлично рендерится в современных (и не только) браузерах. Можно сделать только 1 размер и это изображение будет выглядеть одинаково на всех экранах.
К сожалению SVG имеет несколько недостатков:
- SVG плохо отображает радиальные и другие сложные градиенты (линейные отображются отлично).
- Плохо отображаются сложные тени.
- Не отображается в IE8.
Итого имеем два подхода: SVG для всего, чего можем. Для остального готовим PNG-изображения для тех экранов, которые вы собираетесь поддерживать. Для IE8 будем просто растрировать SVG-изображения.
SVG изображения не склеиваются в спрайт, а включаются прямо в css в dev-режиме и кодируются в base64 при сборке. Такой css хорошо поддается сжатию в gzip, кешируется брауезром. SVG-изображения в release-версии минифицируются. Изображения, которые должны быть включены таким образом необходимо складывать в папку (указан путь по умолчанию): 'static/img/svg/'. Вложенность директорий НЕ поддерживается.
Для изображений, которые не могут быть отрисованы в SVG складываются в 'static/img/sprite/96dpi|192dpi|288dpi|384dpi'. В папку 96dpi кладутся изображения для экранов с dppx = 1, в папку 192dpi кладутся изображения в два раза больше оригинала, с названиями оригиналов. Данные изображения будут подключаться на экранах с dppx = 2. Далее по аналогии.
Используемые экраны и подключение работы с SVG настраивается в конфиге проекта.
Подключение изображений в css-коде производится с помощью двух миксинов (пример на scss, названия миксинов и входные параметры для других css-препроцессоров такие же):
@include bg($png-image-name); // Подключение спрайта с png-картинками
@include bg-svg($svg-image-name); // Подключение svg-изображенияpng-image-name или svg-image-name — название соответсвующей картинки без расширения.
!Очень важно, чтобы при сохранении SVG-картинки в ней присутсвовал атрибут viewBox! Сохраняйте SVG как объект, который может быть вставлен в html без изменений (в Adobe Illustrator опция Image location – Embed).
Миксин bg включит в css background, размер картинки, backgroud-size и задаст позиционирование внутри png-спрайта. Больше ничего добавлять не нужно, миксин сам задаст медиа-выражения для экранов с различной плотностью пикселей.
Миксин bg-svg включит в css подключит svg-спрайт в качестве фона, задаст все необходимые смещения и размеры.
Работа с отдельными изображениями очень проста. Отдельные изображения разделены на несколько категорий. В зависимости от категории картинки кладутся в разные места.
Сборщик поддерживает изображения любого типа, но только SVG, PNG, JPG и GIF будут подвергаться минификации.
!Все описанное ниже является лишь рекомендацией, вы можете организовать хранение картинок так, как вам удобно!
Находятся в папке assets внутри модуля. Для подключения используется следующий шаблон (для подключения картинки в html, необходимо использовать плейсхолдер %=staticPrefix=%):
.moduleName {
background: url('%=staticPrefixForCss=%assets/moduleName/sample-image-name.png') no-repeat;
}В картинки модуля стоит складывать только те картинки, которые больше нигде не встречаются. Вложенность директорий поддерживается.
Находятся по пути (указан путь по умолчанию): 'static/img/content/'. В данную папку стоит класть картинки которые встречаются в контентных областях на сайте, например, на странице новости. Вложенность директорий поддерживается.
Подключение картинки внутри html:
Находятся по пути (указан путь по умолчанию): 'static/img/plugins/'. В данную папку стоит класть картинки которые используются в различных плагинах. Вложенность директорий поддерживается.
Находятся по пути (указан путь по умолчанию): 'static/img/general/'. В данную папку стоит класть картинки которые используются по всему проекту, например общий фон сайта. Вложенность директорий поддерживается.