Zarządzanie punktami przerwania obrazu za pomocą Angular

Jako twórcy stron internetowych często jesteśmy zobowiązani do tworzenia aplikacji, które są responsywne i bogate w multimedia. Posiadanie takich wymagań oznacza, że ​​musimy pracować z punktami przerwania obrazu, a także z zapytaniami o media, ponieważ chcemy zapewnić użytkownikom końcowym najlepsze wrażenia. Dodając do listy wymagań, możemy potrzebować użyć frameworka front-end, takiego jak Angular, który doskonale nadaje się do tworzenia SPA i innych typów aplikacji.

W tym artykule przyjrzymy się punktom przerwania obrazu, ich przypadkom użycia i praktycznym przykładzie; zaimplementujemy je w aplikacji Angular przy użyciu własnego BreakPoint Observer. Korzystając z tego podejścia, podkreślimy również, dlaczego ta popularna platforma pomaga nam bezproblemowo pracować z wyżej wymienionymi technikami.

Punkty przerwania obrazu i obrazy responsywne

W dobie layoutów responsywnych (gdzie przechwytujemy punkty przerwania na podstawie rozmiaru okna wyświetlania i na podstawie punktu przerwania zmieniamy układ strony), musimy również zadbać o to, aby obrazy mogły być wyświetlane we właściwych wymiarach — nawet po układzie reszta. Wybór odpowiedniego obrazu jest sporym wyzwaniem dla nowoczesnych responsywnych stron internetowych.

Omówmy dwie opcje, z których deweloperzy mogą obecnie skorzystać.

srcset

srcset pozwala nam zdefiniować listę obrazów, między którymi przełącza się przeglądarka na podstawie renderowanego rozmiaru <img> i gęstości wyświetlania.

Spójrzmy na przykład:

 <img src="tuscany.jpg" />

Powyżej określamy 3 obrazy, przy czym w wskazuje szerokość piksela dla obrazu. Używając powyższego z srcset , musimy również określić atrybut sizes (jest to wymagane, ponieważ specyfikacja nakazuje, że jeśli używamy srcset i w , musimy również mieć atrybut wielkości). Jaki jest cel tego atrybutu? Przeglądarki muszą wybrać zasób do załadowania z zestawu źródłowego przed rozplanowaniem strony (zanim wiedzą, jak duży będzie obraz). Możemy myśleć o sizes jako wskazówce dla przeglądarki, że po rozmieszczeniu obraz zajmie 100% szerokości widocznego obszaru (do tego odnosi się vw ). Przeglądarka zna rzeczywistą szerokość widocznego obszaru (jak również DPR obrazu) w czasie ładowania, więc może wykonać obliczenia matematyczne, aby dowiedzieć się, jakiego rozmiaru zasobu potrzebuje, i wybrać jeden z zestawu źródłowego.

Kombinacje elementów <picture> i <source media=""> umożliwiają nam przełączanie zasobów graficznych w odpowiedzi na zapytania o media, takie jak te w punktach przerwania układu.

Spójrzmy również na przykład tego:

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

Zmień powyższy kod lokalnie na wybrany obraz, który ma mały, średni i duży rozmiar. Zwróć uwagę, jak zmieniając rozmiar przeglądarki, otrzymujesz inny obraz.

Kluczowym wnioskiem z powyższego jest to, że jeśli chcemy zamienić obrazy w określonych punktach przerwania, możemy użyć elementu <picture> , aby umieścić zapytania o media bezpośrednio w znacznikach.

Uwaga : Jeśli chcesz poznać różnice między <picture> a srcset + size sizes polecam przeczytanie świetnego artykułu Erica Portisa: sizes srcset .

