Gestione dei punti di interruzione dell'immagine con Angular

In qualità di sviluppatori web, ci viene spesso richiesto di creare applicazioni che siano reattive e ricche di contenuti multimediali. Avere tali requisiti in atto significa che dobbiamo lavorare con i punti di interruzione delle immagini, nonché con le query multimediali poiché vogliamo fornire la migliore esperienza agli utenti finali. In aggiunta all'elenco dei requisiti, potrebbe essere necessario utilizzare un framework front-end come Angular, ottimo per la creazione di SPA e altri tipi di applicazioni.

In questo articolo, daremo un'occhiata ai punti di interruzione dell'immagine, ai loro casi d'uso e in un esempio pratico; li implementeremo in un'applicazione Angular utilizzando BreakPoint Observer di Angular. Durante l'utilizzo di questo approccio, evidenzieremo anche perché questo framework popolare ci aiuta a lavorare con le tecniche sopra menzionate in modo trasparente.

Punti di interruzione dell'immagine e immagini reattive

Nell'era dei layout reattivi (in cui acquisiamo punti di interruzione in base alle dimensioni del viewport e in base al punto di interruzione cambiamo il layout della pagina), dobbiamo anche assicurarci che le immagini possano essere visualizzate con le giuste dimensioni, anche dopo un layout Cambia. La selezione dell'immagine giusta è piuttosto impegnativa per i moderni siti Web reattivi.

Discutiamo di due opzioni che gli sviluppatori possono utilizzare al momento.

srcset

srcset ci consente di definire un elenco di immagini tra le quali il browser passa in base alla dimensione <img> renderizzata e alla densità del display.

Diamo un'occhiata a un esempio:

 <img src="tuscany.jpg" />

