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 de performances (Lighthouse > Options > Performance) et recherchez les résultats de l'audit Dimensionnement correct des images. L'audit répertorie 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 améliorent 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 est celui que vous vous sentez à l'aise de mettre en œuvre.
Remarque rapide sur les unités CSS
Il existe deux types d'unités CSS pour 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 d'affichage.
Le panneau "Éléments" de DevTools permet de déterminer la taille à laquelle une image est affichée.
L'approche "meilleure"
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 à haute densité de pixels semble plus net qu'un écran à faible densité de pixels.
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'image responsive 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 grande pour les 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 afin qu'elle corresponde à 25% de la taille de l'original:
convert flower.jpg -resize 25% flower_small.jpg
Redimensionnez l'image pour qu'elle s'adapte à "200 x 100 pixels de haut" :
# 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 au format HTML, veillez à utiliser les attributs width et height appropriés afin que le navigateur sache combien d'espace allouer à la mise en page de l'image:
<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 tant qu'elle n'a pas été 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 une "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 d'indiquer explicitement la largeur et la hauteur, vous pouvez utiliser la propriété CSS aspect-ratio sur l'image. L'effet sur la taille d'un élément est semblable à celui des attributs width et height, dans le sens où le conteneur conservera 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é.