Optimisation des images d'un site Web - Partie 1

Ça y est, votre projet de site Web est lancé, ou peut-être même achevé.

Mais avez-vous pris en compte toutes les possibilités d'optimisation qui faciliteront son utilisation par un internaute ?

Dans cet article, j'aborde les optimisations possibles pour toutes les images... et il y a des choses à faire !

Un site Web moderne utilise largement les images. Leur optimisation est donc un critère essentiel de performance, notamment au regard du temps de chargement des pages.

Choix du format d'image

Généralement, 3 formats d'images sont utilisés :
(raisonnablement, tout autre format est à proscrire pour des raisons de compatibilité OS, serveur ou navigateur)

jpeg / jpg
(Joint Photographic Experts Group) : ce format permet de gérer jusqu'à 16 millions de couleurs, pour des graphismes évolués
gif
(Graphic Interchange Format) : ne permet de gérer que 256 couleurs, mais supporte la transparence ou l'animation,
png
(Portable Network Graphics) : permet de gérer jusqu'à 16 millions de couleurs, en gérant une transparence de niveau variable. Attention toutefois, les anciennes versions des navigateurs (notamment Internet Explorer avant la version 7.0) ne supportent pas toujours ce format relativement récent (1995 tout de même).

Le choix du format de l'image est donc intimement lié à l'image à afficher, un cuseur, une icone, ou une photo, ainsi qu'à votre volonté de créer un site totalement compatible avec toutes les versions des navigateurs.

Pour exemple, la même image, systématiquement optimisée ci-dessous. Vous constaterez :

  • un rendu similaire entre les versions JPG et PNG, pour un écart de poids de plus de 19 Ko en faveur du JPG, mais au prix de la perte de la transparence du fond,
  • une qualité bien moindre pour le GIF (fond transparent) par rapport au PNG (fond transparent), mais au prix d'un écart de poids de plus de 15 Ko.

JPG

2,78 Ko

PNG

21,7 Ko

GIF

6,82 Ko

Pour vous aider, vous trouverez ma propre grille de choix ci-dessous.

png
Contient du texte
png
Avec transparence
png / gif
Un logo, une icône, un dessin, un graphique
jpg
Une photographie, une image haute qualité
gif
Une animation

Gérer la résolution

Dans l'optique de ne conserver que le strictement utile, la chasse aux pixels commence par un ajustement correct de la résolution de l'image. Vous pouvez considérer qu'une résolution de 72 dpi (dots per inches ou point par pouce) est largement suffisante pour un affichage à l'écran.

Cependant, pour les puristes, ou ceux qui dédient leur site à un support bien particulier et qui veulent un résultat (plus que) parfait, il est nécessaire de se plonger dans quelques calculs. En résumé, vous obtiendrez les résultats suivants :

Résolution écran native Densité de pixels
MacBook Air 11" 11,6" en 7366 x 768 135 dpi
iPad (1 & 2) 3,5" en 480 x 320 165 dpi
iPhone 4 3,5" en 960 x 640 330 dpi

Si vous souhaitez plus de détails, vous pouvez commencer votre recherche par le billet de Florent Verschelde, Le Web c’est pas en 72 dpi, coco!.

Pour exemple, la même image ci-dessous. Vous constaterez :

  • un rendu similaire entre les versions 180 et 72 dpi, avec une légère perte à 30 dpi,
  • une perte de qualité perceptible entre les versions à 180 et 30 dpi,
  • une variation de poids notable pour une image native de 225 x 300 pixels.

JPG - 180 dpi

49 Ko

JPG - 72 dpi

47,1 Ko

JPG - 30 dpi

43,8 Ko

Gérer la taille

Une fois le sujet de la résolution traité, il est essentiel de sauvegarder les images dans la taille correspondant exactement à celle utilisée pour l'affichage. Non seulement vous réduirez drastiquement le volume de données transmis, mais cela vous permettra :

  1. d'être certain que l'affichage final est conforme à ce que vous souhaitez (i.e. sans perte de qualité),
  2. d'éviter tout calcul (ou post-traitement donc temps de calcul) par le navigateur client.

200 x 267 pixels

44,6 Ko

800 x 1067 pixels

225 Ko

Par ailleurs, les espaces d'encadrement vierge (fond de couleur uni ou transparent) doivent être supprimés et remplacés dans le code de la page par l'espacement correspondant (padding ou margin).

Optimiser la compression

Enfin, chaque image peut bénéficier d'un traitement spécifique pour éviter les derniers excès de poids. En effet, un format jpg utilise un algorithme de compression (lié à la qualité de l'image), et un gif utilise une table de couleurs qu'il est possible de réduire à sa partie utile.

Pour réaliser cet ultime traitement, il vous suffit d'enregistrer différentes versions de vos images et de les comparer. Simple, mais rustique et chronophage, d'autant qu'il existe des logiciels dédiés à ce genre d'opération, payants bien entendu, mais aussi open source.

Pour exemple, ci-dessous la même image, non optimisée et optimisée. Aucune perte de qualité notable, mais un gain de près de 37 Ko, soit environ 85% !

non optimisée

44,6 Ko

optimisée

7,48 Ko

Pour les extrémistes

Et pour finir, il est utile de savoir qu'une image embarque des metadatas, souvent fixées par l'appareil photo ou le logiciel de traitement d'images.

Ici aussi, quelques octets sont à récupérer si on le souhaite, en supprimant ces informations superflues.

Ou alors, si vous décidez de les utiliser, profitez en pour insérer élégamment votre copyright !

Les outils nécessaires

Finalement, si vous êtes sous Windows, je vous recommande vivement 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 metadatas,
  • 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.

Toujours pour Windows, une alternative viable est imgOptimize.

Evidemment, de nombreux autres outils existent, plus ou moins spécialisés, on-line ou non.

Pour trouver celui qui vous correspondra le mieux, vous pouvez commencer votre recherche par ces 2 liens :

Conclusion

L'ensemble des éléments évoqués dans cet article permet de réaliser une véritable optimisation du temps de chargement des pages, en réduisant drastiquement le poids des images.

À titre d'exemple, pour le site ahounou.com, l'application de toutes ces recommandations m'a permis de réduire de plus de 75% le volume total des images utilisées.

Maintenant, c'est à vous, car n'oublions pas qu'il est communément admis qu'à chaque seconde de chargement d'une page, c'est 10 internautes qui fuient !