Quoi de neuf?

Pour quelqu’un qui a conçu des sites web du temps ou la vitesse de téléchargement était celle d’un modem 3600 bauds (les anciens savent), l’optimisation des images coule de source, à l’époque si vos images n’étaient pas optimisées pour le web les utilisateurs pouvaient vous maudire parce qu’ils attendaient trop longtemps pour les voir apparaître sur votre site.

Aujourd’hui la bande passante est outrageusement plus grande par rapport à l’époque mais il nous arrive toujours de trouver un site sur lequel le chargement des images est lent ou peu réactif, il y a plusieurs raisons à ça, nous allons essayer de passer en revue les principales.

La taille des images

Nos appareils photo numériques actuels produisent des images toujours de meilleure qualité, et l’un des facteurs qui déterminent cette qualité est la taille des photos en pixels. Prenons par exemple un appareil photo reflex d’entrée de gamme, il aura un capteur d’une résolution d’environ 18 Millions de pixels. Il produira donc des images de 5184 × 3456 pour un poids moyen de 8 Mo en format jpeg. Ce sont des valeurs approximatives mais tout à fait réalistes à l’heure où j’écris ces lignes.

Si cette qualité est nécessaire dans certains cas, elle ne l’est pas pour illustrer un site. Cette taille représente presque 3 fois la largeur d’un écran 24 pouces standard qui est de 1920 x 1080 pixels. Redimensionner les images est la première chose à faire pour les optimiser.

Dans le cas où on a besoin d’afficher l’image en plein écran, on réduit notre image à une largeur de 1920 pixels. Son poids descend alors aux alentours de 1 Mo avec la même compression jpeg. En fonction de la taille de l’image sur la page, on peut encore réduire sa taille, ça dépend de l’utilisation qui en est faite sur le site ou bien dans l’app.

Le taux de compression

Admettons que vous utilisiez des images au format jpeg, le format d’image le plus répandu sur le web et utilisé par les smartphones et les appareils photo. Le point suivant sur lequel on peut travailler est la compression des images. Le format jpeg permet la compression d’image via son taux de compression qui varie de 3 à 100. 3 correspondant à la plus forte compression, et en même temps la qualité la plus mauvaise, par contre 100 donne la meilleure qualité, aux dépens de la compression. En général la valeur 60 donne un bon compromis pour le web, mais la meilleure façon de procéder est de faire des tests, en diminuant la qualité jusqu'à la limite que vous jugez acceptable.

le cache

Troisième étape d’optimisation technique, c’est de définir un cache pour vos images. Le principe du cache c’est d’éviter de demander au serveur un contenu s’il a déjà été téléchargé. Tous les browsers l’utilisent, cela permet d’utiliser moins de bande passante et d’accélérer le chargement des pages.

L’autre impact positif du cache est la diminution de la sollicitation de votre serveur, ce qui les rend disponible pour fournir les contenus plus vite.

SEO

Dernier aspect de l’optimisation de vos images est leur aptitude à être indexées par les moteurs de recherche. Pour ça vous pouvez agir sur le nom de l’image, il faudra lui donner un nom qui la décrit brièvement, et sa balise ‘title’ dans laquelle vous donnerez aussi une description. Le ‘title’ est aussi important pour l’accessibilité, les personnes qui ont une vision réduite et qui utilisent un lecteur entendront cette description.

Voilà, il ne tient plus qu'à vous de rendre votre site plus rapide et accessible, donc agréable à consulter pour tout le monde.