Do tej pory omówiliśmy, jak używać punktów przerwania obrazu wraz z zapytaniami o media w czystym środowisku HTML. Czy nie byłoby o wiele lepiej mieć wygodny, prawie półautomatyczny sposób generowania punktów przerwania obrazu, a także odpowiednich obrazów dla punktów przerwania, nawet bez konieczności określania zapytań o media? Na szczęście dla nas Angular ma wbudowany mechanizm, który nam pomaga, a my również przyjrzymy się generowaniu odpowiednich obrazów dynamicznie w oparciu o określone warunki, korzystając z usługi innej firmy.

Moduł układu kątowego

Angular jest dostarczany z modułem układu, który znajduje się w zestawie narzędzi CDK (Component Dev Kit). Angular CDK zawiera dobrze przetestowane narzędzia wspomagające rozwój komponentów. Jedną z części CDK jest moduł układu, który zawiera BreakpointObserver . Ten pomocnik zapewnia dostęp do punktów przerwania zapytania o media, co oznacza, że ​​komponenty (i ich zawartość) mogą dostosowywać się do zmian, gdy rozmiar przeglądarki (rozmiar ekranu) jest zmieniany intuicyjnie.

Zalecana literatura : Moduł układu

Teraz, gdy mamy już teorię na uboczu, przejdźmy do biznesu i stwórzmy aplikację, która zaimplementuje responsywne punkty przerwania obrazu. W tej pierwszej iteracji utworzymy powłokę aplikacji za pomocą Angular CLI: ng new bpo i wybierzemy niezbędne opcje.

Aby korzystać z BreakpointObserver , musimy również zainstalować moduł układu CDK Angulara, co możemy zrobić za pomocą npm: npm i @angular/cdk .

Po instalacji będziemy mogli dodać niezbędne instrukcje importu do dowolnego komponentu, który sobie zażyczymy:

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

Korzystając z BreakpointObserver możemy zasubskrybować zmiany w szerokości widocznego obszaru, a Angular daje nam wygodne akcesory, co oznacza, że ​​w ogóle nie musimy używać zapytań o media! Przejdźmy dalej i wypróbujmy to:

 // 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 } }); }

Jak wspomniano wcześniej, powyższe właściwości akcesora odzwierciedlają zapytania o media w następujący sposób:

• Punkty Breakpoints.XSmall : maksymalna szerokość = 599.99px
• Punkty Breakpoints.Small : min-width = 600px i max-width = 959.99px
• Punkty Breakpoints.Medium : minimalna szerokość = 960px i maksymalna szerokość = 1279,99px
• Breakpoints.Large : minimalna szerokość = 1280px i maksymalna szerokość = 1919.99px
• Punkty Breakpoints.XLarge : minimalna szerokość = 1920px

Mamy już wszystko na swoim miejscu, co oznacza, że ​​możemy zacząć generować odpowiednie obrazy.

Responsywne punkty przerwania dla obrazów

Mamy kilka opcji generowania responsywnych obrazów:

1. Responsywny generator punktów przerwania obrazu
   Za pomocą tego narzędzia możemy wgrać dowolny obraz, ustawić różne opcje, np. ilość obrazków, które chcemy wygenerować. Po uruchomieniu narzędzia otrzymamy wizualną reprezentację wygenerowanych obrazów, które możemy pobrać jako plik zip wraz z wygenerowanym kodem, który wykorzystuje wspomniany wcześniej element <picture> .
2. Innym rozwiązaniem byłoby utworzenie kroku kompilacji dla naszego projektu, aby wygenerować punkty przerwania za pomocą niektórych pakietów dostępnych w repozytorium NPM, takich jak gulp-responsive lub grunt-responsive-images . Oba te elementy zależą od dodatkowych bibliotek, które musimy zainstalować w naszym systemie operacyjnym. (Proszę sprawdzić odpowiednie repozytoria, aby uzyskać dodatkowe informacje).
3. Jeszcze innym rozwiązaniem byłoby użycie usługi takiej jak Cloudinary do przechowywania obrazów i serwowania ich w rozmiarze i formacie, których potrzebujemy tylko poprzez modyfikację adresu URL żądanego zasobu. Takie będzie nasze podejście, ponieważ daje nam to największą elastyczność.

