• Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Les images numériques

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Avant d'aller plus loin dans l'utilisation de GIMP, il me parait important que vous maitrisiez certains concepts de l'infographie, et plus particulièrement des images numériques.

Nous allons voir dans ce chapitre des notions essentielles, comme les formats d'images, les pixels ou encore la résolution d'image.
Ces notions sont importantes, vous serez tôt ou tard bloqués si vous ne les maitrisez pas, donc autant s'y mettre tout de suite.

Un chapitre à la fois intéressant et théorique en perspective, mais néanmoins nécessaire à votre formation d'infographiste. ;)

De quoi est composée une image numérique ?

On désigne sous le nom "d'image numérique" toute image pouvant être stockée sur un support informatique (ordinateur, clé USB, téléphone portable, Nintendo DS, iPod...).
Une fois sur support informatique, vous pouvez l'éditer, la modifier grâce à des logiciels (modifier sa taille, ses couleurs, ajouter ou supprimer des éléments), la partager (l'envoyer par e-mail, la mettre sur votre site web), faire des copies de sauvegarde... Bref, une grande liste de possibilités s'ouvre à vous. (Attention, cette liste de possibilités peut différer en fonction du périphérique sur lequel l'image est stockée). C'est ce qui fait toute la différence avec les images sur papier. Vous n'avez pas tout ce panel de possibilités parce qu'elle ne peut pas être stockée sur support informatique.

Une image numérique est entièrement composée de pixels (une unité de surface).
En pratique, on peut voir ces fameux pixels, il s'agit de quelque chose de concret ! Si vous vous approchez très près de votre écran (attention ça fait mal aux yeux), vous pourrez voir des petits carrés colorés lumineux, se sont les pixels.

Image utilisateur

Ce sont les mêmes petits carrés que l'on voit lorsqu'on agrandit trop une image matricielle.

Pas si vite ! Qu'est-ce qu'une image matricielle ?

