La diffusion d'images de la taille d'un ordinateur sur des appareils mobiles peut utiliser deux à quatre fois plus de données que nécessaires. Suivez les consignes de cette page pour améliorer l'expérience utilisateur en de différentes tailles d'image sur différents appareils.
Images responsives et Core Web Vitals
Lorsque vous diffusez des images responsives, votre page évalue les capacités d'affichage de l'appareil de l'utilisateur et choisir l'une des images candidates pour un affichage optimal en fonction de ces critères. Cela permet d'économiser des données pour vos utilisateurs, principalement en diffusant des images plus petites sur des appareils dotés d'écrans plus petits.
L'accélération du chargement des images peut également s'appliquer Largest Contentful Paint (LCP) : Par exemple, si l'URL de votre page L'élément LCP est une image, qui diffuse de manière réactive peut réduire la durée de chargement des ressources.
Des temps de chargement des ressources plus courts réduisent le temps de chargement d'une image LCP, ce qui améliore votre le score LCP d'une page. Un LCP faible signifie que les utilisateurs verront que votre site se charge plus rapidement, et d'autant plus que son contenu le plus important (élément LCP) est chargé plus rapidement. La diffusion d'images réactives peut également réduire les conflits de bande passante ressources sur la page, ce qui peut améliorer la vitesse de chargement générale de celle-ci.
Redimensionner les images
Le package npm précis est deux des outils de redimensionnement d'images les plus populaires. et l'outil de ligne de commande ImageMagick CLI.
Le pack Sharp est idéal pour automatiser le redimensionnement des images (par exemple, générer des miniatures de différentes tailles 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 un redimensionnement unique de l'image, car il s'exécute entièrement à partir de la commande ligne.
vive
Pour utiliser Sharp en tant que script Node, enregistrez ce code en tant que script distinct dans votre 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 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 « correct » unique la réponse à cette question. Cependant, il est courant diffuser 3 à 5 tailles différentes d'une image. Il est préférable de diffuser davantage de tailles d'image mais il occupe davantage d'espace sur vos serveurs et vous oblige à écrire un peu plus de HTML.
Autres options
Services d'images tels que Thumbor (Open Source) et Cloudinary valent également le détour. Les deux sont des moyens simples de créer des images responsives qui fournissent également des la manipulation à la demande. Pour configurer Thumbor, installez-le sur votre serveur. Cloudinaire 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 utiliser:
| Avant | Après |
|---|---|
| <img src="fleur-grande.jpg"> | <img src="fleur-grande.jpg" srcset="flower-small.jpg 480w, fleur-large.jpg 1 080 l" size="50vw"> |
La balise <img>
src,
srcset,
et sizes
les attributs interagissent tous pour atteindre ce résultat final.
La fonction "src" attribut
L'attribut src permet à ce code de fonctionner pour les navigateurs qui ne
sont compatibles avec srcset et sizes ;
. Ces navigateurs ont recours au chargement de la ressource spécifiée dans
src.
"srcset" attribut
L'attribut srcset est une liste de noms de fichiers d'images séparés par une virgule ainsi que leurs
des descripteurs de largeur ou de densité.
Cet exemple utilise
descripteurs de largeur,
qui indiquent au navigateur la largeur de l'image, de sorte qu'il n'ait pas à télécharger l'image
pour le savoir. 480w est un descripteur de largeur qui indique au navigateur
flower-small.jpg mesure 480 pixels de large. 1080w est un descripteur de largeur
navigateur flower-large.jpg avec une largeur de 1 080 pixels.
Autres informations: 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 la Atelier de programmation sur le changement de résolution Les descripteurs de densité permettent d'afficher différentes images en fonction de l'état densité de pixels.
Les "tailles" attribut
L'attribut "sizes" indique au navigateur la largeur de l'image mais cela n'affecte pas la taille d'affichage de l'image. Vous devez donc toujours à l'aide du CSS.
Le navigateur utilise ces informations, ainsi que les données dont il dispose sur l'environnement (y compris ses dimensions et sa densité en pixels), pour déterminer l'image à utiliser de votre application.
Si un navigateur ne reconnaît pas "sizes" , il se rabat sur
Chargement de l'image spécifiée par "src" . (sizes et srcset
ont été introduits en même temps, de sorte que chaque
navigateur prend en charge à la fois
ou aucun des deux.)
Autres informations: Pour plus de simplicité, vous pouvez également utiliser l'attribut "sizes" plusieurs tailles d'emplacements. Cela convient aux sites web qui utilisent des mises en page différentes pour différentes tailles de fenêtre d'affichage. Consultez cet exemple de code pour plusieurs emplacements. pour savoir comment procéder.
(Encore plus) Autres informations
En plus de tout le crédit supplémentaire déjà listé (les images sont complexes !), vous pouvez également utiliser ces mêmes concepts pour 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) vers différentes fenêtres d'affichage. Toi Pour en savoir plus, suivez l'atelier consacré au code pour la direction artistique.
Valider
Après avoir implémenté des images responsives, vous pouvez utiliser Lighthouse pour vérifier et ne manquait aucune image. Exécuter l'audit de performances Lighthouse (Lighthouse > Options > Performances) et recherchez les résultats de la Audit Dimensionnez correctement les images. Ces résultats répertorient les images qu'il vous faut encore redimensionner.