Guide de préparation à l'évaluation

2.3.3 Optimisation des images

Les images représentent souvent la majorité des octets téléchargés sur une page Web, et occupent également une grande partie de l'espace visuel. En conséquence, l'optimisation des images permet souvent de réaliser les économies en octets et les améliorations des performances les plus importantes pour votre site Web : moins le navigateur doit télécharger d'octets, moins il y a de compétition pour la bande passante du client, et plus vite le navigateur peut télécharger et afficher le contenu utile à l'écran.

L'optimisation des images est à la fois un art et une science : c'est un art, car il n'existe pas de réponse définitive quant à la meilleure façon de compresser une image individuelle, et c'est une science, car il existe un grand nombre de techniques et d'algorithmes très développés permettant de réduire de façon significative la taille d'une image. Pour trouver les meilleurs paramètres pour votre image, vous devez analyser avec soin de nombreux facteurs : capacités du format, contenu des données encodées, qualité, dimensions en pixels, etc.

Voici quelques conseils et techniques à garder à l'esprit lorsque vous travaillez à l'optimisation de vos images :

  • Préférez les formats vectoriels : les images vectorielles sont indépendantes de la résolution et de l'échelle. Elles sont donc parfaitement adaptées aux nombreux appareils et à la haute résolution que l'on trouve dans le monde actuel.
  • Réduisez et compressez vos éléments SVG : le balisage XML produit par la plupart des applications de dessin contient souvent des métadonnées inutiles qui peuvent être supprimées. Assurez-vous que vos serveurs sont configurés pour appliquer une compression GZIP aux éléments SVG.
  • Choisissez le meilleur format d'image matricielle : déterminez vos exigences fonctionnelles et sélectionnez le format adapté à chaque élément.
  • Testez les paramètres de qualité optimaux pour les formats matriciels : n'ayez pas peur de réduire les paramètres de "qualité". Les résultats sont souvent très bons pour une économie d'octets importante.
  • Supprimez les métadonnées d'image inutiles : de nombreuses images matricielles contiennent des données inutiles à propos de l'élément, telles que les informations géographiques, les informations de l'appareil photo, etc. Utilisez les outils adaptés pour supprimer ces données.
  • Diffusez des images mises à l'échelle : redimensionnez les images sur le serveur et assurez-vous que la taille "d'affichage" est la plus proche possible de la taille "naturelle" de l'image. Soyez particulièrement attentif aux grandes images, car elles produisent le temps système le plus important lorsqu'elles sont redimensionnées.
  • Automatisez au maximum : investissez dans des outils et une infrastructure automatisés qui garantissent que vos éléments d'image sont toujours optimisés.

Pour en savoir plus, cliquez ici.

Ces informations vous-ont elles été utiles ?
Comment pouvons-nous l'améliorer ?