Une fonction angulaire intégrée, appelée BreakPoint Observer, nous fournit 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 de tels outils convaincants nous permet de créer des expériences immersives sur le Web sans perdre de visiteurs.

En tant que développeurs Web, nous sommes souvent obligés de créer des applications à la fois réactives et riches en médias. Avoir de telles exigences en place signifie que nous devons travailler avec des points de rupture d'image, ainsi que des requêtes multimédia, car nous souhaitons offrir la meilleure expérience possible aux utilisateurs finaux. En ajoutant à la liste des exigences, nous aurons peut-être besoin d'utiliser un framework frontal, tel que Angular, idéal pour la création de ZPS et d'autres types d'applications.

Dans cet article, nous examinerons les points de rupture d'image, leur utilisation. cas et tout au long d'un exemple pratique; nous les implémenterons dans une application angulaire à l’aide de BreakPoint Observer de Angular. En utilisant cette approche, nous allons également expliquer pourquoi ce cadre populaire nous aide à utiliser les techniques susmentionnées de manière transparente.

Points de rupture d’image et images réactives

À l’ère des mises en page réactives (où nous capturons des points de la taille de la fenêtre et en fonction du point de rupture, nous changeons 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 un changement de mise en page. Le choix de 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.

srcset

srcset

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

Prenons un exemple:

Dans ce qui précède, nous spécifions 3 images, avec le w indiquant la largeur en pixels de l’image. Lorsque vous utilisez ce qui précède avec srcset vous devez également spécifier l'attribut tailles (nécessaire car les spécifications nous obligent à utiliser srcset et w. nous devons également avoir un attribut tailles). Quel est le but de cet attribut? Les navigateurs doivent choisir la ressource à charger dans un jeu de sources avant de mettre en page la page (avant de savoir quelle sera la taille de l'image). Les tailles sont un indice pour le navigateur que, après la mise en page, l’image occupera 100% de la largeur de la fenêtre (c’est ce 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 effectuer le calcul pour déterminer la taille de la ressource dont il a besoin et en choisir une dans l'ensemble des sources.

19659016] et les combinaisons d’éléments nous permettent d’exclure les ressources d’image en réponse aux requêtes de support, comme celles des points de cassure d’agencement.

Voyons également un exemple:

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

Ce qu'il faut 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 pour résoudre les requêtes de support.

Note : Si vous souhaitez explorer les différences entre et srcset + tailles ] Je recommande de lire l'excellent article d'Eric Portis: srcset et tailles .

Jusqu'à présent, nous avons expliqué comment utiliser les points de rupture d'image avec les requêtes de support 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 pour les images ainsi que les images correspondantes pour les points d'arrêt, même sans avoir à spécifier de requêtes de média? Heureusement pour nous, Angular dispose d'un mécanisme intégré pour nous aider et nous allons également voir comment générer les images appropriées de manière dynamique en fonction de certaines conditions en utilisant un service tiers.

Angular Layout Module

Angular est livré avec un module de disposition qui fait partie du jeu d’outils CDK (Component Dev Kit). Le CDK Angular contient des outils éprouvés d’aide au développement des composants. Une partie de la CDK est le module de disposition qui contient un BreakpointObserver . Cet assistant donne accès aux points d'arrêt d'interrogation de média, ce qui signifie que les composants (et leur contenu) peuvent s'adapter aux modifications lorsque la taille du navigateur (taille de l'écran) est modifiée de manière intuitive.

Lecture recommandée : Module

Maintenant que nous avons la théorie sur la voie, passons aux choses sérieuses et créons une application qui implémentera des points de rupture 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 avons également besoin de pour installer le module de mise en page CDK de Angular, ce que nous pouvons faire via npm: npm i @ angular / cdk .

Après l'installation, nous pourrons ajouter les instructions d'importation nécessaires à tout composant souhait:

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

En utilisant BreakpointObserver nous pouvons souscrire aux modifications de la largeur de la fenêtre de visualisation. Angular nous fournit des accesseurs pratiques, ce qui signifie que nous n’avons absolument pas besoin d’utiliser les requêtes multimédia! Essayons ceci:

 // app.component.ts
constructeur (public breakpointObserver: BreakpointObserver) {}

