Bases angulaires : optimisation des images avec NgOptimizedImage

Découvrez comment la directive NgOptimizedImage peut être utilisée pour optimiser les images dans une application Angular en permettant aux développeurs d’exploiter facilement des fonctionnalités telles que le chargement différé, les espaces réservés pour les images et le redimensionnement automatique.

Angulaire fournit un large suite d’outils, d’API et de bibliothèques pour créer des interfaces utilisateur dynamiques et réactives. Dans un article précédentnous avons vu comment le flux de contrôle d’Angular bloque (@if, @for et @switch) nous permettent de manipuler facilement le DOM, de lier des données et de contrôler le flux de l’interface utilisateur de notre application.

Dans l’article d’aujourd’hui, nous explorerons comment le NgOptimizedImage La directive peut être utilisée pour optimiser les images dans une application angulaire.

NgOptimizedImage

Un aspect important de la création d’une expérience utilisateur transparente dans les applications Web consiste à optimiser les images pour garantir qu’elles se chargent efficacement. NgOptimizedImage est une directive angulaire intégrée qui peut être utilisée pour simplifier l’optimisation des images car elle nous permet d’optimiser facilement les images en les compressant, en les redimensionnant et en les mettant en cache. Cela se traduit par des chargements de pages plus rapides, une consommation de bande passante réduite et des performances globales améliorées.

Pour utiliser le NgOptimizedImage directive, nous pouvons d’abord l’importer depuis la @angular/common annuaire:

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

Une fois importée, nous pouvons ajouter la directive dans le imports tableau d’un certain composant ou module angulaire.

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

@Component({
  imports: [NgOptimizedImage],
})
export class ImageComponent {}

Une fois la NgOptimizedImage directive est incluse dans les importations de votre composant ou module, nous pouvons utiliser la ngSrc attribut dans vos éléments d’image pour activer l’optimisation de l’image.

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

@Component({
  template: `<img ngSrc="https://www.telerik.com/blogs/dog.png" alt="Descriptive alt text" />`,
  imports: [NgOptimizedImage],
})
export class ImageComponent {}

ngSrc remplace la norme src attribut, signalant à Angular de gérer l’image en utilisant les optimisations fournies par le NgOptimizedImage directif.

Priorité

Le NgOptimizedImage La directive fournit diverses options de configuration pour personnaliser l’optimisation de l’image. À titre d’exemple, pour les images essentielles à la mise en page, telles que La plus grande peinture de contenu (LCP) éléments, les La documentation angulaire recommande toujours en les marquant avec le priority attribut:

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

@Component({
  template: `
    <img 
      priority 
      ngSrc="https://www.telerik.com/blogs/dog.png" 
      alt="Descriptive alt text" 
    />
  `,
  imports: [NgOptimizedImage],
})
export class ImageComponent {}

Marquer une image avec le priority la balise donne la priorité au chargement de l’image en utilisant fetchpriority="high" et loading="eager". Cela donne non seulement la priorité au chargement de l’image, mais garantit également le préchargement de l’image, ce qui signifie qu’il demande au navigateur de télécharger l’image dès que possible, avant même de traiter le reste du contenu de la page. Ceci est particulièrement utile pour les images qui sont essentielles au maintien d’une bonne expérience utilisateur en réduisant les temps de chargement visuel et en améliorant les performances perçues.

Largeur et hauteur

La définition de la largeur et de la hauteur des images permet de maintenir la stabilité de la mise en page d’une page Web lors du chargement de ces images. Sans ces attributs, le contenu de la page pourrait changer de manière inattendue à mesure que les images se chargent, ce qui peut avoir un impact négatif sur l’expérience utilisateur et provoquer des changements de mise en page, souvent mesurés comme suit : Changement de mise en page cumulatif (CLS) dans les mesures de performance.

Afin d’éviter des changements de disposition inattendus, le NgOptimizedImage la directive nous oblige à préciser le width et height attributs directement sur notre élément d’image.

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

@Component({
  template: `
    <img 
      width="600" 
      height="400"
      ngSrc="https://www.telerik.com/blogs/dog.png"
      alt="Descriptive alt text" 
    />
  `,
  imports: [NgOptimizedImage],
})
export class ImageComponent {}

Remplir

Le fill L’attribut peut être utilisé pour ajuster la manière dont les images s’intègrent dans leur espace désigné de manière réactive et visuellement attrayante. Cet attribut est utile lorsqu’il s’agit d’images dans une mise en page fluide ou réactive où la taille du conteneur d’image peut changer en fonction de la fenêtre d’affichage ou du périphérique (c’est-à-dire que nous voulons que l’image « remplisse » un espace contenant).

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

@Component({
  template: `
    <img 
      fill 
      ngSrc="https://www.telerik.com/blogs/dog.png" 
      alt="Descriptive alt text" 
    />
  `,
  imports: [NgOptimizedImage],
})
export class ImageComponent {}

Lors de l’utilisation du fill propriété, nous ne devrions pas spécifier explicitement height ou width attributs sur l’élément image, car l’intention est de permettre à l’image de s’adapter dynamiquement à la taille de son conteneur, en remplissant l’espace selon les besoins en fonction des contraintes de mise en page.

Espaces réservés

Le placeholder L’attribut est une autre fonctionnalité utile qui peut être utilisée parallèlement à l’attribut NgOptimizedImage directive pour améliorer la gestion des images dans les applications angulaires. Cet attribut permet de gérer la façon dont les images sont affichées pendant leur chargement, offrant ainsi une meilleure expérience utilisateur en évitant les espaces vides ou les sauts brusques dans la mise en page.

