La diffusion d'images de taille d'ordinateur sur des appareils mobiles peut utiliser 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'images sur différents appareils.
Images responsives et 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'une des images candidates optimales pour l'affichage 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 dont l'écran est de petite taille.
Les effets d'un chargement d'image plus rapide peuvent également s'étendre au LCP (Largest Contentful Paint) de votre page. Par exemple, si l'élément LCP de votre page est une image, la diffuser de manière responsive peut réduire sa durée de chargement des ressources.
Des durées de chargement des ressources plus courtes 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 verront votre site se charger plus rapidement, en particulier son contenu le plus important (l'élément LCP). L'affichage d'images responsives peut également réduire les conflits de bande passante pour les autres ressources de la page, ce qui peut améliorer la vitesse de chargement de votre page en général.
Redimensionner les images
Deux des outils de redimensionnement d'image les plus populaires sont le package npm précis et l'outil CLI ImageMagick.
Le package sharp est un bon choix pour automatiser le redimensionnement des images (par exemple, 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 ponctuel des images, car il s'exécute entièrement à partir de la ligne de commande.
nette
Pour utiliser sharp en tant que 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'existe pas de réponse "correcte" unique à cette question. Toutefois, il est courant de diffuser trois à cinq tailles différentes d'une image. La diffusion d'un plus grand nombre de tailles d'images offre de meilleures performances, mais occupe plus d'espace sur vos serveurs et vous oblige à écrire un peu plus de code HTML.
Autres options
Les services d'images tels que Thumbor (Open Source) et Cloudinary sont également à découvrir. Il s'agit de deux méthodes simples pour créer 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'images
Lorsque vous spécifiez plusieurs versions d'image, le navigateur choisit la meilleure à utiliser:
| Avant | Après |
|---|---|
| <img src="fleur-grande.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="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 pour les navigateurs qui ne sont pas compatibles avec les attributs srcset et sizes. Ces navigateurs reviennent à charger la ressource spécifiée dans l'attribut src.
Attribut "srcset"
L'attribut srcset est une liste de noms de fichiers d'image et de leurs descripteurs de largeur ou de densité, séparés par une virgule.
Cet exemple utilise des descripteurs de largeur, qui indiquent au navigateur la largeur d'une image afin qu'il n'ait pas besoin de la télécharger pour le savoir. 480w est un descripteur de largeur qui indique au navigateur que flower-small.jpg mesure 480 pixels de large. 1080w est un descripteur de largeur qui indique au navigateur que flower-large.jpg mesure 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é, reportez-vous à l'atelier de programmation sur le changement de résolution. Les descripteurs de densité permettent de diffuser différentes images en fonction de la densité de pixels de l'appareil.
L'attribut "sizes"
L'attribut sizes indique au navigateur la largeur de l'image lorsqu'elle est affichée, mais il n'a aucune incidence sur la taille d'affichage de l'image. Vous avez donc toujours besoin de CSS pour cela.
Le navigateur utilise ces informations, ainsi que ce qu'il sait 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 a recours au chargement de l'image spécifiée par l'attribut src. (sizes et srcset ont été introduits en même temps. Par conséquent, tous les navigateurs acceptent les deux attributs ou aucun.)
Bonus : Si vous le souhaitez, vous pouvez également utiliser l'attribut sizes pour spécifier plusieurs tailles d'emplacements. Cela permet d'adapter les sites Web qui utilisent différentes mises en page pour différentes tailles de fenêtre d'affichage. Consultez cet exemple de code à plusieurs emplacements pour découvrir comment procéder.
(Encore plus) Autres informations
En plus de tous les points supplémentaires déjà listés (les images sont complexes), vous pouvez également utiliser ces mêmes concepts pour la direction artistique. La direction artistique consiste à diffuser des images d'apparence complètement différente (au lieu de différentes versions de la même image) dans différentes fenêtres d'affichage. Pour en savoir plus, consultez l'atelier de programmation Direction artistique.
Valider
Une fois que vous avez implémenté des images responsives, vous pouvez utiliser Lighthouse pour vous assurer que vous n'avez pas manqué d'images. Exécutez l'audit des performances Lighthouse (Lighthouse > Options > Performances) et recherchez les résultats de l'audit Tailler correctement les images. Ces résultats indiquent les images que vous devez encore redimensionner.