Gestionarea punctelor de întrerupere a imaginii cu Angular

În calitate de dezvoltatori web, ni se cere adesea să creăm aplicații receptive și bogate în conținut media. Având astfel de cerințe în vigoare înseamnă că trebuie să lucrăm cu puncte de întrerupere a imaginii, precum și cu interogări media, deoarece dorim să oferim cea mai bună experiență utilizatorilor finali. Adăugând la lista de cerințe, ar putea fi nevoie să folosim un cadru front-end, cum ar fi Angular, care este excelent pentru crearea de SPA-uri și alte tipuri de aplicații.

În acest articol, vom arunca o privire asupra punctelor de întrerupere a imaginii, a cazurilor lor de utilizare și pe parcursul unui exemplu practic; le vom implementa într-o aplicație Angular folosind propriul BreakPoint Observer al lui Angular. În timp ce folosim această abordare, vom evidenția, de asemenea, de ce acest cadru popular ne ajută să lucrăm cu tehnicile menționate mai sus într-un mod perfect.

Puncte de întrerupere a imaginii și imagini receptive

În era machetelor receptive (în care surprindem puncte de întrerupere în funcție de dimensiunea ferestrei de vizualizare și pe baza punctului de întrerupere schimbăm aspectul paginii), trebuie de asemenea să ne asigurăm că imaginile pot fi afișate cu dimensiunile potrivite - chiar și după un aspect. Schimbare. Selectarea imaginii potrivite este destul de dificilă pentru site-urile web responsive moderne.

Să discutăm două opțiuni pe care dezvoltatorii le pot utiliza în acest moment.

srcset

srcset ne permite să definim o listă de imagini între care browserul comută în funcție de dimensiunea <img> redată și densitatea afișajului.

Să aruncăm o privire la un exemplu:

 <img src="tuscany.jpg" />

În cele de mai sus, specificăm 3 imagini, cu w indicând lățimea pixelilor pentru imagine. Când folosim cele de mai sus cu srcset , trebuie să specificăm și atributul sizes (acest lucru este necesar deoarece specificația impune că, dacă folosim srcset și w , trebuie să avem și un atribut sizes). Care este scopul acestui atribut? Browserele trebuie să aleagă ce resursă să încarce dintr-un set de surse înainte de a aranja pagina (înainte să știe cât de mare va ajunge imaginea). Ne putem gândi la sizes ca un indiciu pentru browser că, după aspect, imaginea va ocupa 100% din lățimea ferestrei (la asta se referă vw ). Browserul cunoaște lățimea reală a ferestrei de vizualizare (precum și DPR-ul imaginii) în timpul încărcării, așa că poate face calculele pentru a afla ce dimensiune are nevoie de resursă și poate alege una din setul sursă.

Combinațiile de elemente <picture> și <source media=""> ne permit să comutăm resursele de imagine ca răspuns la interogările media, cum ar fi cele de la punctele de întrerupere a aspectului.

Să aruncăm o privire și la un exemplu în acest sens:

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

Schimbați codul de mai sus la nivel local cu o imagine la alegere care are dimensiuni mici, medii și mari. Observați cum, prin redimensionarea browserului, obțineți o imagine diferită.

Principala concluzie din toate cele de mai sus este că, dacă dorim să schimbăm imagini la anumite puncte de întrerupere, putem folosi elementul <picture> pentru a pune interogări media direct în marcaj.

Notă : Dacă sunteți interesat să explorați diferențele dintre <picture> și srcset + sizes , vă recomand să citiți articolul grozav al lui Eric Portis: srcset and sizes .

Până acum am discutat despre cum să folosim punctele de întrerupere a imaginii împreună cu interogări media într-un mediu HTML pur. Nu ar fi mult mai bine să existe o modalitate convenabilă, aproape semi-automatizată de a genera puncte de întrerupere a imaginii, precum și imaginile corespunzătoare pentru punctele de întrerupere, chiar și fără a fi nevoie să specificați deloc interogări media? Din fericire pentru noi, Angular are un mecanism încorporat care să ne ajute și ne vom uita, de asemenea, la generarea imaginilor adecvate în mod dinamic, în funcție de anumite condiții, utilizând un serviciu terță parte.

Modul de aranjare unghiulară

Angular vine cu un modul de aspect care se află în setul de instrumente CDK (Component Dev Kit). Angular CDK conține instrumente bine testate pentru a ajuta la dezvoltarea componentelor. O parte a CDK este modulul de aspect care conține un BreakpointObserver . Acest ajutor oferă acces la punctele de întrerupere a interogării media, ceea ce înseamnă că componentele (și conținutul acestora) se pot adapta la modificări atunci când dimensiunea browserului (dimensiunea ecranului) este modificată intuitiv.

Lectură recomandată : Modul Layout

Acum că avem teoria la o parte, să trecem la treabă și să creăm o aplicație care va implementa puncte de întrerupere a imaginii receptive. În această primă iterație, vom crea shell-ul aplicației prin Angular CLI: ng new bpo și vom selecta opțiunile necesare.

Pentru a folosi BreakpointObserver , trebuie să instalăm și modulul Angular CDK Layout, pe care îl putem face prin npm: npm i @angular/cdk .

După instalare, vom putea adăuga instrucțiunile de import necesare oricărei componente pe care o dorim:

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

Folosind BreakpointObserver , ne putem abona la modificări ale lățimii ferestrei de vizualizare, iar Angular ne oferă accesorii convenabile, ceea ce înseamnă că nu trebuie să folosim deloc interogări media! Să mergem mai departe și să încercăm asta:

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

