Управление точками останова изображения с помощью Angular

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

В этой статье мы рассмотрим точки останова изображения, варианты их использования и практический пример; мы реализуем их в приложении Angular, используя собственный Angular BreakPoint Observer. Используя этот подход, мы также подчеркнем, почему этот популярный фреймворк помогает нам беспрепятственно работать с вышеупомянутыми методами.

Точки останова изображения и адаптивные изображения

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

Давайте обсудим два варианта, которые разработчики могут использовать на данный момент.

srcset

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

Давайте рассмотрим пример:

 <img src="tuscany.jpg" />

В приведенном выше примере мы указываем 3 изображения, где w указывает ширину изображения в пикселях. При использовании вышеуказанного с srcset нам также необходимо указать атрибут sizes (это необходимо, потому что спецификация предписывает, что если мы используем srcset и w , у нас также должен быть атрибут размеров). Какова цель этого атрибута? Браузеры должны выбрать, какой ресурс загрузить из исходного набора, прежде чем они разметят страницу (до того, как они узнают, насколько большим будет изображение). Мы можем думать о sizes как о подсказке браузеру, что после компоновки изображение будет занимать 100% ширины области просмотра (именно на это ссылается vw ). Браузер знает фактическую ширину области просмотра (а также DPR изображения) во время загрузки, поэтому он может выполнить математические расчеты, чтобы выяснить, какой размер ресурса ему нужен, и выбрать один из исходного набора.

Комбинации элементов <picture> и <source media=""> позволяют нам переключать ресурсы изображения в ответ на медиа-запросы, например, в точках останова макета.

Давайте также рассмотрим это на примере:

 <picture> <source media="(min-width: 1440px)"> <source media="(min-width: 900px)"> <source media="(min-width: 600px)"> <img src="../assets/images/tuscany-sm.jpg" /> </picture>

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

Ключевым выводом из всего вышесказанного является то, что если мы хотим поменять местами изображения в определенных точках останова, мы можем использовать элемент <picture> для размещения медиа-запросов прямо в разметке.

Примечание . Если вам интересно изучить различия между <picture> и srcset + sizes , рекомендую прочитать замечательную статью Эрика Портиса: srcset и sizes .

До сих пор мы обсуждали, как использовать точки останова изображения вместе с медиа-запросами в чистом HTML-окружении. Не было бы намного лучше иметь удобный, почти полуавтоматический способ создания точек останова изображения, а также соответствующих изображений для точек останова, даже без указания медиа-запросов? К счастью для нас, в Angular есть встроенный механизм, который поможет нам, и мы также рассмотрим динамическое создание соответствующих изображений на основе определенных условий с использованием стороннего сервиса.

Модуль углового макета

Angular поставляется с модулем макета, который находится в наборе инструментов CDK (Component Dev Kit). Angular CDK содержит хорошо протестированные инструменты, помогающие в разработке компонентов. Одной из частей CDK является модуль макета, который содержит BreakpointObserver . Этот помощник предоставляет доступ к контрольным точкам медиа-запросов, а это означает, что компоненты (и их содержимое) могут адаптироваться к изменениям, когда размер браузера (размер экрана) изменяется интуитивно.

Рекомендуемая литература : Модуль макета

Теперь, когда мы разобрались с теорией, давайте приступим к делу и создадим приложение, которое будет реализовывать точки останова для адаптивных изображений. В этой первой итерации мы создадим оболочку приложения через Angular CLI: ng new bpo и выберем необходимые параметры.

Чтобы использовать BreakpointObserver , нам также необходимо установить модуль компоновки Angular CDK, что мы можем сделать через npm: npm i @angular/cdk .

После установки мы сможем добавить необходимые операторы импорта в любой компонент, который пожелаем:

 // app.component.ts import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

Используя BreakpointObserver , мы можем подписаться на изменения ширины окна просмотра, а Angular предоставляет нам удобные средства доступа, что означает, что нам вообще не нужно использовать медиа-запросы! Давайте продолжим и попробуем это:

 // app.component.ts constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle XSmall breakpoint } if (result.breakpoints[Breakpoints.Small]) { // handle Small breakpoint } if (result.breakpoints[Breakpoints.Medium]) { // handle Medium breakpoint } if (result.breakpoints[Breakpoints.Large]) { // handle Large breakpoint } if (result.breakpoints[Breakpoints.XLarge]) { // handle XLarge breakpoint } }); }

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

• Breakpoints.XSmall : максимальная ширина = 599,99 пикселей
• Breakpoints.Small : минимальная ширина = 600 пикселей и максимальная ширина = 959,99 пикселей.
• Breakpoints.Medium . Средний: минимальная ширина = 960 пикселей и максимальная ширина = 1279,99 пикселей.
• Breakpoints.Large . Большой: минимальная ширина = 1280 пикселей и максимальная ширина = 1919,99 пикселей.
• Breakpoints.XLarge : минимальная ширина = 1920 пикселей

