Dimension des images

Plus une page Web met de temps à s’afficher, plus l’utilisateur risque de la quitter avant d’en avoir consulté le contenu.

Les images sont les principales coupables de la lourdeur excessive (grande quantité de données à télécharger) d’une page Web. Il est donc important d’user de stratégies permettant de réduire leur poids afin d’en accélérer le téléchargement par l’utilisateur.

Pour optimiser une image, il faut considérer les éléments suivants :

  1. La résolution (taille) de l’image dans la page Web
  2. La nature de l’image

 

1. Résolution de l’image

Plus l’image est grande, plus elle mettra de temps à télécharger. Il est donc recommandé de la sauvegarder dans la taille exacte qu’elle aura sur la page Web.

 

2. Nature de l’image

L’image peut être une icône, un graphique, une photographie, une publicité, etc.

Il existe plusieurs formats de fichiers d’images pris en charge par la majorité des navigateurs Web modernes. Les formats employés pour les images sur le Web sont généralement les suivants.

  • JPEG (Joint Photographic Experts Group) : photos et images complexes
  • PNG (Portable Network Graphics) : images simples, graphiques, logos, icônes
  • SVG (Scalable Vector Graphics) : graphiques, logos et icônes
  • GIF (Graphics Interchangeable Format) : graphiques, logos, icônes et animations

Il est important de choisir le format approprié selon la nature de l’image.

 

JPEG

Le JPEG est un format mieux adapté aux photographies, où les surfaces de couleurs unies sont rarement présentes. Ce format compresse l’image. Par conséquent, il occasionne une perte de qualité, qui peut être plus ou moins visible selon le degré de compression utilisé lors de l’exportation de l’image.

Il est important d’ajuster le paramètre de qualité de l’image lors de l’exportation (ce paramètre se situe entre 0 et 100, où 0 signifie qu’une compression élevée sera appliquée à l’image pour tenter d’en réduire le poids; la qualité de l’image sera donc moindre).

Dans l’outil de traitement d’images Photoshop, il est possible de voir en temps réel le résultat de l’image compressée. Chaque image doit être ajustée individuellement, car certaines pourront bénéficier d’une compression plus sévère sans que la perte de qualité ne soit trop apparente, alors que pour d’autres une légère compression aura un effet marqué.

Par exemple, entre les paramètres de compression de 50 et de 80, parfois il n’y aura que quelques kilo-octets (Ko) de différence au poids final de l’image, mais celle-ci apparaîtra beaucoup plus belle avec un paramètre de 80.

Également, la différence de poids peut être grande entre 100 et 80, tandis que la différence de qualité de l’image peut être à peine perceptible. L’idée est de trouver un bon compromis entre le poids de l’image et la qualité.

Tous les navigateurs prennent en charge le format JPEG.

Voici une photo JPEG traitée avec différents paramètres de qualité de l’image :

Photo de nez de chat au format JPG, meilleure qualité

Qualité : 100, poids : 129 Ko

 

Photo de nez de chat au format JPG, meilleure qualité (zoom 300%)

Détail (agrandissement 3x)

 

Photo de nez de chat au format JPG, bonne qualité (zoom 300%)

Qualité : 60, poids : 27 Ko (agrandissement 3x)

Notez que la différence est faible au niveau de l’image par rapport à la version traitée avec une qualité de 100, mais le poids est considérablement plus léger.

 

Photo de nez de chat au format JPG, faible qualité (zoom 300%)

Qualité : 40, poids : 16 Ko (agrandissement 3x)

Les détails sont moins précis et les couleurs moins belles.

 

Photo de nez de chat au format JPG, mauvaise qualité (zoom 300%)

Qualité : 0, poids : 8 Ko (agrandissement 3x)

La qualité est grandement affectée.

 

Exemple d’élément graphique exporté en JPEG avec divers paramètres de qualité :

Image du logo de l'UQAM au format JPG, meilleure qualité

Qualité : 100, poids : 52 Ko

 

Image du logo de l'UQAM au format JPG, meilleure qualité (zoom 500%)

