Diffusez des images dont les dimensions sont correctes

Katie Hempenius
Katie Hempenius

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'utiliser un outil tel que Lighthouse pour automatiser ce processus.

  1. Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran 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 (Phare).
  4. Assurez-vous que la case Performances est cochée dans la liste Catégories.
  5. Cliquez sur le bouton Générer un rapport.
  6. Recherchez les résultats de l'audit Taille appropriée des images.

Échec de l'audit des images correctement dimensionné dans Lighthouse.

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

Correction de 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 DevTools.

Panneau des éléments des outils de développement

Voici le code CSS de 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é en conséquence. Vous pouvez utiliser ImageMagick pour redimensionner l'image pour qu'elle s'adapte. ImageMagick est un outil de ligne de commande pour l'édition d'images préinstallé dans l'environnement de l'atelier de programmation.

  1. Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
  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:
convert flower_logo.png -resize 50x50 flower_logo.png

Corriger flower_photo.jpg

Corrigez ensuite la photo des fleurs violettes.

  • Inspectez flower_photo.jpg dans le panneau "Éléments" de DevTools.

Panneau des éléments des outils de développement

Voici le code CSS de 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 analytiques pour savoir quelles résolutions d'écran sont courantes parmi vos utilisateurs:

Données Google Analytics sur les résolutions d'écran.

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

À 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

Avec les résolutions supérieures à 1 920 pixels de large, l'image est étirée pour couvrir la zone totale. L'image redimensionnée est encore 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 terminal, saisissez:
# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

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

Réexécuter Lighthouse

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

Audit Lighthouse sur la taille des images.

… Et ça échoue ! Pourquoi ?

Lighthouse exécute 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.

Faut-il réduire encore la taille de l'image ? Probablement. Cependant, la réponse à cette question n'est pas toujours claire.

Le compromis ici est entre la qualité d'image sur les appareils haute résolution et les performances. Il est facile de surestimer l'attention que les utilisateurs porteront sur les images. Vous devriez donc probablement les réduire. Toutefois, il existe certainement des cas d'utilisation où la qualité des images est plus importante.

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