Cela nous est tous déjà arrivé : nous avons 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 > Performance) et recherchez les résultats de l'audit Dimensionner correctement les images. L'audit liste toutes les images qui doivent être redimensionnées.
Déterminer la taille d'image appropriée
Le dimensionnement des images peut être trompeur et complexe. C'est pourquoi nous proposons deux approches : la "bonne" et la "meilleure". Les deux améliorent les performances, mais l'approche "meilleure" peut prendre un peu plus de temps à comprendre et à mettre en œuvre. Cependant, elle vous permettra également d'améliorer davantage les performances. Le meilleur choix pour vous est celui que vous vous sentez à l'aise de mettre en œuvre.
Petite remarque 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 s'affichent toujours à 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 à des tailles variables, 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 "bonne"
Pour les images dont la taille est basée sur…
- Unités relatives : redimensionnez l'image à une taille qui fonctionne sur tous les appareils.
Il peut être utile de consulter vos données Analytics (par exemple, Google Analytics) pour voir les tailles d'affichage couramment utilisées par vos utilisateurs. Vous pouvez également consulter screensiz.es pour obtenir des informations sur les écrans de nombreux appareils courants. - Unités absolues : redimensionnez l'image pour qu'elle corresponde à la taille à laquelle elle s'affiche.
Le panneau "Éléments" des outils de développement peut être utilisé pour déterminer la taille à laquelle une image s'affiche.
L'approche "meilleure"
Pour les images dont la taille est à la fois absolue et relative, utilisez srcset
et sizes
attributs pour diffuser différentes images à différentes densités d'affichage.
Consultez le guide sur les images responsives.
La "densité d'affichage" fait référence au fait que différents écrans ont des densités de pixels différentes. Toutes choses étant égales par ailleurs, un écran à haute densité de pixels sera plus net qu'un écran à faible densité de pixels.
Par conséquent, plusieurs versions d'image 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 permettent de répertorier plusieurs versions d'image et de laisser l'appareil choisir celle 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'image et de laisser l'appareil choisir la taille qui lui convient le mieux.
Redimensionner les images
Quelle que soit l'approche que vous choisissez, il peut être 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 les images beaucoup plus rapidement à l'aide de l'interface de ligne de commande que d'un éditeur d'images basé sur une interface graphique.
Redimensionner l'image à 25% de sa taille d'origine :
convert flower.jpg -resize 25% flower_small.jpg
Mettre à l'échelle l'image pour qu'elle s'adapte à une largeur de 200 px et une hauteur de 100 px :
# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg
# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg
Si vous redimensionnez de nombreuses images, il 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 les dimensions
Bien que ce guide aborde les dimensions des images dans le contexte de la réduction du nombre d'octets inutiles téléchargés, il est important de noter que la réservation de l'espace approprié pour les images dans la mise en page est un autre élément essentiel pour minimiser la métrique Cumulative Layout Shift d'une page. Lorsque vous diffusez des images en HTML, veillez à utiliser les attributs width et height appropriés afin que le navigateur sache combien d'espace allouer à 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 le dimensionnement CSS équivalent, le navigateur ne sait pas combien d'espace l'image occupera tant qu'elle n'est pas chargée. Cela entraînera des changements 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 consulter. Les utilisateurs peuvent alors perdre leur place lors de la lecture ou "manquer" la cible qu'ils souhaitaient atteindre et cliquer sur autre chose que ce qu'ils avaient prévu de faire lors du chargement de la page.
Une autre solution consiste à utiliser la propriété CSS aspect-ratio sur l'image au lieu de fournir explicitement la largeur et la hauteur. 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 fourni pour l'image. 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 explicite au format 16/9 :
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 oublié.