Les images sont souvent les ressources les plus lourdes et les plus répandues sur le Web. Par conséquent, l'optimisation des images peut améliorer considérablement les performances de votre site Web. Dans la plupart des cas, l'optimisation des images consiste à réduire le temps réseau en envoyant moins d'octets, mais vous pouvez également optimiser la quantité d'octets envoyés à l'utilisateur en diffusant des images correctement dimensionnées pour son appareil.
Vous pouvez ajouter des images à une page à l'aide des éléments <img> ou <picture>, ou de la propriété background-image CSS.
Taille d'image
La première optimisation que vous pouvez effectuer pour utiliser des ressources image consiste à afficher l'image à la bonne taille. Dans ce cas, le terme taille fait référence aux dimensions d'une image. Sans autre variable, une image affichée dans un conteneur de 500 x 500 pixels aurait une taille optimale à 500 x 500 pixels. Par exemple, utiliser une image carrée de 1 000 pixels signifie qu'elle est deux fois plus grande que nécessaire.
Cependant, le choix de la bonne taille d'image implique de nombreuses variables, ce qui complique systématiquement le choix de la taille d'image appropriée dans chaque cas. En 2010, lors de la sortie de l'iPhone 4, la résolution d'écran (640 x 960) était le double de celle de l'iPhone 3 (320 x 480). Cependant, la taille physique de l'écran de l'iPhone 4 est restée à peu près la même que celle de l'iPhone 3.
Afficher tout le texte à une résolution plus élevée aurait réduit considérablement la taille du texte et des images (la moitié de leur taille précédente pour être exacte). Au lieu de cela, 1 pixel est devenu 2 pixels de l'appareil. C'est ce qu'on appelle le ratio de pixels de l'appareil (DPR). L'iPhone 4 et de nombreux modèles d'iPhone publiés après celui-ci présentaient 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, une image carrée de 1 000 pixels (appelée taille intrinsèque) est maintenant la taille optimale. De même, si l'appareil a un DPR de 3, une image carrée de 1 500 pixels est optimale.
srcset
L'élément <img> est compatible avec l'attribut srcset, qui vous permet de spécifier une liste des sources d'images que le navigateur peut utiliser. Chaque source d'image spécifiée doit inclure l'URL de l'image, ainsi qu'un descripteur de largeur ou de densité de 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 d'utiliser image-500.png sur les appareils dont le DPR est 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 parfait, le DPR d'un écran n'est pas le seul élément à prendre en compte pour choisir l'image optimale pour une page donnée. La mise en page de la page est un autre élément à prendre en compte.
sizes
La solution précédente ne fonctionne que si vous affichez l'image avec la même taille de pixels CSS dans toutes les fenêtres d'affichage. Dans de nombreux cas, la mise en page d'une page (et la taille du conteneur associé) change en fonction de l'appareil de l'utilisateur.
L'attribut sizes vous permet de spécifier un ensemble de tailles sources, chaque taille de source composée d'une condition média et d'une valeur. L'attribut sizes décrit la taille d'affichage prévue de l'image en pixels CSS. Lorsqu'il est associé aux descripteurs de largeur srcset, le navigateur peut choisir la source d'image la plus adaptée à 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 candidates que le navigateur peut choisir, séparées par des virgules. Chaque candidat de la liste comprend l'URL de l'image, suivie d'une syntaxe qui indique la largeur intrinsèque de l'image. La taille intrinsèque d'une image correspond à ses dimensions. Par exemple, un descripteur 1000w indique que la largeur intrinsèque de l'image est de 1 000 pixels de large.
À l'aide de ces informations, le navigateur évalue la condition multimédia dans l'attribut sizes et, dans ce cas, demande à l'utilisateur d'afficher l'image à une largeur de 500 pixels si la largeur de la fenêtre d'affichage de l'appareil dépasse 768 pixels. Sur les appareils de petite taille, l'image s'affiche sur 100vw ou sur toute la largeur de la fenêtre d'affichage.
Le navigateur peut ensuite combiner ces informations avec la liste des sources d'images srcset pour trouver l'image optimale. Par exemple, si l'utilisateur utilise un appareil mobile avec une largeur d'écran de 320 pixels et un DPR de 3, l'image s'affiche sur 320 CSS pixels x 3 DPR = 960 device pixels. Dans cet exemple, l'image de taille la plus proche serait image-1000.jpg, dont la largeur intrinsèque est de 1 000 pixels (1000w).
Formats des fichiers
Les navigateurs prennent en charge différents formats de fichiers image. Les formats d'image modernes tels que WebP et AVIF peuvent fournir une meilleure compression que le format PNG ou JPEG, ce qui réduit la taille de votre fichier image et prend donc moins de temps à télécharger. En diffusant des images dans des formats modernes, vous pouvez réduire le temps de chargement d'une ressource, ce qui peut réduire le LCP (Largest Contentful Paint).
WebP est un format largement pris en charge qui fonctionne sur tous les navigateurs récents. WebP offre souvent une meilleure compression que JPEG, PNG ou GIF, offrant à la fois une compression avec perte et une compression sans perte. WebP est également compatible avec la transparence du canal alpha, même lors de l'utilisation de la compression avec pertes, une fonctionnalité que le codec JPEG n'offre pas.
AVIF est un format d'image plus récent. Bien qu'il ne soit pas aussi largement accepté que WebP, il bénéficie d'une compatibilité raisonnablement acceptable avec tous les navigateurs. AVIF est compatible avec la compression avec et sans perte, et les tests ont montré des économies de plus de 50% dans certains cas par rapport au format JPEG. AVIF propose également les fonctionnalités Wide Color Gamut (WCG) et High Dynamic Range (HDR).
Compression
En ce qui concerne les images, il existe deux types de compression:
La compression avec pertes réduit la précision de l'image via la quantification, et des informations supplémentaires sur les couleurs peuvent être supprimées à l'aide du sous-échantillonnage de la chrominance. La compression avec pertes est particulièrement efficace sur des images haute densité qui comportent beaucoup de bruit et de couleurs, généralement des photos ou des images dont le contenu est similaire. En effet, les artefacts produits par la compression avec pertes sont beaucoup moins susceptibles d'être remarqués dans des images aussi détaillées. Cependant, la compression avec pertes peut être moins efficace avec des images contenant des bords nets, tels que des dessins au trait, des détails tout aussi nets ou du 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 perte de données. La compression sans perte décrit un pixel en fonction de sa différence par rapport à ses pixels voisins. La compression sans perte est utilisée pour les formats d'image GIF, PNG, WebP et AVIF.
Vous pouvez compresser vos images à l'aide de Squoosh, d'ImageOptim ou d'un service d'optimisation d'images. Lors de la compression, il n'existe pas de paramètre universel adapté à tous les cas. L'approche recommandée consiste à tester différents niveaux de compression jusqu'à ce que vous trouviez un bon compromis entre la qualité de l'image et la taille du fichier. Certains services avancés d'optimisation d'images peuvent le faire automatiquement, mais ils ne seront peut-être pas viables financièrement pour tous les utilisateurs.
L'élément <picture>
L'élément <picture> vous permet de spécifier plusieurs images candidates plus facilement:
<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 la prise en charge des images AVIF et WebP, mais utiliser d'anciens formats d'image plus compatibles si le navigateur n'est pas compatible avec les formats modernes. Avec cette approche, le navigateur sélectionne le premier élément <source> spécifié correspondant. S'il peut afficher l'image dans ce format, il l'utilise. Sinon, le navigateur passe à l'élément <source> spécifié suivant. Dans l'extrait HTML précédent, le format AVIF est prioritaire par rapport au format WebP et revient au format JPEG si ni AVIF ni WebP ne sont pris en charge.
Un élément <picture> nécessite un élément <img> imbriqué. 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 attributs media, srcset et sizes. Comme dans l'exemple <img> précédent, elles indiquent au navigateur l'image à sélectionner pour 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 utilise une condition de média. Dans l'exemple précédent, le DPR de l'appareil est utilisé comme condition 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 de petite taille, cette opération occupe toute la largeur de la fenêtre d'affichage. En combinant les attributs media et srcset, vous pouvez contrôler plus précisément l'image à utiliser.
Ce processus est illustré dans le tableau suivant, où plusieurs largeurs de fenêtre d'affichage et rapports de pixels de l'appareil sont évalués:
| Largeur de la fenêtre d'affichage (pixels) | 1 RDP | 1,5 DPR | 2 RDP | 3 RDP |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
| 480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
| 560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1 920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Les appareils avec un DPR de 1 téléchargent l'image image-500.jpg, y compris la plupart des utilisateurs d'ordinateur qui l'affichent dans une taille externe de 500 pixels de large. En revanche, les utilisateurs d'appareils mobiles avec un DPR de 3 téléchargent un image-1500.jpg potentiellement plus grand (la même image que celle utilisée sur les ordinateurs de bureau 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 un élément <source> supplémentaire afin d'utiliser des images différentes pour les appareils larges avec un DPR élevé:
| Largeur de la fenêtre d'affichage (pixels) | 1 RDP | 1,5 DPR | 2 RDP | 3 RDP |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000-sm.jpg |
| 480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1 920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
Avec cette requête supplémentaire, vous pouvez voir que image-1000-sm.jpg et image-1500-sm.jpg s'affichent sur des fenêtres d'affichage de petite taille. Ces informations supplémentaires vous permettent de compresser davantage les images, car les artefacts de compression ne sont pas hautement visibles avec cette taille et cette densité, sans compromettre la qualité de l'image sur les ordinateurs de bureau.
Vous pouvez également ajuster les attributs srcset et media pour éviter de diffuser de grandes images sur les petites fenêtres d'affichage:
<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 des descripteurs de ratio de pixels de l'appareil. Les images diffusées sur un appareil mobile sont limitées à /image-500.jpg ou /image-1000.jpg, même sur les appareils avec un DPR de 3.
Gérer la complexité
Lorsque vous utilisez des images responsives, vous pouvez vous retrouver avec de nombreuses variantes de taille et de formats pour chaque image. Dans l'exemple précédent, des variantes sont utilisées pour chaque taille, mais n'incluent pas AVIF et WebP. Combien de variantes devez-vous avoir ? Comme beaucoup de problèmes techniques, la réponse est "ça dépend".
Bien qu'il puisse être tentant d'avoir autant de variantes pour offrir la meilleure adéquation, chaque variante d'image supplémentaire a un coût et rend l'utilisation moins efficace du cache du navigateur. Avec une seule variante, chaque utilisateur reçoit la même image. Elle peut donc être mise 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 dégrader les performances si l'entrée de cache de la variante a expiré et que l'image doit être à nouveau extraite du serveur d'origine.
En outre, la taille de votre document HTML augmente à chaque variante. Vous pourriez vous retrouver à envoyer plusieurs kilo-octets de code HTML pour 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 les types de contenu compris par le navigateur de l'utilisateur. Ces informations peuvent être utilisées par votre serveur pour diffuser 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 de requête Accept inclut image/avif, l'image AVIF est diffusée. 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ée.
Vous pouvez modifier les réponses en fonction du contenu de l'en-tête de requête Accept dans presque tous les types de serveur Web. Par exemple, vous pouvez réécrire des requêtes d'image sur les serveurs Apache en fonction de l'en-tête Accept à l'aide de mod_rewrite.
Ce comportement est semblable à celui que vous pouvez rencontrer sur un réseau de diffusion de contenu sous forme d'images (CDN). Les CDN Image sont d'excellentes solutions pour optimiser les images et envoyer le format optimal en fonction de l'appareil et du navigateur de l'utilisateur.
La clé est de trouver un équilibre, de générer un nombre raisonnable d'images candidates et de mesurer l'impact sur l'expérience utilisateur. Différentes images peuvent donner des résultats différents. Les optimisations appliquées à chaque image dépendent de sa taille dans la page et des appareils utilisés par vos utilisateurs. Par exemple, une image héros pleine largeur peut nécessiter plus de variantes que des vignettes sur une fiche produit d'e-commerce.
Chargement différé
Vous pouvez demander au navigateur de charger les images de manière différée lorsqu'elles apparaissent dans la 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é). Cela permet d'économiser de la bande passante, ce qui permet au navigateur de hiérarchiser les ressources dont il a besoin pour afficher le contenu essentiel qui se trouve déjà dans la fenêtre d'affichage.
decoding
L'attribut decoding indique au navigateur comment il doit décoder l'image. La valeur async indique au navigateur que l'image peut être décodée de manière asynchrone, ce qui peut réduire le délai d'affichage d'autres contenus. La valeur sync indique au navigateur que l'image doit être présentée en même temps que d'autres contenus.
La valeur par défaut de auto permet au navigateur de décider ce qui convient le mieux à l'utilisateur.
Démonstrations d'images
Tester vos connaissances
Quels formats d'image sont compatibles avec la compression sans perte ?
Quels formats d'image prennent en charge la compression avec perte ?
Qu'est-ce que le descripteur de largeur (par exemple, 1000w) indique au navigateur l'image candidate spécifiée dans un attribut srcset ?
Qu'est-ce que l'attribut sizes indique au navigateur à propos d'un élément <img> auquel il s'applique ?
srcset d'un élément <img> à charger, en fonction des dimensions de la fenêtre d'affichage actuelle de l'utilisateur.
srcset de l'élément <img>.
À suivre: Performances des vidéos
Même si les images constituent le type de support le plus répandu sur le Web, elles sont loin d'être les seules à prendre en compte pour optimiser les performances. La vidéo est un autre type de support couramment utilisé sur le Web. Elle a ses propres considérations relatives aux performances. Dans le module suivant de ce cours, vous découvrirez certaines techniques d'optimisation des vidéos et comment les charger efficacement.