Je vous en avais touché un mot dans le début du cours sans trop détailler. ^^ Dans le monde de l'imagerie numérique, il existe deux grands types d'images (deux grandes "familles" si vous préférez): les images matricielles et les images vectorielles. La grande différence entre ces deux types réside dans la qualité du redimensionnement.
Lorsque vous agrandissez une image matricielle, elle perd inévitablement en qualité: les pixels seront visibles et vous aurez des bords "en escaliers". De même, lorsque vous la rétrécissez, elle devient beaucoup moins nette et on a du mal a distinguer quoi que ce soit (c'est également vrai pour les images vectorielles).

Ce problème ne se pose pas avec les image vectorielles ! Que vous l'agrandissiez ou que vous la rétrécissiez, elle gardera exactement la même qualité et on ne verra pas apparaitre des pixels.
Néanmoins, les images vectorielles sont plutôt contraignantes donc en général on les utilise plutôt pour les polices, les logos ou les images destinées au web susceptibles d'être agrandies. On ne l'utilise en aucun cas pour les photos, on utilise le matriciel à la place.

Image utilisateur

© Wikipédia
Cette image illustre parfaitement le principe du matriciel et du vectoriel. A gauche, la pêche est "vectorisée". Aucune perte de qualité n'est notable. On distingue correctement les détails à toutes les tailles d'image qu'il s'agit d'une pêche et il n'y a pas de contours "en escaliers".
Par contre à droite, il s'agit de la même pêche au format matriciel. Plus on l'agrandie, et plus la pêche perd en netteté. La qualité est désastreuse.

Mais comment cela est-il possible ?

Une image vectorielle est composée de formes géométriques simples individuelles comme des lignes droites, des ellipses, des arcs de cercles, des triangles ou des courbes, chacune définie par des attributs de forme, de position ou de couleur. Lorsque l'image est par exemple agrandie, l'ordinateur recalcule toute l'image. Il est aisé pour lui d'agrandir des formes géométriques simples étant chacune sur une couche différente de l'image et permet ainsi une sorte de "zoom infini" sur l'image.

Mais alors, on laisse tous tomber le matriciel et vive le vectoriel !

Détrompez-vous. Même si le vectoriel offre beaucoup de souplesse de ce côté là, il est très difficile d'obtenir une image photo-réaliste avec du vectoriel car il faudrait superposer énormément de couches de formes géométriques et d'aplats de couleurs pour par exemple réaliser un dégradé.
Pour les polices, les logos ou toute autre image ayant besoin d'être redimensionnée facilement, il n'y a pas de doute, le vectoriel est tout indiqué.
Mais pour tout autre type d'image, le matriciel est recommandé (surtout pour les photos) car on aura plus de contrôle sur nos images. D'ailleurs, GIMP ne fait que du matriciel, donc nous ne parlerons plus du vectoriel dans ce cours. :p

Bon, revenons à nos moutons ! J'étais en train de vous parler des pixels. Se sont des petits carrés lumineux qui tapissent entièrement votre écran. Chaque pixel va afficher une couleur de l'image. Il y en a tellement et ils sont tellement petits que même à moins de un mètre de votre écran vous ne les apercevez pas et vous ne saviez peut-être même pas qu'ils existaient. ^^

Image utilisateur

En résumé ...

  • Une image numérique peut être stockée sur un support informatique. Elle est alors ouverte à tout type de retouche (redimensionnement, suppression ou ajout d'éléments, travail de la couleur, ...).

  • Il existe deux grands types d'images: le matriciel (ou bitmap) et le vectoriel.

  • Même si le vectoriel permet une plus grande souplesse au niveau du redimensionnement, nous allons utiliser le matriciel car c'est le plus adapté au travail des photos.

  • Les écrans sont tapissés de milliers de pixels permettant un affichage optimal de l'image. Chaque pixel émet de la lumière et affiche une couleur précise de l'image, si bien que le résultat est impeccable.

Voilà, nous en avons terminé avec cette brève introduction aux images numériques. Passons à une autre notion. :)

Les formats d'image

Maintenant, nous allons parler des formats d'image, une notion très importante. Choisir son format d'image de façon judicieuse est devenu indispensable dans le monde de l'informatique et surtout du web. Et oui, on n'envoie pas n'importe quel type d'image sur le web. Attention, quand je dis "type d'image", je ne parle pas du matriciel et du vectoriel. Je vous parle de quelque chose de totalement différent: le format d'image. :)

Le format de votre image permet d'indiquer à l'ordinateur de quel type il s'agit, en plus de lui faire comprendre que c'est un fichier image et non un fichier musique ou texte.

Il n'existe pas qu'un seul format d'image. En réalité, il en existe pas mal. Les propriétés d'une même image, telles que son poids ou sa qualité, vont sensiblement différer d'un format à l'autre.

Deux minutes ... si j'ai bien compris, les images ont un poids ? o_O

Oui tout à fait. ^^ Mais ce n'est peut-être pas le même que celui auquel vous pensez. Il ne s'agit nullement de la masse d'une image (que l'on appelle "poids" par abus de langage) ni de la force attractive exercée sur celle-ci. On entend par "poids d'un fichier" la place qu'occupe ce fichier sur le disque dur (ou tout autre support).

Cette quantité a pour unité l'octet. On peut aussi utiliser le ko (kilooctet), le Mo (mégaoctet), le Go (gigaoctet), et bien d'autres, chacun étant une unité plus grande que la précédente (par exemple, 1 Ko vaut 1024 octets).
Retenez simplement que si votre image n'a pas un poids colossal, vous utiliserez généralement le Ko ou le Mo pour le mesurer.

Nous allons passer en revu les formats les plus connus et ceux qui vous seront les plus utiles, ainsi que leurs différences. Je vous ai aussi concocté pleins d'exemples pour bien comprendre, donc ne vous inquiétez pas si c'est une notion qui vous semble obscure jusqu'à maintenant.

JPEG (extension .jpg)

Je suis tentée de dire que c'est le format le plus utilisé.
Il est idéal pour vos photos car il supporte pas moins de 16 millions de couleurs !
Néanmoins, il ne supporte pas la transparence ni les animations, et ce n'est pas un format très "précis", d'un point de vue de qualité d'image. Pour les contours nets, vous risquez de voir apparaître certaines bavures lors de la compression.

Au niveau du poids, le JPEG n'est pas excessivement gourmand, voici quelques exemples avec un dégradé de couleur semi-transparent, une photo d'un jeune écureuil (© likeaduck) et Wilber dont le fond est transparent:

Image utilisateur
Image utilisateur
Image utilisateur

Pour la photo de l'écureil, le résultat n'est pas si mal, malgré que les contours ne soient pas très nets. Pour le dégradé et Wilber, le résultat est désastreux car le JPEG ne gère pas la transparence. Les zones censées être transparentes sont devenues toutes noires.
Au niveau du poids, 8 Ko pour l'écureuil et 3 Ko pour le dégradé et Wilber.

