Gestion des points d'arrêt d'image avec Angular

Publié: 2022-03-10
Résumé rapide ↬ Une fonctionnalité angulaire intégrée appelée BreakPoint Observer nous offre une interface puissante pour traiter les images réactives. Jetons un coup d'œil à un service qui nous permet de servir, transformer et gérer des images dans le cloud. Disposer d'outils aussi convaincants nous aide à créer des expériences Web visuelles immersives, sans perdre de visiteurs.

En tant que développeurs Web, nous sommes souvent amenés à créer des applications réactives et riches en médias. Avoir de telles exigences en place signifie que nous devons travailler avec des points d'arrêt d'image, ainsi que des requêtes multimédias, car nous voulons offrir la meilleure expérience aux utilisateurs finaux. En plus de la liste des exigences, nous devrons peut-être utiliser un framework frontal tel que Angular, idéal pour créer des SPA et d'autres types d'applications.

Dans cet article, nous examinerons les points d'arrêt d'image, leurs cas d'utilisation et tout au long d'un exemple pratique ; nous les implémenterons dans une application Angular en utilisant le propre BreakPoint Observer d'Angular. En utilisant cette approche, nous soulignerons également pourquoi ce cadre populaire nous aide à travailler avec les techniques susmentionnées de manière transparente.

Points d'arrêt d'image et images réactives

À l'ère des mises en page réactives (où nous capturons des points d'arrêt en fonction de la taille de la fenêtre et en fonction du point d'arrêt, nous modifions la mise en page de la page), nous devons également nous assurer que les images peuvent être affichées avec les bonnes dimensions, même après une mise en page. changement. Choisir la bonne image est assez difficile pour les sites Web réactifs modernes.

Discutons de deux options que les développeurs peuvent utiliser pour le moment.

Plus après saut! Continuez à lire ci-dessous ↓

srcset

srcset nous permet de définir une liste d'images entre lesquelles le navigateur bascule en fonction de la taille <img> rendue et de la densité de l'affichage.

Prenons un exemple :

 <img src="tuscany.jpg" />

Dans ce qui précède, nous spécifions 3 images, le w indiquant la largeur en pixels de l'image. Lorsque vous utilisez ce qui précède avec srcset nous devons également spécifier l'attribut sizes (ceci est nécessaire car la spécification stipule que si nous utilisons srcset et w , nous devons également avoir un attribut tailles). A quoi sert cet attribut ? Les navigateurs doivent choisir la ressource à charger à partir d'un ensemble source avant de mettre en page la page (avant de savoir quelle sera la taille de l'image). Nous pouvons considérer les sizes comme un indice pour le navigateur qu'après la mise en page, l'image occupera 100 % de la largeur de la fenêtre d'affichage (c'est à cela que vw fait référence). Le navigateur connaît la largeur réelle de la fenêtre d'affichage (ainsi que le DPR de l'image) au moment du chargement, il peut donc faire le calcul pour déterminer la taille de ressource dont il a besoin et en choisir une dans l'ensemble source.

Les combinaisons d'éléments <picture> et <source media=""> nous permettent de changer les ressources d'image en réponse aux requêtes média, comme celles aux points d'arrêt de la mise en page.

Jetons également un coup d'œil à un exemple :

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

Modifiez localement le code ci-dessus avec une image de votre choix de taille petite, moyenne et grande. Remarquez comment, en redimensionnant le navigateur, vous obtenez une image différente.

La clé à retenir de tout ce qui précède est que si nous voulons échanger des images à des points d'arrêt spécifiques, nous pouvons utiliser l'élément <picture> pour placer les requêtes multimédia directement dans le balisage.

Remarque : Si vous souhaitez explorer les différences entre <picture> et srcset + sizes , je vous recommande de lire l'excellent article d'Eric Portis : srcset and sizes .

Jusqu'à présent, nous avons expliqué comment utiliser les points d'arrêt d'image avec les requêtes multimédias dans un environnement HTML pur. Ne serait-il pas préférable d'avoir un moyen pratique, presque semi-automatisé, de générer des points d'arrêt d'image ainsi que les images correspondantes pour les points d'arrêt, même sans avoir à spécifier de requêtes multimédias ? Heureusement pour nous, Angular dispose d'un mécanisme intégré pour nous aider et nous examinerons également la génération dynamique des images appropriées en fonction de certaines conditions en utilisant un service tiers.

Module de disposition angulaire