ngOnInit () {
    this.breakpointObserver.observe ([
      Breakpoints.XSmall,
      Breakpoints.Small,
      Breakpoints.Medium,
      Breakpoints.Large,
      Breakpoints.XLarge
    ]). subscribe (résultat => {
      if (result.breakpoints [Breakpoints.XSmall]) {
       // gérer le point d'arrêt XSmall
      }
      if (result.breakpoints [Breakpoints.Small]) {
       // gérer un petit point d'arrêt
      }
      if (result.breakpoints [Breakpoints.Medium]) {
      // gérer un point d'arrêt moyen
      }
      if (result.breakpoints [Breakpoints.Large]) {
        // gérer un grand point d'arrêt
      }
      if (result.breakpoints [Breakpoints.XLarge]) {
        // gérer le point d'arrêt XLarge
      }
    });
  }

Comme indiqué précédemment, les propriétés d'accès ci-dessus reflètent les requêtes de support de la manière suivante:

• Breakpoints.XSmall : max-width = 599.99px
• 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 : min-width = 1920px

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

Responsive Breakpoints for Images

Nous en avons quelques-uns. options pour générer des images réactives:

1. Générateur de points d'arrêt pour images réactives
   Cet outil permet de télécharger n'importe quelle image et de 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é utilisant l'élément mentionné précédemment.
2. Une autre solution serait de créer une étape de construction de notre projet pour 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 consisterait à utiliser un service tel que Cloudinary pour stocker les images et les servir dans une taille et un format dont nous avons besoin uniquement en modifiant l'URL de la ressource demandée. . Ce sera notre approche car cela nous donne le plus de flexibilité.

Lectures recommandées : Automatisation de la direction artistique avec le générateur de points de rupture d'image réactifs de Eric Portis

J'ai mis à jour le 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 de taille réelle, brute, originale et inchangée.

Nous pouvons modifier l’URL de l’image pour en générer une version beaucoup plus petite. Par exemple, si vous souhaitez avoir une image d'une largeur de 600 pixels, vous pouvez mettre à jour l'URL Cloudinary * comme suit:

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

* Notez le w_600 ajouté à l'URL

Si tout va bien, à présent, vous voyez où tout cela se passe. 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 qu'il n'est pas nécessaire de créer, stocker et gérer plusieurs versions de la même image. nous par Cloudinary à la volée.

Mettons à jour notre code:

  
 le point d'arrêt actuel: {{point d'arrêt}} 
  

 // app.component.ts
importer {Component, OnInit} à partir de '@ angular / core';
// ...
La classe d'exportation AppComponent implémente OnInit {
  imagePath;
  constructeur (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 modifications et les appliquer:

 this.breakpointObserver.observe ([
  Breakpoints.XSmall,
  Points d'arrêt. Petit,
  Points de rupture.Médium,
  Points d'arrêt.
  Points de pause.XLarge
]). subscribe (résultat => {
  if (result.breakpoints [Breakpoints.XSmall]) {
    // gérer ce cas
  }
});

Pour gérer les options des différentes images dans Cloudinary, nous utiliserons une approche 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;
  point d'arrêt;
  cloudinaryOptions;
  baseURL = 'https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg';

Et ajoutez ce qui suit également à la première si déclaration:

 // 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 = Points d'arrêt.XSmall;

Le résultat va être une adresse URL de 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 nous proposons ici?

• c_thumb (génère une vignette de l'image);
• g_auto (se concentre sur la partie la plus intéressante; nous voyons la cathédrale
• f_auto (sert le format le plus approprié pour un navigateur donné, par exemple WebP pour Chrome);
• q_auto (réduit la qualité – et donc la taille globale – de l’image sans impact
• w_400 (définit la largeur de l'image à 400 pixels)

Par souci de curiosité, comparons la taille de l'image d'origine à cette image nouvellement générée: 2,28 Mo contre 29,08 Ko! [19659005] 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 ​​diversité des ordinateurs de bureau et des appareils mobiles et la quantité de médias utilisés dans le Web d'aujourd'hui a atteint un nombre remarquable. En tant que développeurs Web, nous devons être à la pointe de la création d'applications Web qui fonctionnent sur tous les appareils et n'affectent en rien l'expérience visuelle.

De nombreuses méthodes permettent de s'assurer que la bonne image est chargée sur le bon appareil. (ou même lors du redimensionnement d'un périphérique). Dans cet article, nous avons examiné une approche utilisant 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. En disposant de tels outils convaincants, nous pouvons toujours créer des expériences Web immersives sans perdre de visiteurs.

(dm, il)