PNG (extension .png)

C'est un format de plus en plus utilisé que je vous recommande. Il gère lui aussi 16 millions de couleurs et supporte la transparence. Il est donc idéal pour les logos nécessitant un fond transparent ainsi que pour le web design car il est assez léger. Il conserve plutôt bien la qualité des images lors de la compression.

Je vous le recommande aussi si vous devez poster des images sur Internet, telles que des captures d'écran ou pour vos avatars car vous aurez une image pas très lourde avec une bonne qualité au final. Notez toutefois que c'est un choix personnel, à vous de voir en fonction de vos besoins. ;)

Voici ce que ça donne au niveau des images d'exemple:

Image utilisateur
Image utilisateur
Image utilisateur

Les trois images sont d'une qualité impeccable. La transparence et la transparence progressive sont très bien sorties.
Au niveau du poids, c'est un peu plus que le JPEG, mais pour une dizaine de Ko en plus, il vaut mieux utiliser ce format. La photo fait 91 Ko, le dégradé fait 23 Ko et Wilber fait 30 Ko. Ce n'est pas un poids vraiment excessif.

GIF (extension .gif)

Voici un format particulièrement utile car il supporte les animations ainsi que la transparence. Il conserve aussi plutôt bien la qualité des images lors de la compression, comme le PNG, d'un point de vue de netteté.
Néanmoins, on évite de l'utiliser, sauf pour les images avec peu de couleurs, car il dispose d'une palette réduite de seulement 256 couleurs (les couleurs indexées). On est bien loin des 16 millions de couleurs du PNG et JPEG ! Autrement dit, si votre image comporte beaucoup de couleurs (comme les photographies), vous ne pourrez pas profiter d'une "qualité optimale".

Exemple en images:

Image utilisateur
Image utilisateur
Image utilisateur

Le GIF gère la transparence donc pas de problèmes de ce côté là. Notez toutefois que contrairement au PNG, le GIF ne gère pas la transparence progressive, il n'y a pas de notion d'opacité. La photo ne s'en est pas très bien sorti: les décalages de couleurs sont visibles. Il manque des couleurs au dégradé et les contours de Wilber se sont transformés en escaliers.

Au niveau du poids: 12 Ko pour la photo, 10,7 Ko pour le dégradé et 9,5 Ko pour Wilber.

Bitmap (extension .bmp)

Le format Bitmap est très utilisé sous Windows au niveau des fond d'écran car il conserve une qualité d'image vraiment impeccable. Vous vous doutez bien que c'est trop beau pour être vrai. :-° C'est un format extrêmement lourd à bannir du web ! Hors de question donc de l'utiliser pour le web design ou pour vos avatars.
D'ailleurs, certains sites interdisent l'upload d'images Bitmap. Pour éviter les mauvaises surprises, je vous déconseille ce format.
Vous pouvez néanmoins vous en servir pour votre utilisation personnelle, ce n'est pas interdit. A vous de voir et de juger aussi en fonction de votre espace de stockage disponible.

Je ne peux pas vous fournir d'images d'exemple car elles sont beaucoup trop lourdes. Sachez juste que le résultat est vraiment impeccable, sauf au niveau de la transparence car le Bitmap ne gère pas la transparence.

Pour vos donner une idée du poids: 224 Ko pour la photo, 156 Ko pour le dégradé et 118 Ko pour Wilber !

XCF (extension .xcf)

Comment finir sans parler de GIMP ? ^^
Le format XCF est le format de GIMP, comme dit dans un ancien chapitre, il vous permet de conserver vos calques, canaux, chemins, sélections actives, etc ...