Qualité : 100, poids : 52 Ko (agrandissement 5x)

 

Image du logo de l'UQAM au format JPG, bonne qualité (zoom 500%)

Qualité : 80, poids : 49 Ko (agrandissement 5x)

Très peu de différence de poids, mais on voit déjà apparaître les artefacts de compression autour des lettres, dans le bleu.

 

Image du logo de l'UQAM au format JPG, faible qualité (zoom 500%)

Qualité : 50, poids : 40 Ko (agrandissement 5x)

Peu de différence de poids. Sévères artefacts de compression autour des lettres, dans le bleu.

 

Image du logo de l'UQAM au format JPG, mauvaise qualité (zoom 500%)

Qualité : 20, poids : 42 Ko (agrandissement 5x)

Le fichier est plus lourd que celui ayant été traité avec une qualité plus élevée. Sévères artefacts de compression autour des lettres, dans le bleu.

 

PNG

Le PNG est un format adapté aux éléments graphiques, icônes et formes avec dégradé ou fond uni. Il a été conçu pour remplacer le format GIF. Il n’occasionne pas de perte de qualité, et sa palette de couleur n’est pas restreinte à 256, contrairement au GIF.

Le poids d’un fichier PNG sera souvent moindre que l’aurait été un GIF. Le format PNG peut produire des images détourées (c’est-à-dire sans fond). Tous les navigateurs modernes prennent en charge le format PNG.

Exemples d’images PNG :

Photo d'un nez de chat au format PNG

Fichier PNG, poids : 321 Ko

Le fichier est plus lourd que le JPEG ayant été traité avec une qualité d’image maximale.

 

Image du logo de l'UQAM au format PNG

Fichier PNG, poids : 4 Ko

 

Image du logo de l'UQAM au format PNG (zoom 500%)

Agrandissement 5x

Le fichier est léger et ne présente aucun artefact de compression.

 

SVG

Le format SVG est un format d’image vectoriel mieux adapté aux icônes et logos. Pour exporter une image en SVG, il est nécessaire que la source soit en vectoriel. Un fichier SVG est généralement très peu volumineux. Le navigateur de l’utilisateur se charge de faire le rendu de l’image.

Il est préférable d’exporter les icônes et logos en SVG, puisque les SVG s’afficheront parfaitement, peu importe la résolution de l’écran.

Sur les appareils ayant un écran à haute densité – dont la résolution est beaucoup plus élevée (plus de 250 pixels par pouce) que les écrans standard d’ordinateurs (entre 72 et 150 pixels par pouce) – on verra les pixels d’une image en Bitmap, tandis que l’image vectorielle sera parfaite.

Exemple de fichier SVG :

Image du logo de l'UQAM simulant un agrandissement de 500% au format SVG

Poids : 2 Ko

Agrandissement 5x

Comme les formes sont calculées mathématiquement, on peut agrandir l’image sans perdre de qualité, ni voir apparaître de pixels. (Note : Le fichier de l’exemple est au format PNG et est une simulation de ce qu’on verrait si on agrandissait un fichier SVG.)

 

GIF

Le format GIF est remplacé par le format PNG. Le format GIF ne permet pas plus de 256 couleurs dans une même image. Ce format indexe les couleurs de l’image pour réduire son poids.

Il est aussi possible de faire des animations au format GIF. Il est préférable d’utiliser le format PNG plutôt que le GIF pour les images et graphiques statiques.

Exemples d’images exportées au format GIF :

Photo de nez de chat au format GIF, meilleure qualité

256 couleurs, poids : 142 Ko

 

Photo d'un nez de chat au format GIF, meilleure qualité (zoom 300%)

La photo GIF contient considérablement moins de couleurs que la photo JPG, mais a le même poids.

 

Photo d'un nez de chat au format GIF, qualité moyenne

64 couleurs, poids : 89 Ko

Les couleurs sont fades.

 

Image du logo de l'UQAM au format GIF

256 couleurs, poids : 2 Ko

 

Image du logo de l'UQAM au format GIF (zoom 500%)

Agrandissement 5x

L’image ne présente pas d’artefacts de compression.