Angular est livré avec un module de mise en page qui réside dans l'ensemble d'outils CDK (Component Dev Kit). Le CDK angulaire contient des outils bien testés pour faciliter le développement de composants. Une partie du CDK est le module de mise en page qui contient un BreakpointObserver . Cet assistant donne accès aux points d'arrêt de requête multimédia, ce qui signifie que les composants (et leur contenu) peuvent s'adapter aux changements lorsque la taille du navigateur (taille de l'écran) est modifiée de manière intuitive.

Lecture recommandée : Module de mise en page

Maintenant que nous avons la théorie à l'écart, passons aux choses sérieuses et créons une application qui implémentera des points d'arrêt d'image réactifs. Dans cette première itération, nous allons créer le shell de l'application via la CLI angulaire : ng new bpo et sélectionner les options nécessaires.

Pour utiliser BreakpointObserver , nous devons également installer le module de mise en page CDK d'Angular, ce que nous pouvons faire via npm: npm i @angular/cdk .

Après l'installation, nous pourrons ajouter les déclarations d'importation nécessaires à n'importe quel composant que nous souhaitons :

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

En utilisant BreakpointObserver , nous pouvons nous abonner aux modifications de la largeur de la fenêtre d'affichage et Angular nous donne des accesseurs pratiques, ce qui signifie que nous n'avons pas du tout besoin d'utiliser des requêtes multimédias ! Allons-y et essayons ceci :

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

Comme mentionné précédemment, les propriétés d'accesseur ci-dessus reflètent les requêtes multimédias de la manière suivante :

  • Breakpoints.XSmall : largeur maximale = 599,99 px
  • Breakpoints.Small : min-width = 600px et max-width = 959.99px
  • Breakpoints.Medium : min-width = 960px et max-width = 1279.99px
  • Breakpoints.Large : min-width = 1280px et max-width = 1919.99px
  • Breakpoints.XLarge d'arrêt.XLarge : min-width = 1920px

Nous avons maintenant tout en place, ce qui signifie que nous pouvons commencer à générer les images appropriées.

Points d'arrêt réactifs pour les images

Nous avons quelques options pour générer des images réactives :

  1. Générateur de points d'arrêt d'image réactif
    En utilisant cet outil, nous pouvons télécharger n'importe quelle image, configurer diverses options, par exemple le nombre d'images que nous souhaitons générer. Après avoir exécuté l'outil, nous aurons une représentation visuelle des images générées, et nous pourrons les télécharger sous forme de fichier zip avec du code généré qui utilise l'élément <picture> mentionné précédemment.
  2. Une autre solution serait de créer une étape de construction pour notre projet afin de générer des points d'arrêt via certains packages disponibles dans le référentiel NPM, tels que gulp-responsive ou grunt-responsive-images . Ces deux éléments dépendent de bibliothèques supplémentaires que nous devons installer pour notre système d'exploitation. (Veuillez vérifier les référentiels appropriés pour plus d'informations.)
  3. Une autre solution serait d'utiliser un service tel que Cloudinary pour stocker les images et les servir dans une taille et un format dont nous n'avons besoin qu'en modifiant l'URL de la ressource demandée. Ce sera notre approche car cela nous donne le plus de flexibilité.

Lecture recommandée : Automatiser la direction artistique avec le générateur de points d'arrêt d'image réactif par Eric Portis

J'ai téléchargé l'image originale sur mon compte Cloudinary, ce qui signifie que je peux accéder à cette image via l'URL suivante :

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

Il s'agit de l'image grandeur nature, brute, originale et inchangée avec laquelle nous allons travailler.

Nous pouvons modifier l'URL de l'image pour générer une version beaucoup plus petite. Par exemple, si nous voulons avoir une image d'une largeur de 600 pixels, nous pourrions mettre à jour l'URL Cloudinary* pour qu'elle soit la suivante :

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

* Notez le w_600 ajouté à l'URL.

J'espère qu'à ce stade, vous voyez où tout cela mène. Sur la base de l'approche ci-dessus, nous pouvons très rapidement commencer à générer la bonne image pour le bon point d'arrêt.

L'utilisation de Cloudinary signifie que nous n'avons pas besoin de créer, de stocker et de gérer plusieurs versions de la même image - c'est fait pour nous par Cloudinary à la volée.

Mettons à jour notre code :

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

Nous pouvons choisir n'importe quel nombre de points d'arrêt à observer dans la liste mentionnée précédemment, et puisque nous avons un observateur, nous pouvons souscrire aux changements et agir en conséquence :

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

Pour gérer les options des différentes images dans Cloudinary, nous utiliserons une approche qui sera très facile à suivre. Pour chaque cas, nous allons créer une variable d'options et mettre à jour l'URL Cloudinary finale.

Ajoutez ce qui suit en haut de la définition du composant :

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

Et ajoutez également ce qui suit à la première instruction 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;

Le résultat sera une URL Cloudinary mise à jour :

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

Quelles sont les options que nous définissons ici ?

  • c_thumb (génère une vignette de l'image) ;
  • g_auto (se concentre sur la partie la plus intéressante ; on voit la cathédrale dans la vignette );
  • f_auto (sert le format le plus approprié pour un navigateur donné, c'est-à-dire WebP pour Chrome) ;
  • q_auto (réduit la qualité — et donc la taille globale — de l'image sans impacter les visuels) ;
  • w_400 (fixe la largeur de l'image à 400px).

Par curiosité, comparons la taille de l'image d'origine avec cette image nouvellement générée : 2,28 Mo contre 29,08 Ko !

Nous avons maintenant un travail simple : nous devons créer différentes options pour différents points d'arrêt. J'ai créé un exemple d'application sur StackBlitz afin que vous puissiez le tester immédiatement (vous pouvez également voir un aperçu ici).

Conclusion

La variété d'appareils de bureau et mobiles et la quantité de médias utilisés sur le Web d'aujourd'hui ont atteint un nombre exceptionnel. En tant que développeurs Web, nous devons être à l'avant-garde de la création d'applications Web qui fonctionnent sur n'importe quel appareil et n'affectent pas l'expérience visuelle.

Il existe un bon nombre de méthodes qui garantissent que la bonne image est chargée sur le bon appareil (ou même lors du redimensionnement d'un appareil). Dans cet article, nous avons passé en revue une approche qui utilise une fonctionnalité angulaire intégrée appelée BreakPoint Observer, qui nous offre une interface puissante pour traiter les images réactives. De plus, nous avons également examiné un service qui nous permet de servir, transformer et gérer des images dans le cloud. Avec des outils aussi convaincants à portée de main, nous pouvons toujours créer des expériences Web visuelles immersives, sans perdre de visiteurs.