Introduction
La définition d’une image est un concept pas toujours connu mais pourtant primordial lorsqu’on travaille avec des images. Et en particulier lorsque nous utilisons des images sur nos sites Internet.
Ce texte se veut accessible et n’a donc pas pour vocation à être exhaustif. Et comme à mon habitude, je limiterai au maximum l’usage des termes techniques et abréviations.
Qu'est-ce qu'une image
Les images peuvent être vectorielles ou matricielles. Cet article traite des images matricielles qui représentent les types courants d’image : bmp, jpg, png, etc. Ces types sont matriciels car constitués d’une matrice de petits carrés ou d’un tableau de petits carrés, si vous préférez. Nous appelons ces petits carrés des pixels et la notation abrégée est px. Pour simplifier, nous dirons que chaque pixel a une couleur, même s’il peut aussi être transparent dans certains formats comme le png.
Voyons l’exemple d’une image agrandie de telle sorte que les pixels qui la composent soient bien distincts.
Définition de la... définition
Maintenant que vous savez qu’une image est composée de petits carrés, les pixels, nous pouvons expliquer ce qu’est la définition d’une image. La définition d’une image est le nombre de pixels qui constituent celle-ci. Ainsi l’image d’origine utilisée dans le paragraphe précédent contient 160 pixels et ressemble à ceci si nous l’affichons dans sa taille d’origine.
Vous verrez deux manières d’exprimer une définition d’image :
- En indiquant le nombre total de pixels : 160 px dans notre exemple
- En indiquant le nombre de pixels composant la hauteur et la largeur soit 40 x 40 px dans notre exemple
Notez que la définition est aussi une des caractéristiques des écrans. Que ce soit les téléviseurs, les écrans d’ordinateur, de tablettes ou de smartphones. Comme nous le verrons plus loin, ceci peut avoir un intérêt dans le choix de la définition d’une image.
Définition d'image et qualité
La qualité d’une image et sa définition sont liées. En effet, plus la définition d’une image est élevée, plus elle a de pixels et donc plus elle a de détails. Pour illustrer ce propos utilisons une photo de chaton en train de jouer avec une fleur. La première photo a une définition de 640×626 px. La deuxième photo a une définition de 160×156 px. Observez par exemple comme nous ne distinguons quasiment pas la fleur et les moustaches du chaton sur la deuxième photo.
Cette différence est facilement compréhensible car moins le nombre de pixels est élevé, moins il est possible de matérialiser les détails. Cela explique aussi pourquoi les supports vidéos offrent des images de plus en plus belles, voyez la progression du nombre de pixels composant ces supports au fil du temps :
- DVD : 720 x 480 pixels soit 345 600 pixels
- HD (Haute Définition) : 1920 x 1080 pixels soit 2 073 600 pixels
- UHD (Ultra Haute Définition / 4K) : 3840 x 2160 pixels soit 8 294 400 pixels
Vous voyez ainsi que l’image d’un film en 4K a 24 fois plus de pixels qu’un film en DVD.
Pourquoi la définition est importante dans le web
Si vous n’êtes pas familiarisé avec les unités utilisées pour mesurer les tailles de fichier, je vous invite à lire l’article L’octet – l’unité de mesure à comprendre quand on a un site web.
Définition et poids
Une raison pour laquelle il est important de savoir ce qu’est la définition d’une image est que la taille d’une image évolue avec sa définition. Ainsi plus la définition est élevée, plus le fichier sera volumineux. Or il est déconseillé d’utiliser des images volumineuses dans une page web. De plus, les appareils photos ou Smartphones actuels peuvent générer des photos très volumineuses. Donc nous vous conseillons de systématiquement regarder les taille et définition d’une image avant de l’insérer dans une page web. Ainsi vous verrez si vous devez / pouvez redimensionner l’image pour l’alléger. En effet, si vous faîtes appel à un photographe pour prendre des photos, celui-ci vous les donnera avec une définition élevée de manière à pouvoir les utiliser dans tous les contextes (web, impression, etc.), ce sera alors à vous de les redimensionner en fonction de l’usage.
Définition et qualité d'affichage
Dans une page web, vous pouvez forcer la définition d’affichage d’une image. Celle-ci peut être différente de la définition de l’image affichée. Il est ainsi possible par exemple qu’une image de 1920 x 1280 pixels soit affichée en 960 x 640 pixels. Ou l’inverse. Dans les deux cas, l’image d’origine devra être transformée afin d’être affichée aux bonnes dimensions, ce qui peut engendrer une perte de qualité. La perte de qualité est en général plus importante lorsque l’image est agrandie. Voyons un exemple concret avec nos images de chatons précédemment utilisées ici affichées dans une définition de 300 x 293 pixels. L’une est donc affichée dans une définition plus basse et reste assez nette. L’autre est affichée dans une définition plus haute et devient floue ou pixelisée.
La définition de l’image d’origine est 640 x 626 pixels. Affichée en 300 x 293 pixels, la qualité reste correcte.
La définition de l’image d’origine est 160 x 156 pixels. Affichée en 300 x 293 pixels, la qualité est dégradée.
Ne confondez pas définition et résolution
Vous verrez très souvent le terme « résolution » utilisé à la place de « définition ». Il s’agit d’un abus de langage. En effet, ces notions sont différentes. La résolution sert à indiquer un nombre de pixels par pouce et caractérise quelque chose de physique comme par exemple un écran ou une image imprimée. Pour illustrer rapidement la différence, considérons deux téléviseurs HD ayant donc une définition de 1920 x 1080 pixels. Si le premier téléviseur a une diagonale de 40 pouces et le second de 60 pouces, le premier affichera plus de pixels par pouce que le second. Les deux téléviseurs ont donc une résolution différente bien qu’ils aient une définition égale.
Comment modifier la définition
Si vous voulez voir et modifier la définition d’une image, utilisez n’importe quel logiciel de dessin ou permettant de travailler sur les images. Nous vous montrons ici comment faire avec XnView une visionneuse d’images gratuite.
Une fois votre image ouverte avec XnView, ouvrir le menu Image > Redimensionner.
Dans la fenêtre qui s’ouvre, vous pourrez alors modifier les dimensions de l’image. Ce qui nous intéresse ici sont les valeurs de la zone « Taille écran ». Vous verrez que si vous modifiez par exemple la largeur, la hauteur sera alors automatiquement modifiée. Et vice versa. Ceci est dû au fait que la case « Conserver les proportions » est cochée. La plupart des logiciels adoptent par défaut ce comportement car cela correspond au besoin le plus courant : nous voulons modifier les dimensions et non déformer l’image. Une fois les dimensions de l’image modifiée, appuyez sur le bouton « Ok », puis enregistrez l’image. Nous vous conseillons d’enregistrer l’image sous un autre nom pour ne pas altérer l’image d’origine. Donnez-lui alors un nom explicite contenant notamment la définition (ex : chaton-qui-joue-640x626px.jpg), cela vous facilitera la tâche par la suite.
Notez enfin la résolution de l’image que nous évoquions précédemment. Elle se trouve dans la zone « Taille d’impression » et vaut 72 pixels par pouce. La valeur classique pour une image utilisée pour le web.
Quelle valeur pour la définition d'une image
Vous vous demandez certainement quelle valeur donner à la définition d’une image pour votre site web. Dans ce cas vous allez être déçu car il n’y a pas de règle absolue, mais plutôt des bonnes pratiques.
Si l’image est affichée dans des dimensions fixes et connues, donnez idéalement la même définition à votre image. Par exemple, l’image illustrant votre article de blog est affichée en 640 x 480 pixels, donnez une définition de 640 x 480 pixels à l’image.
Si la dimension d’affichage de l’image est variable, le problème se complique un peu. En effet, supposons que votre site web couvre 100% de la largeur de l’écran. Et que l’entête de votre site a une image de fond qui donc couvre a priori aussi 100% de la largeur de l’écran. Quelle dimensions donner à cette image, sachant que les largeurs des écrans sont extrêmement variables selon les matériels : 1080 pixels sur mon smartphone ,1920 pixels sur mon ordinateur, 3840 pixels sur un écran 4K, etc. A vous de trouver un bon compromis. Sachez aussi que certains outils de conception de sites web permettent d’utiliser des images différentes en fonction des tailles d’écran. Si tel est votre cas, utilisez cette fonctionnalité, même si cela représente un peu plus de travail.
La définition ne fait pas tout
Jouer sur la définition est un moyen facile de réduire le poids d’une image mais ce n’est pas le seul.
En effet un autre moyen de diminuer le poids d’une image est aussi de simplement choisir le bon format de fichier. Les deux principaux formats d’image sur le web sont le png et le jpg. Le png est sensiblement plus lourd que le jpg. Aussi, si votre image n’utilise pas la transparence, privilégiez le format jpg. Ce point fera l’objet d’un article à venir.
Par ailleurs vous trouverez de nombreux outils permettant de compresser les images, attention alors de garder une qualité d’affichage acceptable.
Ce qu'il faut retenir sur la définition
Les principaux points à retenir sont :
- Regardez la définition d’une image avant de l’insérer dans une page web et modifiez-la si l’image est trop volumineuse.
- Faîtes en sorte de dimensionner les images, afin de ne pas dégrader leur affichage.
- La définition ne fait pas tout.
L’image illustrant cet article est fournie par Dimitri Houtteman de Pixabay