In quanto sopra, specifichiamo 3 immagini, con la w che indica la larghezza in pixel dell'immagine. Quando si utilizza quanto sopra con srcset , è necessario specificare anche l'attributo sizes (questo è richiesto perché la specifica richiede che se utilizziamo srcset e w dobbiamo anche avere un attributo dimensioni). Qual è lo scopo di questo attributo? I browser devono scegliere quale risorsa caricare da un set di sorgenti prima di impaginare la pagina (prima di sapere quanto sarà grande l'immagine). Possiamo pensare alle sizes come un suggerimento al browser che, dopo il layout, l'immagine occuperà il 100% della larghezza del viewport (questo è ciò a cui si riferisce vw ). Il browser conosce la larghezza effettiva della finestra (così come il DPR dell'immagine) al momento del caricamento, quindi può fare i conti per capire di quale risorsa ha bisogno e sceglierne una dal set di origine.

Le combinazioni di elementi <picture> e <source media=""> ci consentono di sostituire le risorse di immagine in risposta a query multimediali, come quelle nei punti di interruzione del layout.

Diamo un'occhiata anche a un esempio di questo:

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

Modifica il codice sopra in locale con un'immagine a tua scelta che ha una dimensione piccola, media e grande. Nota come, ridimensionando il browser, ottieni un'immagine diversa.

Il punto chiave di tutto quanto sopra è che se vogliamo scambiare le immagini in punti di interruzione specifici, possiamo utilizzare l'elemento <picture> per inserire le query multimediali direttamente nel markup.

Nota : se sei interessato ad esplorare le differenze tra <picture> e srcset + sizes , ti consiglio di leggere l'ottimo articolo di Eric Portis: srcset and sizes .

Finora abbiamo discusso come utilizzare i punti di interruzione dell'immagine insieme alle query multimediali in un ambiente HTML puro. Non sarebbe molto meglio avere un modo conveniente, quasi semi-automatizzato, per generare punti di interruzione dell'immagine e le immagini corrispondenti per i punti di interruzione, anche senza dover specificare le query multimediali? Fortunatamente per noi Angular ha un meccanismo integrato per aiutarci e daremo anche un'occhiata alla generazione dinamica delle immagini appropriate in base a determinate condizioni utilizzando un servizio di terze parti.

Modulo layout angolare

Angular viene fornito con un modulo di layout che risiede nel set di strumenti CDK (Component Dev Kit). Angular CDK contiene strumenti ben testati per aiutare con lo sviluppo dei componenti. Una parte del CDK è il modulo Layout che contiene un BreakpointObserver . Questo helper dà accesso ai punti di interruzione delle query multimediali, il che significa che i componenti (e il loro contenuto) possono adattarsi alle modifiche quando le dimensioni del browser (dimensioni dello schermo) vengono modificate in modo intuitivo.

Bibliografia consigliata : Modulo Layout

Ora che abbiamo la teoria fuori mano, mettiamoci al lavoro e creiamo un'applicazione che implementerà punti di interruzione dell'immagine reattiva. In questa prima iterazione, creeremo la shell dell'applicazione tramite Angular CLI: ng new bpo e selezioneremo le opzioni necessarie.

Per utilizzare BreakpointObserver dobbiamo anche installare il CDK Layout Module di Angular, cosa che possiamo fare tramite npm: npm i @angular/cdk .

Dopo l'installazione, saremo in grado di aggiungere le istruzioni di importazione necessarie a qualsiasi componente che desideriamo:

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

Usando BreakpointObserver possiamo iscriverci alle modifiche nella larghezza del viewport e Angular ci offre comodi accessori che significano che non abbiamo bisogno di usare le media query! Andiamo avanti e proviamo questo:

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

Come accennato in precedenza, le proprietà della funzione di accesso sopra riflettono le query multimediali nel modo seguente:

• Breakpoints.XSmall : larghezza massima = 599,99 px
• Breakpoints.Small : larghezza minima = 600 px e larghezza massima = 959,99 px
• Breakpoints.Medium : larghezza minima = 960 px e larghezza massima = 1279,99 px
• Breakpoints.Large : larghezza minima = 1280 px e larghezza massima = 1919,99 px
• Breakpoints.XLarge : larghezza minima = 1920px

Ora abbiamo tutto a posto, il che significa che possiamo iniziare a generare le immagini appropriate.

Punti di interruzione reattivi per le immagini

Abbiamo alcune opzioni per generare immagini reattive:

1. Generatore di punti di interruzione immagine reattiva
   Utilizzando questo strumento, possiamo caricare qualsiasi immagine, impostare varie opzioni, ad esempio il numero di immagini che desideriamo generare. Dopo aver eseguito lo strumento, avremo una rappresentazione visiva delle immagini generate e potremo scaricarle come file zip insieme a del codice generato che utilizza l'elemento <picture> precedentemente menzionato.
2. Un'altra soluzione sarebbe quella di creare un passaggio di compilazione per il nostro progetto per generare punti di interruzione tramite alcuni pacchetti disponibili nel repository NPM, come gulp-responsive o grunt-responsive-images . Entrambi dipendono da librerie aggiuntive che dobbiamo installare per il nostro sistema operativo. (Si prega di controllare i repository appropriati per ulteriori informazioni.)
3. Un'altra soluzione ancora sarebbe quella di utilizzare un servizio come Cloudinary per archiviare le immagini e servirle in una dimensione e un formato di cui abbiamo bisogno solo modificando l'URL per la risorsa richiesta. Questo sarà il nostro approccio poiché questo ci dà la massima flessibilità.

Letture consigliate : Automatizzare la direzione artistica con il generatore di punti di interruzione dell'immagine reattiva di Eric Portis

Ho caricato l'immagine originale sul mio account Cloudinary, il che significa che posso accedere a quell'immagine tramite il seguente URL:

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

Questa è l'immagine a grandezza naturale, grezza, originale e invariata con cui lavoreremo.

Possiamo modificare l'URL dell'immagine per generare una versione molto più piccola. Ad esempio, se vogliamo avere un'immagine con una larghezza di 600 pixel, potremmo aggiornare l'URL Cloudinary* in modo che sia il seguente:

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

* Nota il w_600 aggiunto all'URL.

Se tutto va bene, a questo punto, vedrai dove sta andando tutto questo. Sulla base dell'approccio di cui sopra, possiamo iniziare molto rapidamente a generare l'immagine giusta per il punto di interruzione giusto.

L'utilizzo di Cloudinary significa che non è necessario creare, archiviare e gestire più versioni della stessa immagine: Cloudinary lo fa al volo.

Aggiorniamo il nostro codice:

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

Possiamo scegliere un numero qualsiasi di punti di interruzione da osservare dall'elenco menzionato in precedenza e, poiché disponiamo di un osservatore, possiamo iscriverci alle modifiche e agire su di esse:

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

Per gestire le opzioni per le diverse immagini in Cloudinary, utilizzeremo un approccio che sarà molto facile da seguire. Per ogni caso, creeremo una variabile di opzioni e aggiorneremo l'URL Cloudinary finale.

Aggiungi quanto segue nella parte superiore della definizione del componente:

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

E aggiungi anche quanto segue alla prima istruzione 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;

Il risultato sarà un URL Cloudinary aggiornato:

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

Quali sono le opzioni che stiamo impostando qui?

• c_thumb (genera una miniatura dell'immagine);
• g_auto (si concentra sulla parte più interessante; vediamo la cattedrale nella miniatura);
• f_auto (serve il formato più appropriato per un determinato browser, ad esempio WebP per Chrome);
• q_auto (riduce la qualità, e quindi la dimensione complessiva, dell'immagine senza influire sulla grafica);
• w_400 (imposta la larghezza dell'immagine su 400px).

Per curiosità, confrontiamo la dimensione dell'immagine originale con questa immagine appena generata: 2,28 MB contro 29,08 KB!

Ora abbiamo un lavoro semplice: dobbiamo creare diverse opzioni per diversi punti di interruzione. Ho creato un'applicazione di esempio su StackBlitz in modo da poterla testare immediatamente (puoi anche vedere un'anteprima qui).

Conclusione

La varietà di dispositivi desktop e mobili e la quantità di media utilizzati nel Web di oggi ha raggiunto un numero eccezionale. Come sviluppatori web, dobbiamo essere in prima linea nella creazione di applicazioni web che funzionino su qualsiasi dispositivo e non influiscano sull'esperienza visiva.

Esistono numerosi metodi per assicurarsi che l'immagine giusta venga caricata sul dispositivo giusto (o anche durante il ridimensionamento di un dispositivo). In questo articolo, abbiamo esaminato un approccio che utilizza una funzione angolare integrata chiamata BreakPoint Observer che ci offre una potente interfaccia per gestire le immagini reattive. Inoltre, abbiamo anche dato un'occhiata a un servizio che ci consente di servire, trasformare e gestire le immagini nel cloud. Avendo a disposizione strumenti così avvincenti, possiamo comunque creare esperienze web visive coinvolgenti, senza perdere visitatori.