După cum sa menționat anterior, proprietățile accesoriilor de mai sus reflectă interogările media în următorul mod:

• Puncte de întrerupere.XSmall : lățime maximă = Breakpoints.XSmall px
• Puncte de întrerupere. Mic: lățimea minimă = 600 px și lățime maximă = Breakpoints.Small px
• Puncte de întrerupere. Mediu: lățime minimă = 960 px și lățime maximă = Breakpoints.Medium px
• Puncte de întrerupere. Mare: lățime minimă = 1280 pixeli și lățime maximă = Breakpoints.Large pixeli
• Puncte de întrerupere.XLarge : lățime minimă = Breakpoints.XLarge

Acum avem totul la loc, ceea ce înseamnă că putem începe să generăm imaginile adecvate.

Puncte de întrerupere receptive pentru imagini

Avem câteva opțiuni pentru a genera imagini receptive:

1. Generator de puncte de întrerupere a imaginii receptive
   Folosind acest instrument, putem încărca orice imagine, putem configura diverse opțiuni, de exemplu numărul de imagini pe care dorim să le generăm. După rularea instrumentului, vom avea o reprezentare vizuală a imaginilor generate și le putem descărca ca fișier zip împreună cu un cod generat care utilizează elementul <picture> menționat anterior.
2. O altă soluție ar fi crearea unui pas de construcție pentru proiectul nostru pentru a genera puncte de întrerupere prin intermediul unor pachete disponibile în depozitul NPM, cum ar fi gulp-responsive sau grunt-responsive-images . Ambele depind de biblioteci suplimentare pe care trebuie să le instalăm pentru sistemul nostru de operare. (Vă rugăm să verificați depozitele corespunzătoare pentru informații suplimentare.)
3. O altă soluție ar fi să folosim un serviciu precum Cloudinary pentru a stoca imaginile și a le servi într-o dimensiune și format de care avem nevoie doar prin modificarea adresei URL pentru resursa solicitată. Aceasta va fi abordarea noastră, deoarece aceasta ne oferă cea mai mare flexibilitate.

Lectură recomandată : Automatizarea direcției artistice cu generatorul de puncte de întrerupere a imaginii receptive de Eric Portis

Am încărcat imaginea originală în contul meu Cloudinary, ceea ce înseamnă că pot accesa acea imagine prin următoarea adresă URL:

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

Aceasta este imaginea la dimensiune completă, brută, originală și neschimbată cu care vom lucra.

Putem modifica adresa URL a imaginii pentru a genera o versiune mult mai mică. De exemplu, dacă dorim să avem o imagine cu o lățime de 600 de pixeli, am putea actualiza URL-ul Cloudinary* pentru a fi următorul:

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

* Rețineți că w_600 a fost adăugat la adresa URL.

Sper că, până în acest moment, veți vedea unde se duc toate acestea. Pe baza abordării de mai sus, putem începe foarte rapid să generăm imaginea potrivită pentru punctul de întrerupere potrivit.

Utilizarea Cloudinary înseamnă că nu trebuie să creăm, să stocăm și să gestionăm mai multe versiuni ale aceleiași imagini - este făcută pentru noi de Cloudinary din mers.

Să ne actualizăm codul:

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

Putem alege orice număr de puncte de întrerupere de observat din lista menționată anterior și, deoarece avem un Observator, ne putem abona la modificări și acționa asupra lor:

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

Pentru a gestiona opțiunile pentru diferitele imagini din Cloudinary, vom utiliza o abordare care va fi foarte ușor de urmat. Pentru fiecare caz, vom crea o variabilă de opțiuni și vom actualiza URL-ul final Cloudinary.

Adăugați următoarele în partea de sus a definiției componentei:

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

Și adăugați următoarele la prima declarație 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;

Rezultatul va fi o adresă URL Cloudinary actualizată:

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

Care sunt opțiunile pe care le setăm aici?

• c_thumb (generează o miniatură a imaginii);
• g_auto (se concentrează pe partea cea mai interesantă; vedem catedrala în miniatură);
• f_auto (servește cel mai potrivit format pentru un anumit browser, adică WebP pentru Chrome);
• q_auto (reduce calitatea — și, prin urmare, dimensiunea totală — a imaginii fără a afecta imaginile);
• w_400 (setează lățimea imaginii la 400px).

De dragul curiozității, să comparăm dimensiunea imaginii originale cu această imagine nou generată: 2,28 MB vs 29,08 KB!

Acum avem o treabă simplă: trebuie să creăm diferite opțiuni pentru diferite puncte de întrerupere. Am creat un exemplu de aplicație pe StackBlitz, astfel încât să o puteți testa imediat (puteți vedea și o previzualizare aici).

Concluzie

Varietatea de desktop și dispozitive mobile și cantitatea de media utilizată în web-ul de astăzi a atins un număr extraordinar. În calitate de dezvoltatori web, trebuie să fim în fruntea creării de aplicații web care să funcționeze pe orice dispozitiv și să nu afecteze experiența vizuală.

Există un număr bun de metode care se asigură că imaginea potrivită este încărcată pe dispozitivul potrivit (sau chiar atunci când redimensionează un dispozitiv). În acest articol, am analizat o abordare care utilizează o caracteristică Angular încorporată numită BreakPoint Observer, care ne oferă o interfață puternică pentru a trata imaginile receptive. În plus, am analizat și un serviciu care ne permite să servim, să transformăm și să gestionăm imagini în cloud. Având astfel de instrumente convingătoare la mâna noastră, putem în continuare să creăm experiențe web vizuale captivante, fără a pierde vizitatori.