Сегодня пользователи получают доступ к веб -приложениям через широкий спектр устройств, таких как ноутбуки, планшеты, смартфоны, настольные компьютеры и т. Д., Которые имеют разные размеры экрана и разрешения. С другой стороны, одним из принципов доступности является привлечение как можно большего количества пользователей, а также удовлетворение опыта в доступе к приложениям, преодолевающим оба физических барьеров (слух, нарушение зрения, когнитивные и т. Д.), А также материальные или технологические Анкет Сегодня есть пользователи, которые подключаются с разных устройств, как мы уже указывали, а также с различными технологическими функциями, такими как полоса пропускания интернет -сети.
Кроме того, существуют веб -приложения, которые имеют высокий визуальный контент, и, следовательно, много изображений. Эти изображения обычно хранятся на CDN ( Content-Delivery-Network ), с которой изображения загружаются на устройство.
В некоторых конкретных областях мира или обстоятельствах загрузка всех этих изображений может означать пропускную способность, которая является чрезмерной для пользователей. Точно так же любая оптимизация, даже для пользователей, имеющих высокопроизводительные устройства, является преимуществом, поскольку приложение будет доступно раньше.
В этом посте мы собираемся показать шаг за шагом, как создать угловое приложение с отзывчивыми изображениями для разных размеров, хотя это может быть для любой технологии.
Проблема, которую я решил, — это та, которую я испытал для проекта с открытым исходным кодом Угловые общины Анкет Этот проект состоит из карты Google, в которой отображаются щиты различных угловых сообществ по всему миру. Кроме того, на боковом наме мы находим все щиты различных сообществ, поэтому мы можем ориентироваться и выбрать их для расширенной информации об этих угловых сообществах. Позвольте мне сказать вам, как и в стороне, не стесняйтесь и добавьте свое сообщество к этой карте, чтобы мы все могли иметь информацию о вашем сообществе.
В этой конкретной проблеме у нас было на дату этого поста около 70 сообществ, каждая из которых имел персонализированный щит. Каждый из этих щитов является скалярным изображением в формате PNG, которое может быть между 13KIB — 186KIB Анкет 70 изображений имеют размер 2.6mib Анкет В этой ситуации нам нужно скачать все изображения в начале, не способная выполнять технику ленивый Чтобы загрузить изображения. Это резко упрощает код и сложность разработки. Однако, кажется, беспокоит, что все устройства, независимо от их размеров, должны скачать 2.6mib Каждый раз, когда это доступ к веб -сайту, вызывая ненужную потерю производительности.
Для этого поста я построил небольшую демонстрацию, в которой все изображения из Угловые общины загружаются в одном компоненте с конечным результатом поста.
В следующей таблице показан размер изображений в соответствии с форматом и размером изображения. Видно, что формат, получающий наименьший размер файла, даже при одинаковом размере изображения, является .webp .
Представьте, что нам пришлось редактировать каждое из изображений с помощью программного графического редактирования, такого как Gimp или Photoshop, вручную. Это вызвало бы много времени, вложенного в то, что он изменил бы размер, качество и формат изображений. Мы могли бы подумать, что выполнение этой задачи только один раз для нашей задачи это может быть утомительной, но действительной задачей (все же я думаю, что мы не должны делать это вручную, имея возможность делать это автоматически). Тем не менее, эта задача становится все более сложной, если изображения, которые мы хотим выполнить процесс, постепенно увеличиваются путем взаимодействия с пользователями или даже если нам приходится вносить различные корректировки к размерам и качествам, которые мы хотим генерировать для каждого из изображений.
Следовательно, идеалом будет иметь инструмент/сценарий, который позволяет нам автоматизировать эту задачу, так что это только вопрос выполнения простого сценария, и все наши изображения генерируются автоматически.
В нашем контексте мы собираемся использовать инструмент, созданный с использованием node.js, так как его установка и использование его в нашем угловом приложении не требует установки новых приложений или менеджеров пакетов для различных языков программирования.
Выбранный инструмент Отзывчивый-имажник-строитель ( RIB ), который определяется как Строительный трубопровод изображений в .Webp Формат Ультра быстро для Интернета. Время, которое потребуется для создания изображений, будет зависеть от вашего процессора или процессора вашей системы интеграции и количества изображений, которые будут преобразованы.
Ребра функции
- ⚡ Fast-использует молниеносную Quick Обработка изображений Libvips Анкет
- 🔥 Многопользовательские масштабы для всех доступных ядер процессоров.
- 📦 нулевая конфигурация — ничего не измените, все измените. Твой выбор.
- 🌍 Universal — Гибкий процесс сборки изображения, который не обеспечивает никаких принципов.
- ✂ Кроссплатформенные-протестированные на Windows, MacOS и Linux.
- 😊 Дружелюбный опыт — рассказывая, что происходит, от начала до конца.
Все эти функции делают этот инструмент с открытым исходным кодом идеальным для нашей цели. Прежде всего, мы устанавливаем пакет в качестве зависимости для разработки.
rib -i -o
Использование этого инструмента довольно просто, поскольку нам нужно только указать параметры следующей команды:
"pre:deploy": "rib -i src/assets/images_raw -o src/assets/images --no-clean --force"
Поэтому, если мы хотим включить в нашем развернуть Трубопровод, который все изображения в определенном каталоге преобразуются и генерируются в новом каталоге, мы можем построить следующее npm-script Это работает незадолго до развернуть задача.
Хотя одной из характеристик этого инструмента/пакета является то, что он не нуждается в конфигурации, в нашем конкретном случае мы хотим создать отзывчивый Приложение, в котором каждый размер экрана имеет набор изображений, настроенных на его параметры. Другими словами, когда пользователь обращается к веб -странице с мобильного устройства, он должен загружать изображения, которые являются подходящим размером для этого устройства, изображения, которые легче, чем изображения для больших экранов, и при обращении к устройству с большим экраном могут наслаждаться изображения ноутбука или SmartTV с высоким разрешением.
Поэтому мы должны настроить различные размеры изображений, которые мы хотим автоматически генерировать. Эта конфигурация выполняется путем создания файла с именем .ribrc.json в котором множество указан с различными конфигурациями или форматами генерации изображений, которые вы хотите генерировать из каждого из исходных изображений. Таким образом, каждая из конфигураций позволяет указать суффикс, используя Название *Свойство, ширина изображения с использованием *ширины Собственность, и что вы хотите вызвать создание изображения (оно перезаписывается, если предыдущий уже существует) с сила имущество.
Поэтому в нашем файле конфигурации мы указываем, что мы будем генерировать пять изображений из каждого из исходных изображений, которые будут иметь конфигурации в качестве префиксов: XS, SM, MD, LG и XL .
Также ребра генерирует все изображения в исходном формате, .png или .jpg и в .webp формат. Так что, если браузер поддерживает .webp Формат, он использует этот вместо предыдущих. В следующем разделе показано, как вы можете делегировать ответственность за использование того или другого изображения в HTML (используя картинку элемент).
HTML5 представил <рисунок> Элемент, который позволяет больше гибкости указать изображения по сравнению с <рисунок> Элемент должен делегировать ответственность за изображения в адаптивных макетах в браузер через HTML. Другими словами, вместо масштабирования больших изображений, используя CSS ширина Свойство, наиболее подходящее изображение может быть выбрано в зависимости от устройства, которое доступа к веб -приложению.
<рисунок> Элемент состоит из двух тегов: один или несколько srcset Атрибут будет отображаться. <Источник > Элемент не удовлетворен.
В нашем угловом компоненте мы определяем массив конфигурации изображений, чтобы показать в Шаблон Анкет В этом множество Мы определяем несколько свойств:
- мин/макс : ширина ViewPort устройства, которое обращается к веб -приложению.
- суффикс : Суффикс изображения.
- формат : Формат изображения, имея форматы
.webpи.png.
В нашем Шаблон , нам нужно только пройти через множество Определено выше, чтобы генерировать <Источник > и
Результат
Результатом, полученным после выполнения этих простых шагов, является то, что у нас есть каталог с изображениями в развернуть с различными размерами и форматами, которые будут использоваться в зависимости от устройства, которое обращается к веб -приложению. Следующие изображения показывают результат нашего приложения, которое загружает некоторые изображения или другие в зависимости от устройства, которое обращается к приложению. На изображениях показаны изображения, которые будут загружены мобильным устройством и большим экраном устройством (большие мониторы или телевизор). Таким образом, мы обеспечиваем большую доступность к нашему веб -приложению, так как дружелюбный Доступ к большему количеству устройств допускается.
Наконец, если вы хотите проверить всю встроенную систему, мы должны использовать только развертывание npm-script , который может быть интегрирован в задачу нашей системы CI/CD, как в исходном проекте Угловые общины делегирование ответственности за выполнение всей этой задачи автоматической системе.
Выводы
В этом посте мы смогли увидеть, как производительность и доступность веб -приложения могут быть улучшены автоматизированным образом, адаптируя изображения в соответствии с устройством, которое обращается к Интернету. Таким образом, пользователям не нужно загружать изображения, которые не подходят для их устройств, что обеспечивает большую доступность к Интернету.
Если мы хотим продолжить улучшение производительности наших веб -приложений, очень легко добавить Сервисный работник Это кэширует наш статический контент, так что устройство не нужно делать запросы на все изображения каждый раз, когда оно входит в систему. Эта функция интересна, если изображения не являются динамическими, то есть они не будут претерпевать изменения в каждом запросе конечного пользователя.
В будущих сообщениях, связанных с этой серией развертывания нашего приложения, мы представим, как автоматически интегрировать тесты, что позволит нам иметь более полный рабочий процесс в нашей системе CI/CD и адаптироваться к нашим потребностям.
Репозиторий GitHub: https://github.com/caballerog/angular-responsive-images
Оригинал: «https://dev.to/angular/automatic-adaptive-images-in-angular-applications-1ebf»