Performances des images

Les images sont souvent la ressource la plus lourde et la plus répandue sur le Web. En tant que , l'optimisation des images peut considérablement améliorer les performances de votre site Web. Dans la plupart des cas, l'optimisation des images consiste à réduire le temps d'attente du réseau en envoyant mais vous pouvez aussi optimiser la quantité d'octets envoyés à l'utilisateur diffuser des images qui sont correctement dimensionnées pour l'appareil de l'utilisateur.

Vous pouvez ajouter des images à une page à l'aide des éléments <img> ou <picture>. la propriété background-image CSS ;

Taille d'image

La première optimisation que vous pouvez effectuer lorsqu'il s'agit d'utiliser des ressources d'image est pour afficher l'image à la bonne taille. Dans ce cas, le terme taille fait référence à Les dimensions d'une image Aucune autre variable n'est prise en compte. Une image affichée dans un conteneur de 500 x 500 pixels aurait une taille optimale de 500 pixels 500 pixels. Par exemple, l'utilisation d'une image carrée de 1 000 pixels deux fois plus grand que nécessaire.

Cependant, le choix de la taille d'image correcte dépend de nombreuses variables, le choix de la bonne taille d'image sera toujours compliquée. En 2010, lors de la sortie de l'iPhone 4, la résolution d'écran (640 x 960), soit le double de celui de l'iPhone 3 (320 x 480). Cependant, la taille physique de l'écran de l'iPhone 4 est resté à peu près identique à celui de l'iPhone 3.