Espaces réservés automatiques

Si notre configuration comprend un réseau de diffusion de contenu (CDN) ou un service d’hébergement d’images prenant en charge le redimensionnement automatique, le NgOptimizedImage La directive nous permet d’utiliser des espaces réservés automatiques. Il s’agit généralement de versions basse résolution des images originales qui se chargent rapidement, fournissant un aperçu pendant le chargement de l’image pleine résolution et qui peuvent être appliquées en ajoutant simplement le placeholder attribut:

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

@Component({
  template: `
    <img 
      placeholder
      ngSrc="https://www.telerik.com/blogs/dog.png"
      width="600"
      height="400"
    />
  `,
  imports: [NgOptimizedImage],
})
export class ImageComponent {}

Espaces réservés pour les URL de données

Dans les situations où un chargeur d’images n’est pas disponible ou inadapté, une URL de données peut servir d’espace réservé. Il s’agit d’encoder une petite version de l’image directement au format Base64 :

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

@Component({
  template: `
    <img
      placeholder="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADSCA..."
      ngSrc="https://www.telerik.com/blogs/dog.png"
      width="600"
      height="400"
    />
  `,
  imports: [NgOptimizedImage],
})
export class ImageComponent {}

Bien que cette méthode puisse augmenter la taille de chargement initiale de votre code HTML, elle est efficace pour les images critiques pour lesquelles vous devez garantir une disponibilité immédiate sans dépendre de ressources externes.

Espaces réservés non flous

Pour les scénarios dans lesquels un espace réservé plus distinct et plus clair est préféré à la version floue par défaut, le NgOptimizedImage La directive peut être configurée pour utiliser des espaces réservés non flous. Cette option est particulièrement utile pour conserver une certaine esthétique ou lorsque l’effet de flou peut nuire au design de l’interface utilisateur :

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

@Component({
  template: `
    <img
      placeholder
      [placeholderConfig]="{ blur: false }"
      ngSrc="https://www.telerik.com/blogs/dog.png"
      width="600"
      height="400"
    />
  `,
  imports: [NgOptimizedImage],
})
export class ImageComponent {}

Dans cet exemple, le [placeholderConfig]="{ blur: false }" la configuration désactive explicitement l’effet de flou sur l’espace réservé. Par conséquent, l’image d’espace réservé conservera sa clarté d’origine mais pourra être affichée avec une résolution inférieure ou des détails simplifiés jusqu’au chargement de l’image en pleine résolution.

Chargeurs

Un chargeur d’images est une fonction qui génère un URL de transformation d’image pour un fichier image donné. Cela peut être utile pour optimiser la manière dont les images sont diffusées tout en tenant compte des conditions et exigences spécifiques de l’appareil de chaque utilisateur.

Le NgOptimizedImage La directive fournit divers chargeurs pour prendre en charge différents services d’image et nous permet de créer des chargeurs personnalisés. Il existe trois types de chargeurs qui existent avec NgOptimizedImage:

• Chargeur générique: n’applique aucune transformation et renvoie l’URL de l’image d’origine.
• Chargeurs de services d’images tiers: Chargeurs préconfigurés pour des services comme Flare nuageuse, Nuageux, Kit d’images, Imgix et Netlifier.
• Chargeurs personnalisés: chargeurs définis par le développeur pour les services d’imagerie non pris en charge ou les transformations personnalisées.

Pour utiliser un chargeur intégré (c’est-à-dire un chargeur tiers), nous pouvons ajouter la fabrique du fournisseur au fichier providers tableau, en passant l’URL de base des ressources d’image comme argument. Par exemple:

import { NgOptimizedImage, provideCloudinaryLoader } from '@angular/common'

@Component({
  template: `
    <img 
      ngSrc="https://www.telerik.com/blogs/dog.png"
      width="600"
      height="400"
    />
  `,
  imports: [NgOptimizedImage],
  providers: [provideCloudinaryLoader('https://res.cloudinary.com')]
})

Pour utiliser un chargeur personnalisé, nous pouvons fournir une fonction de chargeur comme valeur pour le IMAGE_LOADER jeton d’injection de dépendance. La fonction de chargement prend un ImageLoaderConfig object comme argument et renvoie l’URL absolue de la ressource image. Par exemple:

import { NgOptimizedImage, IMAGE_LOADER } from '@angular/common'

@Component({
  template: `
    <img 
      ngSrc="https://www.telerik.com/blogs/dog.png"
      width="600"
      height="400"
    />
  `,
  imports: [NgOptimizedImage],
  providers: [
    {
      provide: IMAGE_LOADER,
      useValue: (config: ImageLoaderConfig) => {
        return `https://example.com/images?src=${config.src}&width=${config.width}`;
      },
    },
  ]
})

Conclure

Dans cet article, nous avons exploré comment NgOptimizedImage La directive peut être utilisée pour optimiser les images dans une application angulaire. En tirant parti de fonctionnalités telles que le chargement différé, les espaces réservés pour les images et le redimensionnement automatique, les développeurs peuvent garantir que leurs applications sont à la fois efficaces et visuellement attrayantes.

Pour plus de détails sur les capacités d’optimisation d’image d’Angular, assurez-vous de consulter le documentation officielle pour démarrer avec NgOptimizedImage!