Diffusez des images dont les dimensions sont correctes

Katie Hempenius

Pour suivre cet atelier de programmation, ouvrez ce Glitch dans un deuxième onglet.

Exécuter Lighthouse

Ce Glitch est suffisamment petit pour que ses images puissent être inspectées manuellement. Toutefois, pour la plupart des sites Web, il est essentiel d'automatiser cette opération à l'aide d'un outil tel que Lighthouse.

1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .
2. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
3. Cliquez sur l'onglet Lighthouse.
4. Assurez-vous que la case Performances est cochée dans la liste Catégories.
5. Cliquez sur le bouton Generate report (Générer un rapport).
6. Recherchez les résultats de l'audit Images de taille appropriée.

L'audit Lighthouse indique que les deux images de cette page doivent être redimensionnées.

Corriger flower_logo.png

Commencez en haut de la page et corrigez l'image du logo.

• Inspectez flower_logo.png dans le panneau "Éléments de développement".

Voici le CSS pour flower_logo.png:

.logo {
  width: 50px;
  height: 50px;
}

La largeur CSS de cette image est de 50 pixels. flower_logo.png doit donc être redimensionné pour correspondre. Vous pouvez utiliser ImageMagick pour redimensionner l'image. ImageMagick est un outil CLI pour la retouche d'images et préinstallé dans l'environnement de l'atelier de programmation.

1. Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
2. Cliquez sur Terminal (remarque: si le bouton "Terminal" ne s'affiche pas, vous devrez peut-être utiliser l'option "Plein écran").
3. Dans la console, saisissez la commande suivante:

convert flower_logo.png -resize 50x50 flower_logo.png

Corriger la photo_fleurs.jpg

Ensuite, corrigez la photo des fleurs violettes.

• Inspectez flower_photo.jpg dans le panneau des éléments des outils de développement.

Voici le CSS pour flower_photo.jpg:

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

50vw définit la largeur CSS de flower_photo.jpg sur "la moitié de la largeur du navigateur". (1vw correspond à 1% de la largeur du navigateur).

La taille idéale de cette image dépend de l'appareil sur lequel elle est affichée. Vous devez donc la redimensionner pour qu'elle convienne à la plupart de vos utilisateurs. Vous pouvez consulter vos données d'analyse pour connaître les résolutions d'écran courantes parmi vos utilisateurs:

Ces données indiquent que plus de 95%des visiteurs de ce site utilisent une résolution d'écran inférieure ou égale à 1 920 pixels de large.

À l'aide de ces informations, nous pouvons calculer la largeur de l'image : (1 920 pixels de large) * (50% de la largeur du navigateur) = 960 pixels

Sur les résolutions supérieures à 1 920 pixels de large, l'image est étirée afin de couvrir la zone. L'image redimensionnée est toujours assez grande. Les effets de cette opération ne devraient donc pas être très visibles.

• Utilisez ImageMagick pour redimensionner l'image à 960 pixels de large. Dans le type de terminal:

# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

Remarque : 960x n'est pas une faute de frappe. Il spécifie une largeur, mais pas une hauteur. La hauteur de l'image est mise à l'échelle proportionnellement à la largeur. Cette astuce est pratique lorsque vous ne vous souciez que des dimensions d'une image dans une seule direction.

Relancer Lighthouse

• Exécutez à nouveau l'audit des performances de Lighthouse pour vérifier que vous avez correctement redimensionné les images.

... Et ça échoue ! Pourquoi ?

Lighthouse effectue ses tests sur un Nexus 5x. Le Nexus 5x est doté d'un écran de 1 080 x 1 920 pixels. Pour le Nexus 5x, la taille optimale de flower_photo.jpg est de 540 pixels de large (1 080 pixels * 5). Elle est beaucoup plus petite que notre image redimensionnée.

Devez-vous redimensionner l'image pour la rendre encore plus petite ? Probablement. Cependant, la réponse à cette question n'est pas toujours claire.

Ici, le compromis réside entre la qualité d'image sur les appareils haute résolution et les performances. Il est facile de surestimer le niveau de précision des images que les utilisateurs inspectent. Vous devriez donc probablement réduire leur taille, mais il y a certains cas d'utilisation où la qualité de l'image est plus importante.

La bonne nouvelle est que vous pouvez complètement contourner ce compromis en utilisant des images responsives pour diffuser plusieurs tailles d'images. Pour en savoir plus, consultez le guide concernant les images responsives.