Теперь у нас все готово, а это значит, что мы можем начать генерировать соответствующие изображения.

Отзывчивые точки останова для изображений

У нас есть несколько вариантов создания адаптивных изображений:

1. Генератор контрольных точек адаптивного изображения
   Используя этот инструмент, мы можем загрузить любое изображение, настроить различные параметры, например, количество изображений, которые мы хотим создать. После запуска инструмента у нас будет визуальное представление о сгенерированных изображениях, и мы сможем загрузить их в виде zip-файла вместе с некоторым сгенерированным кодом, который использует ранее упомянутый элемент <picture> .
2. Другим решением было бы создание шага сборки для нашего проекта для создания точек останова с помощью некоторых пакетов, доступных в репозитории NPM, таких как gulp-responsive или grunt-responsive-images . Оба они зависят от дополнительных библиотек, которые нам необходимо установить для нашей операционной системы. (Пожалуйста, проверьте соответствующие репозитории для получения дополнительной информации.)
3. Еще одним решением может быть использование службы, такой как Cloudinary, для хранения изображений и предоставления их в нужном нам размере и формате, только путем изменения URL-адреса запрошенного ресурса. Это будет наш подход, так как это дает нам наибольшую гибкость.

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

Я загрузил исходное изображение в свою учетную запись Cloudinary, что означает, что я могу получить доступ к этому изображению по следующему URL-адресу:

 https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg

Это полноразмерное, необработанное, исходное и неизменное изображение, с которым мы будем работать.

Мы можем изменить URL-адрес изображения, чтобы создать гораздо меньшую версию. Например, если мы хотим иметь изображение шириной 600 пикселей, мы можем обновить Cloudinary URL* следующим образом:

 https://res.cloudinary.com/tamas-demo/image/upload/w_600/breakpoints-article/tuscany.jpg

* Обратите внимание на w_600 добавленный к URL.

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

Использование Cloudinary означает, что нам не нужно создавать, хранить и управлять несколькими версиями одного и того же изображения — Cloudinary делает это за нас на лету.

Обновим наш код:

 <!-- app.component.html --> <div> <h1>Current breakpoint: {{ breakpoint }}</h1> <img [src]="imagePath"> </div>

 // app.component.ts import { Component, OnInit } from '@angular/core'; // ... export class AppComponent implements OnInit { imagePath; constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ ... } }

Мы можем выбрать любое количество точек останова для наблюдения из списка, упомянутого ранее, и, поскольку у нас есть наблюдатель, мы можем подписаться на изменения и действовать в соответствии с ними:

 this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle this case } });

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

Добавьте следующее в начало определения компонента:

 // app.component.ts imagePath; breakpoint; cloudinaryOptions; baseURL = 'https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg';

И добавьте следующее в первый оператор if :

 // app.component.ts let url = this.baseURL.split('/'); let insertIndex = url.indexOf('upload'); const options = 'c_thumb,g_auto,f_auto,q_auto,w_400'; url.splice(insertIndex + 1, 0, options); this.imagePath = url.join('/'); this.breakpoint = Breakpoints.XSmall;

Результатом будет обновленный Cloudinary URL:

 https://res.cloudinary.com/tamas-demo/image/upload/c_thumb,g_auto,f_auto,q_auto,w_400/breakpoints-article/tuscany.jpg

Какие параметры мы устанавливаем здесь?

• c_thumb (генерирует миниатюру изображения);
• g_auto (сосредотачивается на самой интересной части, мы видим собор на миниатюре);
• f_auto (обслуживает наиболее подходящий формат для данного браузера, например, WebP для Chrome);
• q_auto (снижает качество — и, следовательно, общий размер — изображения, не влияя на визуальные эффекты);
• w_400 (устанавливает ширину изображения 400 пикселей).

Ради любопытства давайте сравним исходный размер изображения с этим вновь сгенерированным изображением: 2,28 МБ против 29,08 КБ!

Теперь у нас есть простая задача: нам нужно создать разные параметры для разных точек останова. Я создал пример приложения на StackBlitz, чтобы вы могли сразу его протестировать (вы также можете увидеть предварительный просмотр здесь).

Заключение

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

Существует множество методов, которые обеспечивают загрузку правильного изображения на нужное устройство (или даже при изменении размера устройства). В этой статье мы рассмотрели подход, использующий встроенную функцию Angular под названием BreakPoint Observer, которая дает нам мощный интерфейс для работы с адаптивными изображениями. Кроме того, мы рассмотрели сервис, который позволяет нам обслуживать, преобразовывать изображения и управлять ими в облаке. Имея в руках такие убедительные инструменты, мы по-прежнему можем создавать иммерсивные визуальные веб-интерфейсы, не теряя при этом посетителей.