Пошаговое руководство по адаптации изображений вашего приложения Angular

В этой серии постов описаны различные задачи, которые можно автоматизировать для выполнения развертывания интерфейсных приложений в Angular.

Серии:

  1. Создание и развертывание приложений Angular на страницах GitHub с помощью действий GitHub
  2. Автоматические адаптивные изображения в угловых приложениях

Вступление

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

Кроме того, существуют веб-приложения с высоким визуальным содержанием и, следовательно, большим количеством изображений. Эти изображения обычно хранятся в CDN (Content-Delivery-Network), из которого изображения загружаются на устройство.

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

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

Проблема, которую нужно решить

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

В этой конкретной задаче на момент написания этой статьи у нас было около 70 сообществ, каждое со своим персональным щитом. Каждый из этих экранов представляет собой скалярное изображение в формате PNG, размер которого может составлять от 13 КБ до 186 КБ. 70 изображений имеют размер 2,6 МБ. В этой ситуации нам нужно загрузить все изображения в начале, не имея возможности использовать технику ленивой загрузки изображений. Это значительно упрощает код и упрощает разработку. Однако вызывает беспокойство тот факт, что все устройства, независимо от их размеров, должны загружать 2,6 МБ каждый раз, когда обращаются к веб-сайту, что приводит к ненужной потере производительности.

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

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

Создавайте изображения разных размеров и форматов

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

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

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

Выбранный инструмент - response-image-builder (RIB), который определяется как конвейер создания изображений в формате.Webp, сверхбыстрый для Интернета. Время, необходимое для создания изображений, будет зависеть от вашего процессора или процессора вашей системы интеграции, а также от количества изображений, которые необходимо преобразовать.



MarcusCemes / response-image-builder
Сверхбыстрый конвейер создания изображений WebP для Интернета! С графической стороны веб-разработки должно быть намного проще… github.com



Особенности RIB

  • ⚡ Быстро - использует молниеносную обработку изображений libvips.
  • 🔥 Многопоточность - масштабируется на все доступные ядра ЦП.
  • 📦 Нулевая конфигурация - ничего не меняйте, меняйте все. Твой выбор.
  • 🌍 Универсальный - гибкий процесс построения образа, не требующий соблюдения каких-либо принципов.
  • ✂️ Кросс-платформенность - протестировано в Windows, macOS и Linux.
  • 😊 Дружелюбный опыт - рассказывать вам, что происходит, от начала до конца.

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

npm i -D responsive-image-builder

Использовать этот инструмент довольно просто, поскольку нам нужно только указать параметры следующей команды:

rib -i <input> -o <output> <options>

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

"pre:deploy": "rib -i src/assets/images_raw -o src/assets/images --no-clean --force"

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

Следовательно, мы должны настроить разные размеры изображений, которые мы хотим генерировать автоматически. Эта конфигурация выполняется путем создания файла с именем .ribrc.json, в котором указан массив с различными конфигурациями или форматами генерации изображений, которые вы хотите сгенерировать из каждого из исходных изображений. Таким образом, каждая из конфигураций позволяет вам указать суффикс с помощью свойства name, ширину изображения с помощью свойства width и то, что вы хотите принудительно создать изображение (оно перезаписывается, если предыдущее уже существует) со свойством force.

Поэтому в нашем файле конфигурации мы указываем, что мы будем генерировать пять изображений из каждого из исходных изображений, которые будут иметь конфигурации в качестве префиксов: xs, sm, md, lg и xl .

Кроме того, rib генерирует все изображения в исходном формате .png или .jpg и в формате .webp. Поэтому, если браузер поддерживает формат .webp, он использует этот формат вместо предыдущих. В следующем разделе показано, как делегировать ответственность за использование того или иного изображения HTML (с помощью элемента picture).

Элемент изображения

HTML5 представил элемент <picture>, который обеспечивает большую гибкость при указании изображений по сравнению с элементом <img>. Чаще всего элемент <picture> используется для делегирования ответственности за изображения в адаптивных макетах браузеру через HTML. Другими словами, вместо масштабирования больших изображений с помощью свойства CSS width можно выбрать наиболее подходящее изображение в зависимости от устройства, которое обращается к веб-приложению.

Элемент <picture> состоит из двух тегов: одного или нескольких элементов <source> и элемента <img>. Браузер проверяет первый элемент <source>, который удовлетворяет медиа-запросу с устройством, которое обращается к веб-приложению, и будет отображено изображение, указанное в атрибуте srcset. Элемент <img> используется как резервный вариант в случае, если медиа-запрос любого элемента <source> не удовлетворен.

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

  • min / max: ширина области просмотра устройства, которое обращается к веб-приложению.
  • суффикс: суффикс изображения.
  • формат: формат изображения, имеющий форматы .webp и .png.

В нашем шаблоне нам нужно только пройти через массив, определенный выше, чтобы сгенерировать элементы <source> и <img>, чтобы делегировать ответственность шаблону.

Результат

Результатом, полученным после выполнения этих простых шагов, является то, что у нас есть каталог с изображениями в deploy с разными размерами и форматами, которые будут использоваться в зависимости от устройства, которое обращается к веб-приложению. На следующих изображениях показан результат работы нашего приложения, которое загружает одни или другие изображения в зависимости от устройства, которое обращается к приложению. Изображения показывают изображения, которые будут загружены на мобильное устройство и устройство с большим экраном (большие мониторы или телевизор). Таким образом, мы обеспечиваем большую доступность нашего веб-приложения, поскольку разрешается дружественный доступ к большему количеству устройств.

Наконец, если вы хотите протестировать всю построенную систему, нам нужно только использовать развертывание npm-script, которое может быть интегрировано в задачу нашей системы CI / CD, как в исходном проекте Angular-Communities, делегируя ответственность за выполнение передать всю эту задачу автоматической системе.

Выводы

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

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

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

Репозиторий GitHub: https://github.com/Caballerog/angular-responsive-images