Optimiser les images

Les images occupent une grande place dans de nombreuses applications et peuvent contribuer fortement aux problèmes de performances, notamment à de faibles scores Core Web Vitals.

L'optimisation des images peut être un sujet complexe, mais Angular en gère l'essentiel pour vous avec la directive NgOptimizedImage.

Dans cette activité, vous allez apprendre à utiliser NgOptimizedImage pour que vos images soient chargées efficacement.

1. Importer la directive NgOptimizedImage

   Pour tirer parti de la directive NgOptimizedImage, importez-la d'abord depuis la library @angular/common et ajoutez-la au tableau imports du composant.

   import { NgOptimizedImage } from '@angular/common';
   
   @Component({
     imports: [NgOptimizedImage],
     ...
   })

2. Remplacer l'attribut src par ngSrc

   Pour activer la directive NgOptimizedImage, remplacez l'attribut src par ngSrc. Cela s'applique aussi bien aux sources d'images statiques (c'est-à-dire src) qu'aux sources d'images dynamiques (c'est-à-dire [src]).

   import { NgOptimizedImage } from '@angular/common';
   
   @Component({
   template: `     ...
       <li>
         Static Image:
         <img ngSrc="/logo.svg" alt="Angular logo" width="32" height="32" />
       </li>
       <li>
         Dynamic Image:
         <img [ngSrc]="logoUrl" [alt]="logoAlt" width="32" height="32" />
       </li>
       ...
     `,
   imports: [NgOptimizedImage],
   })

3. Ajouter les attributs width et height

   Notez que, dans l'exemple de code ci-dessus, chaque image possède à la fois un attribut width et un attribut height. Pour éviter le décalage de mise en page, la directive NgOptimizedImage exige ces deux attributs de taille sur chaque image.

   Lorsque vous ne pouvez pas ou ne voulez pas spécifier de height et de width statiques pour les images, vous pouvez utiliser l'attribut fill pour indiquer à l'image de se comporter comme une « image d'arrière-plan », en remplissant l'élément qui la contient :

   // Container div has 'position: "relative"'
   <div class="image-container">
     <img ngSrc="www.example.com/image.png" fill />
   </div>

   Note : Pour que l'image fill s'affiche correctement, son élément parent doit avoir le style position: "relative", position: "fixed" ou position: "absolute".

4. Prioriser les images importantes

   L'une des optimisations les plus importantes pour les performances de chargement consiste à donner la priorité à toute image susceptible d'être l'« élément LCP », c'est-à-dire le plus grand élément graphique affiché à l'écran au chargement de la page. Pour optimiser vos temps de chargement, pensez à ajouter l'attribut priority à votre « image hero » ou à toute autre image qui pourrait selon vous être un élément LCP.

   <img ngSrc="www.example.com/image.png" height="600" width="800" priority />

5. Facultatif : utiliser un loader d'images

   NgOptimizedImage vous permet de spécifier un loader d'images, qui indique à la directive comment formater les URL de vos images. Un loader vous permet de définir vos images avec des URL courtes et relatives :

   providers: [provideImgixLoader('https://my.base.url/')],

   L'URL finale sera 'https://my.base.url/image.png'

   <img ngSrc="image.png" height="600" width="800" />

   Les loaders d'images ne servent pas qu'à simplifier l'écriture : ils vous permettent d'exploiter toutes les capacités de NgOptimizedImage. Pour en savoir plus sur ces optimisations et sur les loaders intégrés pour les CDN les plus courants, consultez cette section.

En ajoutant cette directive à votre workflow, vos images se chargent désormais selon les bonnes pratiques, avec l'aide d'Angular 🎉

Pour en savoir plus, consultez la documentation de NgOptimizedImage. Continuez votre excellent travail ; découvrons maintenant le routing.