Le fait d'afficher tous les éléments à une résolution plus élevée aurait généré du texte et des images significativement plus petite (la moitié de sa taille précédente pour être exact). Au lieu de cela, 1 pixel est devenue 2 pixels de l'appareil. C'est ce qu'on appelle le rapport de pixels de l'appareil (DPR). La L'iPhone 4 (et de nombreux modèles d'iPhone sortis après) a obtenu un DPR de 2.

Reprenons l'exemple précédent : si l'appareil a un DPR de 2 et que l'image est affichée dans un conteneur de 500 x 500 pixels, puis une image carrée de 1 000 pixels (appelée taille intrinsèque) est maintenant la taille optimale. De même, si le a un DPR de 3, une image carrée de 1 500 pixels serait la taille optimale.

srcset

L'élément <img> est compatible avec l'attribut srcset, qui vous permet de spécifier un liste des sources d'images possibles avec le navigateur. Chaque source d'image spécifiée doit inclure l'URL de l'image et un descripteur de largeur ou de densité en pixels.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

L'extrait de code HTML précédent utilise le descripteur de densité de pixels pour indiquer au navigateur pour utiliser image-500.png sur les appareils avec un DPR de 1, image-1000.jpg sur les appareils avec un DPR de 2 et image-1500.jpg sur les appareils avec un DPR de 3.

Bien que tout cela puisse sembler simple, la DPR d'un écran n'est pas le seul lors du choix de l'image optimale pour une page donnée. L'URL la mise en page est un autre élément à prendre en compte.

sizes

La solution précédente ne fonctionne que si vous affichez l'image au même pixel CSS. sur toutes les fenêtres d'affichage. Dans de nombreux cas, la mise en page d'une page et et sa taille varie en fonction de l'appareil de l'utilisateur.

L'attribut sizes vous permet de spécifier un ensemble de tailles sources, où chaque la taille de la source se compose d'une condition multimédia et d'une valeur. Attribut sizes décrit la taille d'affichage prévue de l'image en pixels CSS. Lorsqu'elles sont combinées avec les descripteurs de largeur srcset, le navigateur peut choisir la source de l'image convient mieux à l'appareil de l'utilisateur.

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

Dans l'extrait de code HTML précédent, l'attribut srcset spécifie une liste d'images proposés par le navigateur, séparés par une virgule. Chaque candidat de cette liste comprend l'URL de l'image, suivie d'une syntaxe indiquant la la largeur intrinsèque de l'image. La taille intrinsèque d'une image correspond à ses dimensions. Pour Par exemple, un descripteur de 1000w indique que la largeur intrinsèque de l'image est Largeur de 1 000 pixels.

À l'aide de ces informations, le navigateur évalue l'état du contenu multimédia dans sizes. Dans ce cas, un message indique que si la largeur de la fenêtre d'affichage dépasse 768 pixels, l'image est affichée avec une largeur de 500 pixels. Sur les écrans plus petits appareil, l'image s'affiche à 100vw ou sur toute la largeur de la fenêtre d'affichage.

Le navigateur peut ensuite combiner ces informations avec la liste d'images srcset. afin de trouver l'image optimale. Par exemple, s'il utilise un mobile appareil d'une largeur d'écran de 320 pixels avec un DPR de 3, l'image est affichée à 320 CSS pixels x 3 DPR = 960 device pixels. Dans cet exemple, la formule la plus proche La taille d'une image est égale à image-1000.jpg, avec une largeur intrinsèque de 1 000 pixels (1000w).

Formats des fichiers

Les navigateurs acceptent différents formats de fichiers image. Les formats d'images modernes comme WebP et AVIF offrent une meilleure compression qu'en PNG ou JPEG. plus petite, et son téléchargement prend donc moins de temps. En diffusant de formats modernes, vous pouvez réduire le temps de chargement d'une ressource, ce qui peut entraîne une diminution de la métrique LCP (Largest Contentful Paint).

WebP est un format largement compatible qui fonctionne avec tous les navigateurs récents. WebP offre souvent une meilleure compression que JPEG, PNG ou GIF, offrant à la fois des fichiers avec perte et compression sans perte. WebP prend également en charge la transparence du canal alpha, en utilisant la compression avec pertes, une fonctionnalité que le codec JPEG ne propose pas.

AVIF est un format d'image plus récent. Bien qu'il n'ait pas autant de compatibilité que WebP, il bénéficie d'une assistance raisonnablement correcte quel que soit le navigateur utilisé. AVIF prend en charge à la fois et la compression sans perte. Les tests ont montré des économies de plus de 50% lorsque par rapport au JPEG dans certains cas. AVIF propose également Wide Color Gamut (WCG) et Fonctionnalités HDR (High Dynamic Range)

Compression

En ce qui concerne les images, il existe deux types de compression:

1. Compression avec perte
2. Compression sans perte

La compression avec perte réduit la précision de l'image via la quantification, Les autres informations de couleur peuvent être supprimées à l'aide du sous-échantillonnage de chrominance. La compression avec perte est plus efficace sur les images haute densité avec beaucoup de bruit et couleurs (généralement des photos ou des images avec des contenus similaires). En effet, les artefacts produits par compression avec pertes sont beaucoup moins susceptibles d'être remarqués dans des images aussi détaillées. Toutefois, la compression avec perte peut s'avérer moins efficace dans les cas suivants : des images contenant des arêtes tranchantes telles que des dessins au trait, des détails aussi épurés ou texte. La compression avec perte peut être appliquée aux images JPEG, WebP et AVIF.

La compression sans perte réduit la taille du fichier en compressant une image sans données de perte de données. La compression sans perte décrit un pixel en fonction de la différence par rapport à son pixels voisins. La compression sans perte est utilisée pour les fichiers GIF, PNG, WebP et aux formats d'image AVIF.

Vous pouvez compresser vos images à l'aide de Squoosh, d'ImageOptim ou d'une image service d'optimisation. Lors de la compression, il n'existe pas de paramètre universel adapté dans tous les cas. Nous vous recommandons de tester différentes jusqu'à trouver un bon compromis entre la qualité d'image la taille du fichier. Certains services avancés d'optimisation des images peuvent le faire pour vous automatiquement, mais elles risquent de ne pas être financièrement viables pour tous les utilisateurs.

L'élément <picture>

L'élément <picture> vous offre plus de flexibilité pour spécifier plusieurs Images candidates:

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

Lorsque vous utilisez un ou plusieurs éléments <source> dans l'élément <picture>, vous pouvez ajouter Compatibilité avec les images AVIF et WebP, mais utilisation d'une ancienne image plus compatible si le navigateur n'accepte pas les formats modernes. Avec cette approche, le navigateur sélectionne le premier élément <source> spécifié qui correspond. Si c'est le cas effectue le rendu de l'image dans ce format, il l'utilise. Sinon, le navigateur passe à l'élément <source> spécifié suivant. Dans le code HTML précédent, le format AVIF est prioritaire sur le format WebP. au format JPEG si ni les formats AVIF, ni WebP ne sont acceptés.

Un élément <picture> nécessite un élément <img> imbriqué à l'intérieur. La Les attributs alt, width et height sont définis sur <img> et utilisés quel que soit le <source> sélectionné.

L'élément <source> accepte également les éléments media, srcset et sizes . Comme dans l'exemple <img> précédent, elles indiquent au dans le navigateur l'image à sélectionner dans les différentes fenêtres d'affichage.

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

L'attribut media accepte une condition de contenu multimédia. Dans l'exemple précédent, la fonction DPR de l'appareil est utilisée comme condition du contenu multimédia. Tout appareil dont le DPR est supérieur à ou égal à 1,5 utilise le premier élément <source>. L'élément <source> indique au navigateur que, sur les appareils dont la largeur de la fenêtre d'affichage est supérieure à 768 pixels, L'image candidate sélectionnée s'affiche avec une largeur de 500 pixels. Sur les appareils plus petits, qui occupe toute la largeur de la fenêtre d'affichage. En combinant media et srcset vous pouvez contrôler plus précisément l'image à utiliser.

Ceci est illustré dans le tableau suivant, où plusieurs largeurs de fenêtre d'affichage et les rapports de pixels de l'appareil sont évalués:

Les appareils avec un DPR de 1 téléchargent l'image image-500.jpg, y compris la plupart Les utilisateurs d'ordinateurs de bureau qui affichent l'image à une taille extrinsique de 500 pixels de large. Activé En revanche, les mobinautes avec un DPR de 3 téléchargent un fichier image-1500.jpg : la même image que celle utilisée sur les ordinateurs, avec un DPR de 3.

<picture>
  <source
    media="(min-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

Dans cet exemple, l'élément <picture> est ajusté pour inclure Élément <source> afin d'utiliser des images différentes pour les appareils larges avec une résolution élevée:

Avec cette requête supplémentaire, vous pouvez voir que image-1000-sm.jpg et Les image-1500-sm.jpg s'affichent dans les fenêtres d'affichage de petite taille. Ces informations supplémentaires vous permet de compresser davantage les images, car les artefacts de compression ne sont pas très visibles à cette taille et à cette densité, sans compromettre la qualité de l'image sur les ordinateurs.

En ajustant les attributs srcset et media, vous pouvez également éviter Affichage d'images volumineuses dans des fenêtres d'affichage de petite taille:

<picture>
  <source
    media="(min-width: 560px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

Dans l'extrait de code HTML précédent, les descripteurs de largeur ont été supprimés au profit de de descripteurs de ratio de pixels entre les appareils. Les images diffusées sur un appareil mobile sont limitées en /image-500.jpg ou /image-1000.jpg, même sur les appareils dont le DPR est de 3.

Gérer la complexité

Lorsque vous travaillez avec des images réactives, vous pouvez vous retrouver avec de nombreuses des variantes de taille et des formats pour chaque image. Dans l'exemple précédent, les variantes pour chaque taille, à l'exception des formats AVIF et WebP. Combien de variantes devez-vous avez-vous ? Comme pour de nombreux problèmes d'ingénierie, la réponse est en général "ça dépend".

Même s'il peut être tentant d'avoir autant de variantes pour offrir la meilleure adéquation, chaque variante d'image supplémentaire a un coût et utilise moins efficacement le cache du navigateur. Avec une seule variante, chaque utilisateur reçoit la même image, pour pouvoir les mettre en cache de manière très efficace.

En revanche, s'il existe de nombreuses variantes, chaque variante nécessite une autre entrée de cache. Les coûts des serveurs peuvent augmenter et entraîner une dégradation des performances si le l'entrée de cache de la variante a expiré et l'image doit être de nouveau extraite le serveur d'origine.

En outre, la taille de votre document HTML augmente avec chaque variante. Toi vous pourriez devoir envoyer plusieurs kilo-octets de code HTML à chaque image.

Diffuser des images en fonction de l'en-tête de requête Accept

L'en-tête de requête HTTP Accept indique au serveur quels types de contenu sont que le navigateur de l'utilisateur comprenne. Ces informations peuvent être utilisées par votre serveur pour traiter le format d'image optimal sans ajouter d'octets supplémentaires à vos réponses HTML.

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

L'extrait de code HTML précédent est une version simplifiée du code que vous pouvez ajouter au backend JavaScript de votre serveur pour choisir et diffuser le format d'image optimal. Si l'en-tête Accept de la requête inclut image/avif, l'image AVIF est diffusées. Sinon, si l'en-tête Accept inclut image/webp, l'image WebP est diffusée. Si aucune de ces conditions n'est vraie, l'image JPEG est diffusées.

Vous pouvez modifier les réponses en fonction du contenu de l'en-tête de requête Accept sur presque tous les types de serveurs Web. Par exemple, vous pouvez réécrire les requêtes d'image sur les serveurs Apache en fonction de l'en-tête Accept à l'aide de mod_rewrite.

Ce comportement est assez proche d'un réseau de diffusion de contenu image (CDN). Les CDN pour les images sont d'excellentes solutions pour optimiser les images et envoyer le format optimal en fonction de l'appareil et du navigateur de l'utilisateur.

L'important est de trouver un équilibre, de générer un nombre raisonnable d'images candidates, et mesurer leur impact sur l'expérience utilisateur. Différentes images peuvent donner et les optimisations appliquées à chaque image dépendent sur la page et les appareils utilisés par vos utilisateurs. Par exemple, un l'image héros pleine largeur peut nécessiter plus de variantes que les vignettes d'une fiche produit d'e-commerce.

Chargement différé

Il est possible d'indiquer au navigateur de charger les images de manière différée lorsqu'elles apparaissent dans fenêtre d'affichage à l'aide de l'attribut loading. Une valeur d'attribut de lazy indique au navigateur de ne pas télécharger l'image tant qu'elle ne se trouve pas dans la fenêtre d'affichage (ou à proximité de celle-ci). Ce économise la bande passante, ce qui permet au navigateur de hiérarchiser les ressources nécessaires afficher le contenu essentiel déjà présent dans la fenêtre d'affichage.

decoding

L'attribut decoding indique au navigateur comment décoder l'image. A La valeur async indique au navigateur que l'image peut être décodée de manière asynchrone. en augmentant éventuellement le temps d'affichage d'autres contenus. Une valeur de sync indique navigateur que l'image doit s'afficher en même temps que les autres contenus. La valeur par défaut de auto permet au navigateur de décider ce qui convient le mieux utilisateur.

Démonstrations d'images

Tester vos connaissances

À suivre: Performances des vidéos

Bien que les images soient le type de support le plus répandu sur le Web, elles sont de loin celui dont vous devez tenir compte pour optimiser les performances. Vidéo est un autre type de média couramment utilisé sur le Web. Il est fourni avec les considérations de performances. Dans le prochain module de ce cours, vous découvrirez pour optimiser les vidéos et les charger efficacement.