Plan de l’article

• Pourquoi optimiser vos images ?
• Les notions de base
• Les outils utilisables
• L’organisation nécessaire
• Pour aller plus loin…

Les notions de base

Avant de s’attaquer à l’optimisation de vos images, il est bon de se rappeler quelques notions de base relatives aux fichiers d’images numériques.

Les formats d’images

Les trois formats d’images les plus couramment utilisés sur internet sont :

• JPEG : ce format permet de compresser l’image, certes avec une perte de qualité, mais avec des gains importants en termes de poids ; c’est le format recommandé pour les photographies dans la plupart des cas.
• PNG : ce format gère la transparence ; il est toutefois plus lourd que le JPEG. Son utilisation sera donc réservée aux logos et autres illustrations dont la transparence doit être conservée.
• GIF : moins utilisé que les deux précédents, ce format prend néanmoins en charge l’animation.

Le poids d’une même image varie fortement selon le format utilisé, comme on peut le constater à travers le test suivant, effectué à partir d’une même image re-dimensionnée et optimisée sous Photoshop en taille 1000×667 :

Le format JPEG, même en qualité supérieure, est ainsi plus de deux fois plus léger que le format PNG le plus light (PNG 8)…

La taille et la résolution

Une image numérique est composée d’un ensemble de points appelés « pixels » (Picture Elements). L’ensemble de ces pixels est contenu dans une grille à deux dimensions qui constituent l’image :

La taille d’une image correspond à sa « définition », calculée en nombre de pixels qui la composent. Pour l’image ci-dessus, sa taille réelle, telle qu’elle est affichée dans la page, est ainsi de 150 x 125 pixels.

La « résolution », exprimée en « dpi » (dot per inch – points par pouce), détermine la densité de ces pixels/points par unité (par pouce carré).

La résolution permet donc de faire le lien entre la définition et les dimensions physiques d’impression de l’image.

La notion de résolution est souvent utilisée pour déterminer un niveau de qualité, avec comme idées simplificatrices largement répandues, le fait qu’il faille :

• 72 dpi pour une image sur internet
• 300 dpi pour une image imprimée.

Cette notion est toutefois obsolète. Sur internet, la qualité d’une image dépend de sa seule définition, c’est-à-dire de sa taille en pixels, puisque la résolution sera déterminée, et imposée à l’image, par l’écran du matériel d’affichage (ordinateur, tablette, smartphone…). Ainsi, une image de 300 pixels de largeur s’affichera sur votre écran sur 300 pixels de cet écran !

L’important sera donc de dimensionner les images au plus juste de manière à utiliser l’espace écran de manière cohérente…

L’organisation nécessaire

La préparation des images et illustrations de votre site peut être assez chronophage. Elle nécessite donc un minimum d’organisation.

Cette organisation fait l’objet de l’article « Organisez votre espace de travail« .