Pourquoi la nouvelle directive d’image d’Angular vaut la peine d’être connue

La nouvelle directive d’image dans Angular, NgOptimizedImage, facilite le chargement paresseux, les préconnexions et les avertissements liés aux problèmes d’image.

L’équipe de développeurs Angular a finalement décidé de rattraper le framework par rapport au reste des écosystèmes de framework. Deux des principales façons dont il a fait cela récemment sont avec Signaux et avec composants autonomes. L’équipe a réalisé qu’elle devait rivaliser en termes de vitesse et de fonctionnalités, sinon elle serait laissée pour compte.

Cependant, l’une des fonctionnalités les plus récentes qui n’est pas souvent mentionnée est la nouvelle directive image, NgOptimizedImage. La plupart des gens ne connaissent que img élément avec src, width et height-Cependant, le HTMLImageElement a tellement plus.

Travailler avec le Équipe Chrome Aurora, l’équipe Angular a construit quelque chose qui facilite l’utilisation des fonctionnalités étendues des éléments d’image. Seul Next.js a cela intégré, mais il existe des packages tiers pour d’autres frameworks :

Avoir du bien Éléments essentiels du Web pour le référencement, le Largest Contentful Paint (LCP) ne doit pas durer moins de 2,5 secondes. Grâce à NgOptimizedImage, les créateurs ont réussi à montrer une amélioration des performances des ordinateurs de bureau de 75 % et des performances mobiles de 40 %. Ceci est une grosse affaire. Si vous n’utilisez pas Angular, vous devez connaître toutes les fonctionnalités modernes que HTML a à offrir.

Terminologie de base des images HTML5

Si vous utilisez du HTML5 pur, il existe quelques img attributs pour la balise d’image en plus du src utilisé pour l’afficher.

Référencement

largeur hauteur

Les bases rendu largeur et hauteur d’une image. Ceci est extrêmement important pour le référencement et aide les navigateurs stupides à afficher correctement l’image.

alt

Le contenu « de secours alternatif » à afficher si l’image n’est pas chargée. Ceci est également affiché lorsque vous survolez une image. Google l’utilise pour l’indexation.

Aller chercher

préconnexion / précharge

Ceux-ci sont link étiqueter rel des valeurs qui permettent à votre page de précharger ou de se préconnecter à des sources externes. Le préchargement est généralement utilisé pour les médias.

<link rel="preconnect" href="https://some-cdn.com">

récupérerPriorité

Les options possibles étant low, high ou auto qui indiquent au navigateur comment prioriser la récupération de l’image.

chargement

Les options possibles étant eager ou lazy, qui indique au navigateur comment charger l’image. Le chargement paresseux ne se produira pas tant que l’image ne sera pas visible.

<img src="hermes.jpg" fetchpriority="high" loading="eager" alt="Adorable kitty">

Dimensionnement

srcset

Il s’agit d’une liste de sources d’images pour des images de différentes tailles, la largeur indiquant au navigateur comment choisir l’image en fonction des différentes tailles d’écran.

tailles

Vous devez également prendre en compte la résolution. Ceci spécifie quelle image utiliser en fonction de la fenêtre d’affichage de l’utilisateur.

Ils doivent être utilisés ensemble comme ceci :

<img
  srcset="https://www.telerik.com/elva-fairy-480w.jpg 480w, https://www.telerik.com/elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="https://www.telerik.com/blogs/elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

Sources facultatives

image / source

Le picture et source Les balises permettent à votre navigateur de choisir la meilleure source pour l’image si votre navigateur prend en charge des technologies telles que WebP, AVIF ou SVG. Vous pouvez utiliser le type attribut pour définir le type d’image et le media attribut pour les images réactives de cette façon.

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" media="(max-width: 799px)" srcset="flower-480w.jpg">
  <source type="image/jpeg" media="(min-width: 800px)" srcset="flower-800w.jpg">
  <img src="flower.jpg" alt="Flowers of sunshine">
</picture>

Maintenant que vous connaissez les bases, voyons comment les utiliser automatiquement dans Angular.

