La diffusion d'images au format ordinateur sur des appareils mobiles peut consommer deux à quatre fois plus de données que nécessaire. Suivez les consignes de cette page pour améliorer l'expérience utilisateur en diffusant différentes tailles d'image sur différents appareils.
Images responsives et métriques Core Web Vitals
Lorsque vous diffusez des images responsives, votre page évalue les fonctionnalités d'affichage de l'appareil de l'utilisateur et choisit l'un des ensembles d'images candidates qui sont optimales en fonction de ces critères. Cela permet d'économiser des données pour vos utilisateurs, principalement en diffusant des images plus petites sur les appareils dotés d'écrans plus petits.
Les effets d'un chargement d'image plus rapide peuvent également s'étendre au Largest Contentful Paint (LCP) de votre page. Par exemple, si l'élément LCP de votre page est une image, sa diffusion responsive peut réduire le temps de chargement de ses ressources.
Les temps de chargement des ressources plus faibles réduisent le temps de chargement d'une image LCP, ce qui améliore le score LCP de votre page. Un LCP plus faible signifie que les utilisateurs considéreront que votre site se charge plus rapidement, et en particulier avec un chargement plus rapide de son contenu le plus important (l'élément LCP). La diffusion d'images responsives peut également réduire les conflits de bande passante pour d'autres ressources sur la page, ce qui peut améliorer la vitesse de chargement de votre page en général.
Redimensionner des images
Deux des outils de redimensionnement d'image les plus populaires sont le package npm clair et l'outil CLI ImageMagick.
Le package Sharp est un bon choix pour automatiser le redimensionnement des images (par exemple, pour générer plusieurs tailles de miniatures pour toutes les vidéos de votre site Web). Il est rapide et s'intègre bien aux scripts et aux outils de compilation. ImageMagick est plus pratique pour le redimensionnement d'image ponctuel, car il s'exécute entièrement à partir de la ligne de commande.
tranchant
Pour utiliser Sharp comme script Node, enregistrez ce code en tant que script distinct dans votre projet, puis exécutez-le pour convertir vos images:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Pour redimensionner une image à 33% de sa taille d'origine, exécutez la commande suivante dans votre terminal:
convert -resize 33% flower.jpg flower-small.jpg
Pour redimensionner une image afin qu'elle s'adapte à un espace de 300 x 200 pixels, exécutez la commande suivante:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Combien de versions d'image devez-vous créer ?
Il n'y a pas de réponse « correcte » unique à cette question. Cependant, il est courant de diffuser trois à cinq tailles différentes pour une image. Diffuser plus de tailles d'image améliore les performances, mais prend plus d'espace sur vos serveurs et vous oblige à écrire un peu plus de code HTML.
Autres options
Les services d'image comme Thumbor (Open Source) et Cloudinary sont également intéressants. Ces deux méthodes permettent de créer facilement des images responsives qui permettent également de manipuler des images à la demande. Pour configurer Thumbor, installez-le sur votre serveur. Cloudinary s'occupe des détails à votre place et ne nécessite aucune configuration de serveur.
Diffuser plusieurs versions d'image
Lorsque vous spécifiez plusieurs versions d'image, le navigateur choisit la meilleure version à utiliser:
| Avant | Après |
|---|---|
| <img src="fleur-grande.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" size="50vw"> |
Les attributs src, srcset et sizes de la balise <img> interagissent tous pour atteindre ce résultat final.
Attribut "src"
L'attribut src permet à ce code de fonctionner dans les navigateurs qui n'acceptent pas les attributs srcset et sizes. Ces navigateurs se rabattent sur le chargement de la ressource spécifiée dans l'attribut src.
Attribut "srcset"
L'attribut srcset est une liste de noms de fichiers d'image séparés par une virgule, ainsi que de leurs descripteurs de largeur ou de densité.
Cet exemple utilise des descripteurs de largeur, qui indiquent au navigateur la largeur d'une image afin qu'il n'ait pas besoin de télécharger l'image pour la découvrir. 480w est un descripteur de largeur qui indique au navigateur que flower-small.jpg fait 480 pixels de large. 1080w est un descripteur de largeur qui indique au navigateur que flower-large.jpg fait 1 080 pixels de large.
Crédit supplémentaire : vous n'avez pas besoin de connaître les descripteurs de densité pour diffuser différentes tailles d'image. Toutefois, si vous souhaitez en savoir plus sur le fonctionnement des descripteurs de densité, consultez l'atelier de programmation sur le basculement de résolution. Les descripteurs de densité permettent de diffuser différentes images en fonction de la densité de pixels de l'appareil.
Attribut 'tailles' [sizes]
L'attribut "sizes" indique au navigateur la largeur de l'image lorsqu'elle est affichée, bien qu'il n'affecte pas la taille d'affichage de l'image. Vous avez donc toujours besoin de code CSS pour cela.
Le navigateur utilise ces informations, ainsi que les informations dont il dispose sur l'appareil de l'utilisateur (y compris ses dimensions et sa densité de pixels), pour déterminer l'image à charger.
Si un navigateur ne reconnaît pas l'attribut "sizes", il revient au chargement de l'image spécifiée par l'attribut "src". (sizes et srcset ont été introduits en même temps, de sorte que chaque navigateur accepte les deux attributs ou aucun des deux).
Crédit supplémentaire : si vous souhaitez créer des annonces plus sophistiquées, vous pouvez également utiliser l'attribut "sizes" pour spécifier plusieurs tailles d'emplacement. Cela s'adapte aux sites Web qui utilisent différentes mises en page pour différentes tailles de fenêtre d'affichage. Pour savoir comment procéder, consultez cet exemple de code pour plusieurs emplacements.
(Encore plus) Crédit supplémentaire
En plus de tout le crédit supplémentaire déjà énuméré (les images sont complexes !), vous pouvez également utiliser ces mêmes concepts pour la direction artistique. La direction artistique consiste à diffuser des images d'aspects complètement différents (au lieu de différentes versions de la même image) à différentes fenêtres d'affichage. Pour en savoir plus, consultez l'atelier de programmation de la direction artistique.
Valider
Après avoir implémenté des images responsives, vous pouvez utiliser Lighthouse pour vous assurer que vous n'avez manqué aucune image. Exécutez l'audit de performances Lighthouse (Lighthouse > Options > Performance) et recherchez les résultats de l'audit Images de taille appropriée. Ces résultats répertorient les images que vous devez encore redimensionner.