Introduction

Une image vaut des milliers de mots, certes, mais chaque image représente généralement une quantité de données beaucoup plus importante qu'un texte contenant des milliers de mots et entraînera donc des délais de téléchargement beaucoup plus longs. Les pages Web consacrent souvent plus de données aux images qu'au texte et vous pouvez donc facilement améliorer l'expérience des utilisateurs qui disposent d'une connexion à faible débit en réduisant le nombre et la taille des images que vous intégrez à votre site Web.

Utilisez du CSS plutôt que des images pour la mise en page

Utilisez des feuilles de style pour remplacer les images dont le seul objectif est de définir la mise en page. Même si elles sont de petite taille (quelques pixels), les images entraînent des délais système supplémentaires considérables. Par exemple, une image de 1x1 pixel qui ne représente que 43 octets ajoute quelques secondes au temps de chargement, le temps que des requêtes HTTP soient envoyées au serveur pour solliciter le téléchargement de l'image. De plus, si l'utilisateur a désactivé les images pour optimiser la bande passante, la mise en page risque d'être déformée, et ce particulièrement si la taille des images n'est pas spécifiée dans la source HTML.
(Exemple : remplacement des tables et des images transparentes par du CSS)

Utilisez du texte plutôt que des images

Evitez d'utiliser des images en guise de texte pour les boutons et les menus. Le texte équivalent représentera sans doute une quantité moins importante de mémoire et se chargera donc plus rapidement. En outre, il ne disparaîtra pas si les images sont désactivées. De même, veillez à n'utiliser des images interactives que si elles améliorent l'usabilité de votre site. Les effets tels que les substitutions de menu peuvent être obtenus par le biais de CSS plutôt que d'images permutées. Il est donc recommandé de définir la mise en forme du texte dans le contenu CSS afin de minimiser les délais système occasionnés par le chargement des images de petite taille. Notez également qu'avec cette méthode, le texte est automatiquement redimensionné si l'utilisateur décide d'augmenter la taille de police de la page.
(Exemple : utilisation de données CSS plutôt que d'images pour les effets de substitution)

Utilisez des couleurs et des fonds d'écran stylisés plutôt que des images

Evitez d'utiliser des images en guise de couleur d'arrière-plan. Vous pouvez utiliser du CSS pour obtenir des effets similaires tout en réduisant la consommation de bande passante de votre site.

Utilisez le format d'image correct

En raison des techniques de compression utilisées sur Internet, il est généralement préférable d'utiliser le format JPEG pour les photos et les formats GIF et PNG pour les graphismes bitmap (logos, images contenant des zones de couleurs discrètes, etc.). En choisissant le format d'image correct, vous pouvez optimiser la compression de vos images tout en préservant leur qualité.
(Exemple : utilisation du format d'image correct 190 Ko)

Le SVG (Scalable Vector Graphics) est un nouveau format conçu pour les graphismes bidimensionnels. En tant que format libre, le SVG pourrait bien révolutionner les capacités de mise à disposition d'images dans les environnements à bande passante faible. La prise en charge du format SVG restant toutefois limitée, nous vous déconseillons d'utiliser ce format pour le moment.

Optimisez vos images pour réduire leur taille

Optimisation de la qualité

Définissez les paramètres de qualité de vos images JPEG sur le niveau le plus bas possible. Lorsque vous enregistrez des images au format JPEG dans des applications telles que GIMP[1] et Photoshop, vous avez la possibilité de définir leur qualité. Testez chaque paramètre pour identifier le niveau de qualité le plus bas acceptable. Evaluez les besoins de vos différents utilisateurs pour déterminer le niveau de qualité (élevé ou faible) que vous devez attribuer à vos images.
(Exemple : optimisation de la qualité des images 54 Ko)

Optimisation de la profondeur de couleurs

Si la couleur de vos images n'a que peu d'importance, convertissez vos images JPEG en mode Niveaux de gris. Les images JPEG définies en niveaux de gris n'utilisent qu'un seul canal de couleur à 8 bits plutôt que les trois canaux nécessaires en mode RVB, ce qui signifie que la taille de vos images diminue lors de la conversion L'ampleur de cette diminution dépend des dimensions et du contenu de l'image. Les applications de graphisme telles que GIMP[1] intègrent des outils de conversion en mode Niveaux de gris.
(Exemple : utilisation d'images JPEG en niveaux de gris 63 Ko)

Optimisation des couleurs pour les images GIF et PNG

Les images GIF et PNG sont basées sur des palettes de couleurs. Plus le nombre de couleurs est faible, plus le nombre de bits à stocker est faible et plus la taille du fichier est réduite. Si une image ne contient que 16 couleurs, il est inutile d'utiliser une palette de 256 couleurs. GIMP[1] comprend une fonction permettant de réduire la palette des images GIF et PNG lors du passage du mode RVB au mode Indexé. Effectuez plusieurs tests pour identifier le nombre de couleurs minimal requis pour obtenir une qualité d'image acceptable.
(Exemple : optimisation des couleurs 139 Ko)

Suppression des métadonnées des images JPEG

Les fichiers d'image JPEG contiennent souvent des métadonnées inutiles pour les pages Web. Les données EXIF spécifient par exemple le modèle de l'appareil photo et la durée d'ouverture. Le prfil de couleur ICC est utilisé pour améliorer la cohérence des couleurs entre les différents supports. la plupart des images contiennent une ou plusieurs images miniatures imbriquées. La taille d'une image typique est généralement réduite de moitié lorsque vous supprimez ces métadonnées. Or, cette opération n'a aucun effet sur la qualité de l'image. Certains logiciels spécialisés permettent de supprimer ces métadonnées mais la plupart des programmes logiciels graphiques permettent d'enregistrer les images sans ces données.
(Exemple : suppression des métadonnées 32 Ko)

Outils d'optimisation

Divers outils d'optimisation sont disponibles en ligne, tels que Dynamic Drive Image Optimizer[2], qui permet d'appliquer les techniques de réduction de palette et de qualité décrites ci-dessus à différents niveaux. Vous pouvez comparer les images résultantes ainsi que leur taille d'enregistrement.

Utilisez des miniatures pour les images volumineuses

Utilisez des images réduites sur vos pages les plus fréquemment visitées, telles que la page d'accueil de votre site Web. Vous pouvez également utiliser une image miniature directement reliée à l'image d'origine. Cette méthode permet à l'utilisateur d'obtenir un aperçu de l'image et d'en télécharger une plus grande version s'il le souhaite. Une image de 450x300 pixels (25 Ko) nécessite environ 10 secondes pour se charger sur une connexion à 20 Kbits/s. En revanche, une miniature de 150x100 pixels (2 Ko) de cette même image nécessite moins d'une seconde pour se charger. Pour économiser davantage de bande passante, vous pouvez également insérer un lien vers l'image plutôt qu'une miniature. Quelle que soit l'option pour laquelle vous optez, n'oubliez pas d'indiquer la taille des images volumineuses. Si vos utilisateurs cible sont susceptibles d'utiliser à la fois des connexions à haut et à faible débit, vous pouvez insérer deux liens : l'un pointant vers la version réduite de l'image et l'autre vers sa version développée.
(Exemple : utilisation d'images miniature 62 Ko)

Mettez vos images à l'échelle appropriée

Vos images doivent être mises à l'échelle conformément à la taille à laquelle elles apparaîtront sur la page et leurs dimensions doivent être définies de façon correcte pour la balise image. Toute image dont la taille est plus grande que nécessaire entraînera une consommation superflue de la bande passante et, dans la mesure où l'image devra être redimensionnées par le navigateur, prolongera le temps de traitement. De plus, la qualité de l'image risque de se détériorer au cours du processus. Ce cas de figure se présente généralement lorsque l'image a été obtenue à partir d'un appareil photo numérique.
(Exemple : redimensionnement des images 884 Ko)

Spécifiez les dimensions de vos images

Les images sont souvent les éléments de données les plus volumineux et les plus long à charger d'une page Web. Une page Web peut toutefois présenter d'autres éléments importants avant que les images n'aient finies de se charger. En définissant les attributs de largeur et de hauteur (width et height) de chacune de vos images, vous permettrez au navigateur d'insérer des espaces réservés de taille appropriée de sorte que la mise en page restera inchangée lors du chargement des images. Si vous n'effectuez pas cette opération, le navigateur devra reformater la page chaque fois qu'une image se charge, ce qui rendra votre site difficile à utiliser tant que toutes les images n'auront pas été chargées.

Fournissez une description textuelle de toutes vos images

Le chargement des images peut demander un certain temps sur les connexions lentes. Un site bien conçu doit pouvoir être utilisé avant même que les images n'aient finies de se charger. Etant donné que les descriptions textuelles apparaissent avant que les images ne commencent à se charger, elles peuvent être utilisées en tant qu'alternatives aux images en fournissant autant d'informations que celles-ci. Notez que certains utilisateurs préfèrent désactiver les images et que les moteurs de recherche utilisent également les descriptions textuelles pour indexer les sites Web.

Réduisez le nombre de requêtes HTTP

Pour être chargée, chaque image fait l'objet d'une requête HTTP qui se traduit par un temps système et une latence donnés. Si votre page contient plusieurs images adjacentes, il est donc préférable de les fusionner sous forme d'une seule image. L'image résultante ne sera probablement pas plus volumineuse que les images source cumulées et ne nécessitera l'envoi que d'une seule requête HTTP.

Références

[#1] GIMP est un logiciel gratuit disponible à partir du site Web http://www.gimp.org/

[#2] http://tools.dynamicdrive.com/imageoptimizer/