Installation

Importez la classe et ajoutez-la à vos importations.

Version du module Ng

import { NgOptimizedImage } from '@angular/common';

@NgModule({
  imports: [NgOptimizedImage],
})
class AppModule {}

Version du composant autonome

import { NgOptimizedImage } from '@angular/common';

@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}

Et change juste ton img src attribut pour utiliser le ngSrc attribut.

<img ngSrc="https://angular.io/assets/images/logos/angular/logo-nav@2x.png">

Gardez à l’esprit que vous devriez aussi généralement avoir un alt étiquette et width et height des balises pour les bonnes pratiques et pour le référencement. C’est ça!

Avertissements

L’une des fonctionnalités uniques les plus intéressantes de la classe Angular est l’avertissement qu’elle fournit.

Cet exemple vous montre comment il détecte quelle image est l’image prioritaire. Ainsi, sans trop réfléchir, il affiche les avertissements pour résoudre divers problèmes, notamment :

• Ajouter une priorité si nécessaire
• Définir la largeur et la hauteur
• Utiliser des tailles
• Images surdimensionnées / Mauvais rapport hauteur / largeur / Mauvaise densité d’image

Comment NgOptimizedImage aide

Afin de comprendre les fonctionnalités, vous devez regarder le trois aspects essentiels le module aide.

Allons creuser.

1. Conflit de ressources

Par défaut, toutes les images sont demandées en même temps, « volant de la bande passante » les unes aux autres. Voici comment résoudre ce problème.

• Utilisez la directive image. Désormais, par défaut, toutes les images sont chargées paresseusement. Cependant, comme vous pouvez le voir dans l’avertissement ci-dessus, les images qui s’affichent immédiatement (sans avoir à les faire défiler) doivent être définies sur priority. Cela définit essentiellement le loading à eager et des ensembles fetchpriority à high pour l’image LCP. Cela seul fera perdre des secondes.

  <img ngSrc="someimage.jpg" priority>
  

  Sous la capuche

  <img src="someimage.jpg" loading="eager" fetchpriority="high" alt="some image">
  

2. Retard de chargement des ressources

Afin d’éviter que le navigateur n’ait besoin de rechercher dans le DNS des images hébergées en externe, d’obtenir cette connexion initiale avec une poignée de main et de négocier en toute sécurité avec le serveur, vous pouvez vous pré-connecter aux domaines auxquels vous savez que le site Web finira par se connecter. Cela évite tout retard dans la connexion aux images.

Toutes les images qui ne le sont pas priority doivent être chargés paresseux et toutes les sources externes doivent utiliser preconnect. En plus de tout charger en même temps, il précharge ce dont il a besoin et se préconnecte aux serveurs. Cela fonctionne bien avec Resource Contention.

3. Délai de ressource

C’est le temps qu’il faut réellement pour télécharger l’image, chaque fois que vous décidez de la télécharger. Vous ne souhaiterez peut-être pas toujours la version la plus grande de l’image, car une grande image peut prendre 2 secondes. Il ne vous reste plus qu’à définir le sizes attribut, et
NgOptimizedImage générera automatiquement le srcset pour toi!

Cependant, certains CDN ont encore plus de capacités. Cette directive vous permet d’utiliser les paramètres optimaux du fournisseur avec votre image, notamment en utilisant Cloudflare, Cloudinary, ImageKit ou Imgix. Par exemple, IMGIX a un Format automatique indicateur qui demande les types WebP ou AVIF. Vous pouvez également écrire le vôtre Chargeur de nuage.

Feuille de route

• Il y a un aperçu du développeur pour fill, qui est disponible dès maintenant. Cela vous permet d’éliminer la largeur/hauteur et d’ajouter des styles pour le dimensionnement automatique.
• Prise en charge des balises d’image
• Générer automatiquement preconnect balises de lien

Les meilleures pratiques évoluent constamment. Avec le ngOptimizedImage directive, vous n’avez plus à vous soucier de les suivre. C’est une grande victoire pour les utilisateurs d’Angular.