Je vous conseille (et c'est moi-même ce que je fais) de toujours enregistrer un fichier XCF de votre travail. Vous pourrez ainsi retravailler votre image très facilement. Il m'est arrivé, à mes déboires, de ne pas le faire systématiquement et d'avoir de mauvaises surprises par la suite ... A bon entendeur !

Ainsi s'achève cette sous-partie sur les formats d'image. J'espère que, par la suite, vous choisirez judicieusement vos formats en fonction de la situation. ;)

En résumé ...

  • Il existe différents types de formats d'image se caractérisant par la qualité du rendu final et du poids total.

  • Pour les photos, il vaut mieux utiliser le format JPEG. Cependant celui-ci ne gère pas la transparence.

  • Pour les images comportant de la transparence (progressive ou non), ainsi que pour les images destinées au web (web design...) il vaut mieux utiliser le PNG.

  • Pour les animations et les images comportant peu de couleurs, le format GIF est de rigueur.

Un mot sur la résolution

La résolution d'image, voici une notion fort intéressante. :)
Dans le domaine informatique et des images numériques, la résolution sert à mesurer la finesse, la qualité d'une image. Plus la résolution est haute, plus la qualité est meilleure.

Pour faire simple, "mesurer" la résolution revient à "mesurer" la taille d'un pixel (un pixel n'a pas de taille définie), ou plus précisément, le nombre de pixels se trouvant dans une unité de mesure. Par exemple, le nombre de pixels dans un centimètre, un millimètre, un pouce, etc.
Vous l'aurez compris, plus cette quantité est grande, plus il y a de pixels et plus notre image sera de qualité, sera détaillée.

Regardez ces images illustrant cette notion de résolution:

Image utilisateur
Image utilisateur
Image utilisateur

Plus on va vers la droite et plus la résolution baisse. La perte de qualité est notable.

Comment mesure-t-on la résolution ?

Je vous avais dit que "mesurer" la résolution revenait à déterminer la densité de pixels dans une image. Plus il y a de pixels, plus haute est la résolution.
Pour cela, il existe des unités de mesure toute prêtes. La résolution s'exprime en PPI (pixels per inch) ou en français en PPP (pixels par pouce).

Par exemple, lorsque l'on a une image avec un résolution de 300 ppp, on sait qu'il y a 300 pixels contenues dans un pouce, ou par pouce.

Je n'ai pas très bien compris pourquoi utiliser d'autres unités de mesure quand on a déjà le pixel ...

Votre question est intéressante. On souhaite mesurer la taille d'un pixel. Comment peut-on mesurer la taille d'un pixel à l'aide d'autres pixels si on ne connait même pas la taille de ces pixels et que c'est ce que l'on cherche ? o_O C'est tout simplement impossible ! On ne peut pas mesurer quelque chose en l'utilisant comme son propre outil de mesure. Il nous faut une autre unité, c'est là que les PPI et les DPI entrent en jeu. Grâce à ces nouvelles unités de mesure communes à tout le monde, il nous est désormais possible de mesurer précisément la taille d'un pixel.

Je suis certaine que vous devez vous demander quelle résolution il vaut mieux adopter, non ?
Ce qu'il faut savoir, c'est que plus la résolution est élevée, plus le poids final de votre image sera important. Mais dans la pratique, il ne varie que de quelques Ko (à part pour les images très haute résolution comme le HD), donc il ne faut pas trop s'en préoccuper. Baisser la résolution d'une image parce qu'elle fera 5 Ko de moins à l'arrivée n'est pas très intéressant au final !

En pratique, pour les images numériques, on se tournera vers une résolution de 72 ppi. Il y aura 72 pixels par pouce. C'est un bon compromis. ;)

Pour l'impression, on préfère adopter une résolution 300 dpi pour une meilleure qualité d'impression. On s'est rendu compte qu'avec une résolution moindre, on pouvait apercevoir les pixels sur le papier. Avec une résolution de 300 dpi, les pixels ne sont plus visibles à l'œil nu.

Image utilisateur

A gauche, il s'agit de la résolution standard pour l'affichage à l'écran tandis qu'à droite, il s'agit de la résolution standard pour l'impression. Je n'ai pas mesuré ces schémas, je ne sais pas si les mesures sont tout à fait justes. :-°

Je pense que vous avez maintenant mieux compris de quoi l'on parle lorsque l'on dit "La résolution est de 72 ppi". On ne va pas s'étendre plus sur le sujet, l'essentiel est là. ;)

En résumé ...

  • La résolution sert à déterminer le nombre de pixels dans un centimètre.

  • Plus la résolution est élevée, meilleure sera la qualité finale de l'image.

  • La résolution à l'écran s'exprime en PPI (ou PPP, pixels par pouce).

  • La résolution lors de l'impression s'exprime en DPI (ou PPP, points par pouce).

Maintenant que vous êtes plus familiers avec toutes ces notions relatives à l'imagerie numérique et qui ne concernent pas que GIMP, nous allons pouvoir rentrer pleinement dans le vif du sujet de cette deuxième partie du tutoriel.

Dans le chapitre suivant, nous allons aborder des notions complètement nouvelles, qui vont certainement vous plaire. :)

Exemple de certificat de réussite
Exemple de certificat de réussite