Optimiser l'utilisation des images d'une page web : traiter les images

La première cause de lenteur d'un site web est liée au volume de données chargées. Dans ce registre, le poste le plus gourmand concerne, sans aucun doute possible, les images.

Comme nous l’avons vu dans l’article Pourquoi optimiser un site web ?, améliorer la vitesse de chargement des pages d’un site à au moins 4 impacts directs : le nombre de visiteurs, et par effet de levier le référencement, un gain économique et un impact environnemental réel.

Intuitivement, nous comprenons que la première cause de lenteur est liée au volume de données chargées. Dans ce registre, le poste le plus gourmand concerne, sans aucun doute possible, les images.  Regardons ensemble les pistes d’optimisations possibles et vous serez surpris de constater l’ampleur des gains possibles.

Une image est-elle nécessaire ?

Mais commençons par une question apparemment naïve : avez-vous besoin d’images ?
Il est surprenant de constater que dans certains cas, des images sont utilisées pour colorer des surfaces unies, comme un fond de page, un bandeau ou un fond de menu. Par exemple, un carré uni de 20 pixels répété à l’infini comme fond de page équivaut à au moins 100 octets alors qu’en utilisant la propriété CSS background vous n’en consommez que 30. Entre ces deux approches, un bénéfice d’au moins 60% pour un rendu équivalent. Mon premier conseil est donc : traquez les images inutiles !

Dans un registre très similaire, ne gérez pas les marges des images en ajoutant une bordure unie de la couleur du fond. Préférez-lui une approche bien plus diététique en utilisant les attributs margin et padding du CSS.

Choisir le bon format d’image

Ensuite, considérez que seulement trois formats d’images sont viables pour des sites Internet :

•  jpg (ou jpeg pour Joint Photographic Experts Group) : ce format permet de gérer jusqu’à 16 millions de couleurs et ne doit être employé que pour des graphismes évolués, des images de haute qualité ou des photos.
• gif (pour Graphic Interchange Format) : ce format gère un maximum de 256 couleurs, mais supporte la transparence ou permet de composer des animations simples. Son usage est donc tout désigné.
• png (pour Portable Network Graphics) : ce format permet de gérer jusqu’à 16 millions de couleurs, ainsi que différents niveaux de transparence. Il convient donc à pratiquement tous vos enrichissements visuels.

Considérez toutefois que tous les navigateurs ne supportent pas nativement le format png (notamment Internet Explorer pour ses versions inférieures à 7), et qu’il vous sera alors peut-être nécessaire d’utiliser des hacks[1] adaptés. Mais d’après les statistiques produites par StatCounter, cela représente bien moins de 3,76% des navigateurs utilisés (pour W3Scools.com, il s’agit de 0,3%).

Le format png est généralement une valeur sûre, mais pour des images de type icône ne nécessitant pas l’utilisation de la transparence, prenez aussi le temps de la comparaison entre les versions jpg et png qui peuvent parfois produire des écarts de 1 pour 10.

Enfin, si vous utilisez un autre format, procédez immédiatement à une conversion, sauf pour les éléments véritablement spécifiques qu’il vous est impossible de normaliser.

 Ajuster la taille des images

Lorsque vous employez une image, vous souhaitez qu’elle occupe un espace spécifique en largeur et en hauteur dans la page. Nul besoin donc de publier des images de taille supérieure et laisser le soin du redimensionnement au navigateur.

En ajustant au préalable une image à la taille d’affichage voulue, vous réduisez son poids et en considérant qu’un navigateur n’est pas optimisé pour le traitement des images, vous gardez la totale maîtrise du rendu avec votre logiciel de traitement d’image qui utilisera des algorithmes de manipulation spécifiquement étudiés pour produire le meilleur résultat possible.

Ajuster la résolution des images

Une fois le format des images rationalisé, considérez la résolution[1] exprimée en dpi (dots per inches) ou ppp (points par pouce), en admettant que, pour une même image, plus sa résolution est élevée, plus son poids est important. Il apparait clairement que contrairement à l’idée reçue, la résolution standard des écrans n’est pas 72 dpi. Florent Verschelde traite cet aspect dans un article Le Web c’est pas en 72 dpi, coco !.

Toutefois, vous pouvez considérer que par défaut 72 dpi est largement satisfaisant pour tous les usages. Bien entendu, n’hésitez pas à faire des essais avec des résolutions moindres, les gains de poids pouvant être importants.

 Compressez les images

Enfin, chaque format d’image utilise un algorithme de compression des informations de couleur. En optimisant ce taux de compression vous serez surpris des gains possibles, sans perte de qualité visuelle.

Dans l’exemple ci-dessous, il faut être un expert de l’imagerie visuelle pour déterminer la perte de qualité !

Pour les extrémistes

Et, pour ceux qui souhaitent aller jusqu’au bout de la démarche, quelques octets peuvent aussi être récupérés en supprimant les meta datas inclus dans chacune des images.

Si vous allez jusqu’à ce point d’optimisation, profitez-en pour placer élégamment votre copyright.

Un outillage ?

Vous l’avez compris, un traitement initial de chacune des images (points 1 à 4 du plan d’actions) dans un logiciel spécialisé est nécessaire. Vous pouvez employer gratuitement un logiciel comme GIMP ou lui préférer des produits payants, suivant vos choix, goûts et connaissances de graphiste.

Pour ce qui est de la compression, vous trouverez de nombreuses solutions sur Internet. Si vous ne savez comment commencer la recherche deux articles seront d’excellents points de départ : 12 Really Useful Image Optimization Tools For Web Designers et 8 Excellent Tools for Optimizing Your Images.

Personnellement, je vous recommande malgré tout RIOT (Radical Image Optimization Tool). Cet outil, véritable couteau suisse de l'optimisation d'image permet de gérer :

• le niveau de compression,
• le choix de l'algorithme de transformation,
• le nombre de couleurs,
• les meta datas,
• le redimensionnement,
• la transparence,
• et de nombreux autres paramètres.

Il est aussi capable de traiter les images par lots, le tout avec une interface à la fois simple, efficace et conviviale juste ce qu'il faut.

Une alternative (sous Windows) peut aussi être imgOptimize.

Conclusion

Dans un article à suivre (très rapidement), nous allons poursuivre sur le sujet des images et notamment des meilleures pratiques concernant leurs intégrations dans le code HTML.

D’ici là, vous aurez le temps de commencer à auditer ou appliquer les recommandations déjà évoquées !