Cela nous est tous déjà arrivé: vous avez oublié de réduire la taille d'une image avant de l'ajouter à la page. L'image semble correcte, mais elle gaspille les données des utilisateurs et nuit aux performances de la page.
Identifier les images dont la taille est incorrecte
Lighthouse permet d'identifier facilement les images dont la taille est incorrecte. Exécutez l'audit des performances (Lighthouse > Options > Performances) et recherchez les résultats de l'audit Tailler correctement les images. L'audit liste toutes les images qui doivent être redimensionnées.
Déterminer la taille d'image appropriée
La mise à l'échelle des images peut sembler complexe. C'est pourquoi nous avons proposé deux approches : "Bon" et "Mieux". Les deux approches permettent d'améliorer les performances, mais l'approche "meilleure" peut prendre un peu plus de temps à comprendre et à implémenter. Toutefois, vous bénéficierez également de meilleures performances. Le meilleur choix pour vous est celui que vous êtes à l'aise d'implémenter.
Remarque rapide sur les unités CSS
Il existe deux types d'unités CSS permettant de spécifier la taille des éléments HTML, y compris les images:
- Unités absolues: les éléments stylisés à l'aide d'unités absolues sont toujours affichés à la même taille, quel que soit l'appareil. Exemples d'unités CSS absolues valides: px, cm, mm, in.
- Unités relatives: les éléments stylisés à l'aide d'unités relatives s'affichent à différentes tailles, en fonction de la longueur relative spécifiée. Exemples d'unités CSS relatives valides: %, vw (1 vw = 1% de la largeur de la fenêtre d'affichage), em (1,5 em = 1,5 fois la taille de la police).
L'approche "Bon"
Pour les images dont le dimensionnement est basé sur :
- Unités relatives: redimensionnez l'image pour qu'elle s'affiche sur tous les appareils.
Il peut être utile de consulter vos données analytiques (par exemple, Google Analytics) pour identifier les tailles d'écran couramment utilisées par vos utilisateurs. screensiz.es fournit également des informations sur les écrans de nombreux appareils courants. - Unités absolues: redimensionnez l'image pour qu'elle corresponde à la taille à laquelle elle est affichée.
Le panneau "Éléments" de DevTools permet de déterminer la taille à laquelle une image est affichée.
L'approche "Mieux"
Pour les images dont la taille est à la fois absolue et relative, utilisez les attributs srcset et sizes pour diffuser différentes images pour différentes densités d'affichage.
Consultez le guide sur les images responsives.
La "densité d'affichage" fait référence au fait que les différents écrans ont des densités de pixels différentes. Toutes choses égales par ailleurs, un écran à densité de pixels élevée sera plus net qu'un écran à densité de pixels faible.
Par conséquent, plusieurs versions d'images sont nécessaires si vous souhaitez que les utilisateurs bénéficient des images les plus nettes possible, quelle que soit la densité de pixels de leur appareil.
Les techniques d'images responsives vous permettent de lister plusieurs versions d'images et de laisser l'appareil choisir l'image qui lui convient le mieux.
Une image qui fonctionne sur tous les appareils sera inutilement volumineuse pour les appareils plus petits. Les techniques d'images responsives, en particulier srcset et sizes, vous permettent de spécifier plusieurs versions d'images et de laisser l'appareil choisir la taille qui lui convient le mieux.
Redimensionner les images
Quelle que soit l'approche que vous choisissez, vous pouvez trouver utile d'utiliser ImageMagick pour redimensionner vos images. ImageMagick est l'outil de ligne de commande le plus populaire pour créer et modifier des images. La plupart des utilisateurs peuvent redimensionner des images beaucoup plus rapidement avec la CLI qu'avec un éditeur d'images basé sur une IUG.
Redimensionner l'image à 25% de la taille d'origine:
convert flower.jpg -resize 25% flower_small.jpg
Redimensionner l'image pour qu'elle s'adapte à "200 x 100 px":
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Si vous allez redimensionner de nombreuses images, vous trouverez peut-être plus pratique d'utiliser un script ou un service pour automatiser le processus. Pour en savoir plus, consultez le guide sur les images responsives.
Éviter les changements de mise en page en spécifiant des dimensions
Bien que ce guide aborde les dimensions des images dans le contexte de la réduction de la quantité d'octets inutiles téléchargés, il est important de noter que réserver l'espace approprié pour les images dans la mise en page est un autre élément essentiel pour minimiser la métrique Déplacement cumulé de la mise en page d'une page. Lorsque vous diffusez des images en HTML, assurez-vous d'utiliser les attributs width et height appropriés afin que le navigateur sache combien d'espace attribuer à l'image dans la mise en page:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Sans ces attributs ni la mise à l'échelle CSS équivalente, le navigateur n'a aucune idée de l'espace que l'image occupera avant qu'elle ne soit chargée. Cela entraîne des décalages de mise en page dans le document, ce qui peut être frustrant pour les utilisateurs lorsque le contenu se déplace après qu'ils ont commencé à le lire. Cela peut entraîner une perte de place lors de la lecture, ou un "manque" de la cible de clic souhaitée, et les utilisateurs peuvent finir par cliquer sur un autre élément qu'ils n'avaient pas prévu de cliquer lors du chargement de la page.
Au lieu de spécifier explicitement la largeur et la hauteur, vous pouvez utiliser la propriété CSS aspect-ratio sur l'image. Cela a un effet similaire sur la taille d'un élément que les attributs width et height, dans le sens où le conteneur conserve un format cohérent. Toutefois, la différence est que cela peut entraîner l'utilisation d'un format différent de celui de l'image fournie. Vous devrez donc probablement utiliser un paramètre object-fit pour vous assurer que l'image n'est pas déformée dans cette vue 16/9 explicite:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Valider
Une fois que vous avez redimensionné toutes vos images, exécutez à nouveau Lighthouse pour vérifier que vous n'avez rien manqué.