Nous sommes tous passés par là: vous avez oublié de réduire une image avant de l'ajouter à la . L'image a l'air correcte, mais elle gaspille les utilisateurs la page dédiée aux données des performances.
Identifier les images de taille incorrecte
Lighthouse permet d'identifier facilement les images dont la taille est incorrecte. Exécutez la Effectuez un audit de performances (Lighthouse > Options > Performances) et recherchez les résultats de l'audit Taille appropriée des images. L'audit répertorie toutes les images doivent être redimensionnées.
Déterminer la taille d'image correcte
Le dimensionnement d'une image peut être trompeur. C'est pourquoi nous avons inclus approches: le « bon » et le mieux est. Dans les deux cas, les performances sont améliorées, "meilleure" peut prendre un peu plus de temps à comprendre et à mettre en œuvre. Cependant, il vous récompensera également en améliorant vos performances. Le meilleur choix pour vous est celle que vous vous sentez à l'aise de mettre en œuvre.
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 sont toujours s'affichent à la même taille, quel que soit l'appareil. Exemples de valeurs valides, unités CSS absolues: px, cm, mm, in.
- Unités relatives: les éléments stylisés à l'aide d'unités relatives seront affichés différentes tailles, en fonction de la longueur relative spécifiée. Exemples de unités CSS relatives valides: %, vw (1vw = 1% de la largeur de la fenêtre d'affichage) em (1,5 em = taille de police 1,5 fois supérieure).
Le "bon" Méthode
Pour les images dont la taille repose sur...
- Unités relatives: redimensionnez l'image afin qu'elle fonctionne sur tous les appareils.
Il peut être utile de vérifier vos données d'analyse (par exemple, Analytics) pour identifier les tailles d'affichage les plus couramment utilisées par vos utilisateurs. Sinon, screensiz.es fournit des informations sur l'affichage de nombreux appareils courants. - Unités absolues: redimensionnez l'image pour qu'elle corresponde à la taille d'affichage.
Le panneau "Éléments des outils de développement" permet de déterminer la taille d'une image. affiché à l'adresse.
Le meilleur approche
Pour les images ayant une taille absolue et relative, utilisez srcset
et sizes
pour diffuser des images différentes en fonction de la densité d'affichage.
Consultez le guide sur les images responsives.
"Densité d'affichage" fait référence au fait que les écrans en pixels. Toutes choses égales par ailleurs, une densité de pixels élevée est plus nette qu'un écran à faible densité de pixels.
Par conséquent, plusieurs versions d'image sont nécessaires si vous souhaitez que les utilisateurs les images les plus nettes possible, quelle que soit la densité de pixels leur appareil.
Grâce aux techniques d'image réactive, vous pouvez lister plusieurs versions d'image et pour que l'appareil choisisse l'image qui fonctionne le mieux adapté.
Une image qui fonctionne sur tous les appareils sera inutilement grande pour des appareils plus petits. Techniques pour les images responsives, en particulier srcset et tailles, 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 création pour créer et modifier des images. La plupart des utilisateurs peuvent redimensionner les images beaucoup plus rapide lors de l’utilisation de la CLI qu’un éditeur d’images basé sur une interface graphique.
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 avez l'intention de redimensionner un grand nombre d'images, il peut être plus pratique d'utiliser un un script ou un service pour automatiser le processus. Pour en savoir plus à ce sujet, consultez la Guide sur les images responsives.
Éviter les décalages 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 du nombre d'octets inutiles téléchargés, il est important de noter que réserver l'espace correct pour les images dans la mise en page est un autre élément crucial de la réduction de la métrique Cumulative Layout Shift 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 pour l'image:
<img src="flower.jpg" width="640" height="480" alt="A picture of a siberian iris.">
Sans ces attributs ou le dimensionnement CSS équivalent, le navigateur ne sait pas combien d'espace l'image occupera jusqu'à son chargement. Cela entraîne des décalages de mise en page dans le document, ce qui peut être frustrant pour les utilisateurs lorsque le contenu est déplacé après qu'ils ont commencé à le consommer. Par conséquent, les utilisateurs risquent de perdre le fil de la lecture ou de passer à côté d'un contenu. l'objectif visé et se retrouvent à cliquer sur autre chose pendant le 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 explicite 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 pas rater quelque chose.