Polecana literatura : Automatyzacja kierownictwa artystycznego za pomocą generatora responsywnych punktów przerwania obrazu autorstwa Erica Portisa

Przesłałem oryginalny obraz na moje konto Cloudinary, co oznacza, że ​​mogę uzyskać dostęp do tego obrazu za pośrednictwem następującego adresu URL:

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

To jest pełnowymiarowy, surowy, oryginalny i niezmieniony obraz, z którym będziemy pracować.

Możemy zmodyfikować adres URL obrazu, aby wygenerować znacznie mniejszą wersję. Na przykład, jeśli chcemy mieć obraz o szerokości 600 pikseli, możemy zaktualizować Cloudinary URL* tak, aby wyglądał następująco:

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

* Zwróć uwagę na w_600 dodany do adresu URL.

Mam nadzieję, że w tym momencie zobaczysz, do czego to wszystko zmierza. Opierając się na powyższym podejściu, możemy bardzo szybko zacząć generować odpowiedni obraz dla właściwego punktu przerwania.

Korzystanie z Cloudinary oznacza, że ​​nie musimy tworzyć, przechowywać i zarządzać wieloma wersjami tego samego obrazu — robi to za nas Cloudinary w locie.

Zaktualizujmy nasz kod:

 <!-- 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([ ... } }

Ze wspomnianej wcześniej listy możemy wybrać dowolną liczbę breakpointów do obserwowania, a ponieważ mamy Observera, możemy zasubskrybować zmiany i na nich działać:

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

Aby obsłużyć opcje różnych obrazów w Cloudinary, zastosujemy podejście, które będzie bardzo łatwe do naśladowania. W każdym przypadku utworzymy zmienną options i zaktualizujemy końcowy Cloudinary URL.

Dodaj następujące elementy na górze definicji komponentu:

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

I dodaj również następujące elementy do pierwszego stwierdzenia 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;

Wynikiem będzie zaktualizowany adres URL Cloudinary:

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

Jakie opcje tutaj ustawiamy?

• c_thumb (generuje miniaturę obrazu);
• g_auto (koncentruje się na najciekawszej części; w miniaturze widzimy katedrę);
• f_auto (obsługuje najbardziej odpowiedni format dla danej przeglądarki, czyli WebP dla Chrome);
• q_auto (zmniejsza jakość — a tym samym ogólny rozmiar — obrazu bez wpływu na efekty wizualne);
• w_400 (ustawia szerokość obrazu na 400px).

Dla ciekawości porównajmy oryginalny rozmiar obrazu z tym nowo wygenerowanym obrazem: 2,28 MB vs 29,08 KB!

Mamy teraz prostą pracę: musimy stworzyć różne opcje dla różnych punktów przerwania. Stworzyłem przykładową aplikację na StackBlitz, więc możesz ją od razu przetestować (możesz też zobaczyć podgląd tutaj).

Wniosek

Różnorodność urządzeń stacjonarnych i mobilnych oraz ilość mediów wykorzystywanych w dzisiejszym Internecie osiągnęła niesamowitą liczbę. Jako twórcy stron internetowych musimy być liderem w tworzeniu aplikacji internetowych, które działają na dowolnym urządzeniu i nie wpływają na wrażenia wizualne.

Istnieje wiele metod, które zapewniają wczytanie właściwego obrazu do właściwego urządzenia (lub nawet podczas zmiany rozmiaru urządzenia). W tym artykule omówiliśmy podejście, które wykorzystuje wbudowaną funkcję Angular o nazwie BreakPoint Observer, która zapewnia nam potężny interfejs do obsługi responsywnych obrazów. Ponadto przyjrzeliśmy się również usłudze, która pozwala nam obsługiwać, przekształcać i zarządzać obrazami w chmurze. Dysponując tak atrakcyjnymi narzędziami, nadal możemy tworzyć wciągające wizualne wrażenia w sieci bez utraty odwiedzających.