Aller au menu - Aller au contenu

Icône L'imagerie numérique pour les zéros

Par Avatar The maaaaan
Mise à jour : 28/10/2010
Difficulté : Facile Facile Creative Commons BY-NC-SA
549 visites depuis 7 jours, dont 106 sur ce chapitre classé 205/786
On va commencer par aborder les pré-requis pour s'assurer qu'on démarre tous au même niveau. Ca serait dommage que je parle de trucs auxquels vous ne comprenez rien. :D

Au programme : ce qu'est une image, comment fonctionnent les couleurs et quelles sont les types de fichiers les plus utilisés pour enregistrer les images.

Je suis parfois allé plus loin que le strict nécessaire, juste à titre informatif. Ca peut faire beaucoup d'informations à assimiler en une fois, mais il n'est pas nécessaire de tout retenir : vous pouvez vous contenter des synthèses à la fin de chaque sous-partie.

Bonne lecture. :)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Sommaire Chapitre suivant
Retour en haut

Une image, c'est quoi ?

Une image, c'est quelque chose que vous voyez à travers votre écran. Mais votre écran, c'est quoi au juste ?

Vous le savez sûrement, l'écran de votre ordinateur est composé de tout petit carrés, que l'on appelle les pixels (le nom vient d'une combinaison déformée de Picture Element). Chacun de ces pixels ne peut envoyer de la lumière que d'une seule couleur à la fois, ce qui veut dire que la précision de votre écran est limitée. En d'autres mots, si vous vous amusez à regarder de plus près (ne le faites pas hein ! C'est mauvais pour vos yeux !), vous remarquerez que tout ce que votre écran affiche est formé de petits carrés de couleur unique.

Image utilisateur
Comment est affiché le smiley ;)


Cela dit, c'est pas comme si c'était vraiment contraignant : on remarque à peine la supercherie pour peu qu'on ne colle pas son nez à l'écran. :p

Et les images dans tout ça ?



Eh bien une image, ça ne fait que définir quel pixel affiche quoi dans l'espace qu'elle occupe ! Cet espace est déterminé par ce qu'on appelle les dimensions de l'image.

On peut aussi parler de la taille d'une image, mais il peut y avoir une ambiguïté car la taille réfère parfois aussi au "poids" de l'image, qui est l'espace qu'elle occupe sur le disque dur.


Les dimensions sont conventionnellement données par l'écriture du produit longueur x largeur. Petit exemple :

Image utilisateur


La résolution


J'ai noté les dimensions en pixels, mais il est également possible de l'indiquer dans d'autres unités dans Photoshop, tels les centimètres ou les pouces.

Image utilisateur
Seulement voilà : combien de pixels y a-t-il dans un centimètre ? 10 ? 20 ? 1000 ? En fait, il faut le déterminer à l'aide de la résolution : celle-ci indique combien de pixels rentrent dans un centimètre ou dans un pouce. Par exemple, une résolution de 100 pixels/cm indique que 100 pixels rentrent dans un centimètre.


La convention veut qu'on utilise le pouce plutôt que le centimètre pour exprimer la résolution d'une image numérique. Celle-ci s'exprime donc habituellement en pixel-par-pouce (ppp) plutôt qu'en pixel-par-cm (ppc). A ne pas confondre avec les dpi qui concernent la résolution d'une imprimante !


D'accord, mais pourquoi on s'encombre avec des centimètres ou des pouces alors qu'on a déjà le pixel comme unité de longueur ?


Bonne question ! En fait, le concept de résolution n'a d'importance que dans le cadre de l'impression : quand on veut imprimer une image, il est bien plus intuitif de travailler avec des centimètres qu'avec des pixels car on peut contrôler la surface de papier sur laquelle on va imprimer !
Par contre, si l'image est destinée à rester sur écran, il est clair qu'on ne va pas s'embêter avec des centimètres, les pixels conviennent très bien (ça serait d'ailleurs stupide de faire autrement, votre écran ne connaît de toute façon que ça) !

Comme on ne va travailler que sur écran dans un premier temps, on ne va pas se préoccuper de la résolution. Il fallait juste que vous sachiez de quoi il s'agit.


De l'image à l'écran


Pour qu'une image soit affichée, il suffit qu'elle envoie la couleur de chacun de ses pixels à l'écran. On peut faire ça de deux manières : soit on le dit cash (on a dans ce cas affaire à des images matricielles), soit on utilise des images vectorielles.


Les images matricielles


Il s'agit de la manière la plus intuitive d'afficher quelque chose à l'écran.
Les images matricielles contiennent une grille d'information. Chaque élément de la grille représente un pixel et contient la couleur qu'il doit afficher. C'est assez simple à comprendre, je pense. :-°

Cette méthode comporte toutefois un inconvénient. Prenons cette image matricielle, par exemple : Image utilisateur et agrandissons-la à 600% de sa taille.

Image utilisateur


Pas beau à voir hein ? Les bords qui étaient ronds ne le sont plus vraiment : on voit que c'est formé de carrés. C'est parce que la précision de l'image est réduite à l'échelle du pixel ! En zoomant, vous agrandissez une grille de couleurs et vous finissez par voir chaque élément de la grille. Donc forcément, la qualité se détériore avec l'agrandissement. >_<


Les images vectorielles


Une image vectorielle est un peu plus compliquée. Elle est créée uniquement à partir de formes, et ces formes sont définies par très peu d'informations :

  • Des points de passage
  • La manière de relier ces points (des droites ou des courbes)
  • La couleur contenue dans la forme


Voici donc comment on aurait pu créer l'image précédente de manière vectorielle :

Image utilisateur
Une forme vectorielle est définie par des points et la manière de relier ces points (droites ou courbes)
La couleur de la forme est également incluse dans l'image.


Il n'empêche que votre écran fonctionne toujours avec des pixels ! Sur la base de ces informations, l'ordinateur génère donc lui-même une grille de pixels avant de l'envoyer à l'écran.

Mais alors ça revient à générer une grille de pixels encore une fois ! Pourquoi on s'est cassé le poum à créer deux manières d'afficher une image si c'est pour faire la même chose ?


Très bonne question ! La réponse est simple. Voici ce que donnerait un zoom de 6 fois sur l'image vectorielle :

Image utilisateur Image utilisateur
A gauche, les composantes de l'image vectorielle adaptée à l'échelle. A droite, le résultat.


Autre chose, hein ? Les contours sont toujours nets et bien courbes ! Ceci est dû au fait que les images vectorielles ne sont pas définies au pixel près, ce sont des formes géométriques ! Votre ordinateur recalcule donc l'image à chaque zoom avant d'envoyer la grille de pixels correspondante à l'écran, ce qui fait qu'elle est nette en toute circonstance ! Puissant, non ?

Mais si c'est si puissant que ça, pourquoi on n'utilise pas toujours des images vectorielles, alors ?

Parce qu'elles sont limitées dans ce qu'elles peuvent afficher ! Les images matricielles ont l'avantage de pouvoir représenter tout et n'importe quoi, les images vectorielles ne peuvent afficher que des images construites à l'aide de formes et ne sont donc utilisées que dans des cas bien particuliers.

A l'heure où j'écris ces lignes, les images vectorielles nécessitent encore un support comme le format flash pour être affichées à travers un navigateur.


Au fait, saviez-vous que le texte que vous êtes en train de lire est purement vectoriel ? Oui, oui : les lettres sont bien des images vectorielles (utilisez la fonction zoom de votre navigateur si vous ne me croyez pas !). D'ailleurs vous l'avez surement déjà remarqué dans un traitement de texte : les lettres gardent une qualité impeccable quelque soit la taille de la police utilisée.

Une petite synthèse de tout ça pour finir en beauté !

Ce qu'il faut retenir de tout ça


  • Votre écran est composé de tout petit carrés appelés pixels.
  • Les dimensions d'une image s'écrivent avec la notation longueur x largeur (en pixels).
  • La résolution indique combien de pixels rentrent dans un centimètre (ou dans un pouce).

  • Les images matricielles sont des images définies au pixel près.
  • Elles sont utilisées partout mais ne peuvent être agrandies sans perte de précision.
  • Les images vectorielles sont des images définies avec des formes.
  • Elles contiennent des dessins plus simples, mais gardent une qualité impeccable quel que soit leur dimension.


Photoshop est avant tout un logiciel d'édition d'images matricielles.
Il ne lui est pas possible d'exporter des images au format vectoriel.


Cela dit, on peut tout-à-fait créer des formes vectorielles dans Photoshop lui-même. Seulement, ça se fait de manière encapsulée : elles seront pixelisées lors de l'enregistrement de l'image finale.
Retour en haut

Les couleurs et leur codage

Dans le monde du visuel, on a pour convention de définir un ensemble de couleurs par une combinaison de couleurs primaires. Autrement dit, une fois qu'on a ces quelques couleurs primaires, on peut représenter toutes celles de l'ensemble, ce qui est plutôt pratique.

Ça va peut-être vous surprendre, mais il existe plusieurs manières de définir une couleur ! Il y a différentes représentations et chacune possède ses propres couleurs primaires. Ces représentations sont appelées les modes colorimétriques et nous en verrons deux (on parle parfois aussi d'espace chromatique).


Le mode RVB



RVB comme Rouge-Vert-Bleu. Le mode RVB attribue à chaque pixel de votre image une intensité de chacune de ces trois couleurs, allant de 0 à 255.

Donc, quand vous avez une couleur du mode RVB, elle sera caractérisée par trois valeurs : une valeur allant de 0 à 255 pour le rouge, une autre allant de 0 à 255 pour le vert et une dernière allant de 0 à 255 pour le bleu. Quelques exemples :

Image utilisateur
Le mélange de deux couleurs primaires entre elles donne les couleurs secondaires : magenta, cyan et jaune.
Le gris est une combinaison égale des trois couleurs primaires. Par exemple, R = V = B = 100 donne du gris foncé.


Sachant qu'on dispose de trois couches de couleur (Rouge, Vert, et Bleu) et qu'on peut attribuer une des 256 valeurs de chaque couche à un pixel, nous avons 2563 possibilités différentes, ce qui nous fait tout de même plus de 16,5 millions de couleurs représentables dans le mode RVB ! Avouez que c'est pas mal.


Bien évidemment, quand vous travaillerez dans Photoshop, vous n'allez pas vous mettre à définir une couleur au bit près sinon on n'est pas sorti de l'auberge ! Vous sélectionnerez la couleur graphiquement comme dans tous les logiciels de dessin et basta. Cela dit, tout ce que je vous raconte là est bien instauré dans le logiciel.


Un mode naturel !


Au fait, vous savez d'où ça sort le RVB ? :)
Eh oui, le mode RVB n'est pas sorti de nulle part. Il sort directement... de votre oeil !! L'oeil humain peut percevoir la couleur à travers trois cônes : un cône sensible à la lumière rouge, un autre à la lumière verte et le dernier à la lumière bleue. Le mode RVB est donc, ni plus ni moins, le mode colorimétrique que suit la lumière !

Ca veut dire que si vous braquez un spot de lumière rouge et un spot de lumière verte au même endroit vous aurez du jaune, etc...


Mais alors ce que mon écran affiche... c'est codé en mode RVB ?


Tout à fait, puisque votre écran envoie de la lumière ! Et il n'y a pas que lui... si vous prenez une photo avec un appareil numérique, si vous scannez une image,... il s'agit de la capture de lumière et tout ça, c'est enregistré en mode RVB ! Bref, tout ça pour dire que ceux qui ont défini ce modèle de couleur ne sont pas des êtres entièrement farfelus qui ont tiré ça de leur chapeau. ^^

Oui, mais tu as dit qu'il existe plusieurs modes et donc, d'autres modes que le RVB. Ca donne quoi à l'écran alors, puisqu'il ne peut afficher que du RVB ?


Bien vu ! Au fait, si vous développez votre image dans un autre mode colorimétrique que le RVB, votre ordinateur va devoir convertir lui-même cet autre mode en RVB avant d'envoyer le résultat à l'écran.


N'allez pas croire que développer une image dans un autre mode que le RVB est mauvais ou que l'affichage modifie votre création : la conversion se fait uniquement au niveau de votre écran et votre création reste intacte !


Le saviez-vous ?


Image utilisateur
Matrice de bayer
Il y a deux fois plus de capteurs verts
que de capteurs rouges ou bleus.
La gamme des couleurs que l'œil humain peut discerner contient davantage de vert que de bleu ou de rouge. Pourquoi ? C'est comme ça. L'œil est plus sensible au vert, la nature est ainsi faite (c'est pas pour ça que c'est ma couleur préférée, perso... :-° ) ! Au point même que lorsqu'on construit les capteurs des appareils photos numériques, on prévoit deux fois plus de place pour stocker les informations liées au vert que celles liées au bleu ou au rouge.

Autre fait anecdotique sur l'œil humain : dans les hôpitaux, en chirurgie, les médecins qui opèrent sont confrontés à voir du rouge sans arrêt, rien qu'à cause du sang du patient. Le problème est qu'à force, l'œil sature dans le rouge et n'est plus capable de discerner les nuances de cette couleur... Pas très pratique pour s'y retrouver lors d'une opération d'urgence ! C'est pour ça que tout le personnel est habillé en vert ou en bleu : cela permet de soulager les yeux en cours d'opération pour ne pas saturer. :)

Hum, je commence à vraiment m'égarer là... Allez, passons à la suite ! :pirate:


Le mode CMJ



Derrière ce mot bizarroïde se cachent Cyan, Magenta et Jaune.

Hééé ! Mais Cyan, Magenta et Jaune, ce sont les trois couleurs secondaires du RVB !


Absolument ! Et attendez, vous n'êtes pas au bout de vos surprises, ceux qui ont établi les modes colorimétriques ont bien fait leur boulot. :)

Le mode CMJ attribue à chaque pixel un pourcentage de chacune de ces couleurs. Ce n'est donc plus comme le RVB où on utilisait une valeur allant de 0 à 255 : ici, il s'agit d'un nombre entre 0 et 100. Pour obtenir du jaune pur par exemple, on a 0% de Cyan et de Magenta et 100% de Jaune (trivial :p ).

Quelques exemples de mélanges possible avec ce noble mode :

Image utilisateur


Hééé ! Les couleurs secondaires du CMJ sont les couleurs primaires du RVB !


Oui, ces deux modes sont assez complémentaires, figurez-vous. Ce qui est primaire chez l'un est secondaire chez l'autre. Moi je dis : la nature est bien faite. :soleil:

Mais à quoi cela peut bien servir de développer dans un autre mode que le RVB ? Tout simplement parce que ce mode-ci existe également dans la nature ! C'est le mode qui régit la pigmentation des objets.


Si vous vous amusez avec de la peinture, le mélange du jaune et du cyan donne du vert (mode CMJ) tandis que le mélange du vert et du rouge ne donne pas du jaune (selon le RVB). La pigmentation fonctionne donc bien différemment de la lumière.



Le cas de l'impression


Image utilisateur
Sachant tout ce qu'on vient de voir, si vous désirez établir une création destinée à l'impression, vous feriez mieux de le faire dans le mode CMJ, car c'est ce mode-là que vont suivre les couleurs contenues dans les imprimantes. :-°

OUI MAIS IL Y A UN MAIS !

Le CMJ, c'était de la théorie... Dans la pratique, c'est une autre paire de manche ! On a constaté que le mélange des trois couleurs primaires du CMJ ne donnait pas exactement du noir quand on imprime, mais du gris foncé à tendance faiblement bleuâtre. C'est, entre autres, dû au fait que les encres utilisées dans les imprimantes ne contiennent pas les couleurs primaires pures à 100%. On a alors rajouté la couleur noire à l'arsenal : applaudissez bien fort le mode CMJN !

A noter que le mode CMJN est nommé quadrichromie dans le jargon de l'imprimerie.

Quand il s'agit d'impression, on ne considère plus que ce mode-là. Le mode CMJ est à jeter aux oubliettes. Photoshop, qui est un logiciel d'édition d'images numériques, l'a bien compris et propose le mode CMJN à la place.

Tu as dit plus haut que les appareils photos numériques enregistraient les photos dans le mode RVB. Que doit-on faire si on veut les imprimer ?

EX-CELL-ENTE question !
Vous avez déjà sûrement fait le test sans rien connaître des modes colorimétriques : il est tout-à-fait possible d'imprimer une photo sans avoir à la convertir dans le mode CMJN. La raison à cela est que la conversion est automatique. Si vous imprimez une image dans le mode RVB, votre ordinateur va donc convertir le mode avant de l'envoyer à l'imprimante.

Eh ben alors, pourquoi s'embêter avec les modes ? On n'a qu'à tout le temps développer nos images en RVB puisque l'ordinateur peut très bien faire la conversion à notre place !


Hmmm oui, certes.
Seulement, c'est loin d'être une opération sans pertes ! La conversion RVB -> CMJN engendre une conversion colorimétrique car l'étendue des couleurs représentables en RVB n'est pas pareille que celle du CMJN. Enfin bref, on ne va pas rentrer dans les détails (d'ailleurs, je suis déjà allé bien assez loin pour une partie introductive :-° ). Je vous disais ça juste pour que vous sachiez un peu à quoi vous avez affaire. Si vous voulez en savoir plus, un chapitre spécialisé sur l'impression verra le jour dès le moment où vous aurez assez de connaissances Photoshopiennes pour le comprendre.


Des pixels sans couleur !



Je viens de vous faire un topo sur la manière dont on pouvait attribuer une couleur à un pixel. Mais vous devez savoir une chose : un pixel d'une image peut ne pas avoir de couleur ! Il se peut qu'il ne contienne... rien du tout ! On dira dans ce cas que le pixel est transparent. Quand une image contient des pixels transparents, ceux-ci prennent la couleur de l'arrière-plan sur lequel l'image est affichée.

Et comme la vie est bien faite, on a même droit à de la transparence partielle, qui est un pixel dont on a simplement diminué l'opacité de la couleur. On aura dans ce cas un mélange entre la couleur du pixel partiellement transparent et la couleur de l'arrière-plan sur lequel on affiche l'image.

Ca va, vous suivez toujours ? Allez, un p'tit schéma pour être certain que tout le monde ait bien compris (car j'en vois deux dans le fond qui me regardent avec des yeux grands comme ça o_O ).

Image utilisateur
1. Les pixels en-dehors du smiley sont transparents et prennent la couleur du fond sur lequel on les place.
2. On rend le smiley lui-même transparent à 50% : sa couleur se mélange avec le fond.


Bien évidemment, le mélange des couleurs est quelque chose de linéaire : plus un pixel à transparence partielle est opaque, plus sa couleur prédominera sur celle de son arrière-plan.


Ce qu'il faut retenir de tout ça


Ce qu'il faut retenir des modes colorimétriques tient en quelques lignes, en fait :
  • Le mode RVB attribue à chaque couleur une certaine quantité de Rouge, Vert et Bleu (allant de 0 à 255).
  • Le mode CMJN attribue à chaque pixel un certain pourcentage de Cyan, Magenta, Jaune et Noir.
  • Le mode RVB est optimisé pour les images destinées à rester derrière un écran.
  • Le mode CMJN est optimisé pour les images destinées à l'impression.
  • En plus d'avoir une couleur, les pixels d'une image peuvent être (totalement ou partiellement) transparents.


Allez, avouez, je suis certain que vous ne voyez plus les couleurs de votre machine à café de la même manière !

...

Si ? :euh:

En tout cas, si vous retenez la synthèse c'est parfait !
Il ne nous reste plus qu'à parler des extensions de fichiers et on aura fait le tour des pré-requis. :)
Retour en haut

Les formats d'image

Bon, c'est bien de créer des images mais après il faut bien les enregistrer quelque part ! Nous allons voir ici les formats d'image les plus populaires (on ne verra ici que les formats d'image matricielles car, comme je l'ai dit, Photoshop n'exporte pas d'images au format vectoriel :) ).

Comment ça se fait qu'il y a plusieurs formats ? Il suffit d'enregistrer une grille de couleurs, il n'y a pas 36 manières de faire !

Eh bien si, en fait. >_<
Si il fallait stocker cette fameuse grille telle quelle, ça prendrait pas mal de place sur le disque dur. En local ça peut encore aller mais sur le net, où la connexion est un facteur limitant, c'est plutôt inacceptable. En tout cas, moi j'aimerais pas devoir attendre 3 minutes pour l'affichage d'une image...

On a donc inventé un formidable concept : la compression. La compression permet de réduire le poids des images en fonction de leur contenu. Il y a deux types de compressions :

  • les compressions sans pertes peuvent compresser la taille de l'image de manière limitée mais ça se fait sans pertes d'informations.
  • les compressions avec pertes compressent l'image en réduisant la taille à mort, mais cela engendre une perte de données.


Quand je dis perte de données, ça veut dire qu'on n'est pas fichu de retrouver le fichier d'origine à partir du fichier compressé. Des informations ont été perdues lors de la compression et le retour en arrière est impossible. Quand l'ordinateur décompresse pour pouvoir vous montrer l'image, il vous enverra donc des couleurs de pixel approximatives qui sont proches des couleurs d'origine, mais pas exactement les mêmes ! Les compressions sans pertes sont quant à elles parfaitement réversibles.


Pourquoi utiliser la compression avec pertes si ça désintègre les pixels ? Parce que les pertes ne se voient pas tant que ça (pour peu que vous ne compressiez pas comme un bourrin :-° ) et c'est un excellent compromis qualité/poids pour exposer des images sur le web !

Bien évidemment, on n'est pas parvenu à trouver un format d'image qui pèse une plume et qui conserve entièrement la qualité. Et c'est là tout le truc : chaque type de fichier d'image a son propre algorithme de compression. Ajoutez à cela le fait qu'on veuille parfois aussi pouvoir enregistrer des animations et de la transparence et vous vous tapez toute une panoplie d'extensions de fichiers dans lesquels vous pouvez enregistrer votre image.

Image utilisateur
Il y en a beaucoup, hein ? :diable:


Ca peut faire peur, mais vous n'en utiliserez que 2-3 à tout casser la plupart du temps. Je vais donc seulement passer les formats principaux en revue, d'autant que la plupart ne sont utilisés que dans des cas bien spécifiques. D'ailleurs, pour ne rien vous cacher, je ne les connais pas tous moi-même. Vous avez déjà entendu parler du Dicom, vous ? Moi pas, et je viens d'aller voir sur Wikipedia ; il s'agit d'un format d'image utilisé exclusivement en médecine. Décidément, on en apprend tous les jours ! :)

Les formats utilisant la compression avec pertes



Le format JPEG (extension : *.jpg)


Bon, celui-là, j'espère que vous en avez déjà au moins entendu parler. :p

Il s'agit du format d'image le plus couramment utilisé, et pour cause : il possède le meilleur rapport qualité/poids pour les photos. Donc si vous devez envoyer une photo sur le Web, prenez le JPEG par défaut, c'est le meilleur choix.

Bien sûr, il n'y a pas de miracles : la raison pour laquelle les fichiers JPEG prennent si peu d'espace sur le disque est qu'ils utilisent un algorithme de compression des données assez puissant. Et qui dit compression avec pertes dit... pertes !

Fort heureusement, dans Photoshop, il est possible de définir un facteur de qualité (nombre entier entre 0 et 12) qui contrôle l'intensité de la dégradation. Si la qualité vaut 0, la compression est énorme (le fichier prend très peu de place), mais la conservation des données est vraiment médiocre. Si en revanche, vous demandez la qualité 12 (le nec-le-plus-ultra-oui-monsieur-le-président !), les effets de dégradation seront pratiquement nuls (ou très faibles).

Pour que vous vous rendiez un peu compte de la perte des informations, je vous montre ci-dessous le résultat de l'enregistrement du smiley :) à différentes qualités JPEG :


Image utilisateur
Zoom à 700%. On remarque qu'en qualité 12, l'image est impeccablement bien représentée.
Par contre, en qualité 0, c'est catastrophique au possible !


Conclusion : N'utilisez le JPEG que lorsque vous exportez une création aboutie, qui n'est plus destinée au changement. Parce que si vous comptez retravailler sur quelque chose qui a déjà été enregistré plusieurs fois en .jpg, vous appliquerez des algorithmes de compression les uns par-dessus les autres lors des nouveaux enregistrements et à force, ça risque de devenir vraiment moche !


La dégradation de la qualité est plus facilement perceptible sur les images contenant peu de couleurs, comme le smiley ci-dessus ou des graphiques. C'est pour ça que le format JPEG est principalement utilisé pour les photographies car la qualité se détériore beaucoup moins sur ce genre d'images.

Mais attention, hein ! Ca ne veut pas dire que vous ne devez jamais enregistrer en JPEG autre chose que des photos ! Je dis juste que pour ces images-là, il faudra sans doute exiger une qualité supérieure lors de l'enregistrement si on veut leur laisser un bon aspect.

Bref : Le JPEG, c'est très bien. Pour des besoins de qualité, vous choisirez une qualité supérieure à 10. Pour une simple capture d'écran, même la qualité 0 peut convenir. Tout est une question de nécessité.


Les formats sans compression ou utilisant la compression sans pertes



Avouez que c'est quand-même formidable : on est parvenu à écrire moins dans un fichier tout en gardant la même quantité d'informations sur l'image ! Les formats qui compressent sans pertes sont utilisés pour des besoins de qualité impeccable.


Le format Windows Bitmap (extension : *.bmp)


Il s'agit d'un format d'image développé par Microsoft, et c'est plutôt un franc gaillard, car il ne compresse pas d'un poil ! C'est que du brut. Qualité d'image assurée, mais ça pèse lourd : une image 1280x800 a un poids d'environ 3 Mo. Ca fait assez mal, n'utilisez jamais le format Bitmap sur le net. Je vous le montre pour que vous sachiez que ça existe, c'est tout.

Par contre, il s'agit d'un format assez universel et est reconnu sur à peu près toutes les plateformes. Il peut donc très bien être utilisé en interne.

Le format GIF (Graphics Interchange Format. Extension : *.gif)



Le format GIF a trois caractéristiques principales :
  • Il fonctionne par couleurs indexées, ce qui veut dire qu'il ne peut y avoir que 256 couleurs différentes maximum dans une image GIF.
  • Il supporte la transparence, mais totale seulement.
  • Il peut contenir des animations.

Le système des couleurs indexées fonctionne avec une palette embarquée dans le fichier. C'est cette palette qui indique quelles sont les 256 couleurs sélectionnées. Si on a plus de 256 couleurs avant d'enregistrer ? On ramène l'image à 256 couleurs en remplaçant les couleurs en trop par leur couleur la plus proche de la palette. Exemple sur un dégradé :

Image utilisateur Image utilisateur
A gauche l'image au format JPG, à droite l'image au format GIF.
L'enregistrement au format GIF a réduit le nombre de couleurs de l'image à 256.


256 couleurs au lieu de 16,5 millions ? A quoi ça peut bien servir d'avoir un format aussi pourri ?

Mais pour les deux autres raisons, voyons ! Le format GIF supporte également la fameuse transparence dont j'ai parlé, mais totale uniquement. Ca veut dire que si on a créé une image avec de la transparence partielle dans Photoshop et qu'on l'enregistre au format GIF, tous les pixels concernés deviendront 100% opaque lors de l'enregistrement.

Mais le principal atout du format GIF réside dans le fait qu'il peut enregistrer des animations ! Par exemple, ce smiley-ci :lol: est un GIF de pure souche !


La question de l'apprenti graphiste attentif :

Dans le mode RVB, il n'y a que 256 couleurs possibles pour les images en noir et blanc. On pourrait utiliser le format GIF pour enregistrer des photos en noir et blanc puisqu'on a assez de place pour stocker toutes ces couleurs ?

Hélas, non. :'(
En tout cas, ce n'est pas avantageux. Il est vrai que la qualité reste impec' pour des photos en noir et blanc, mais le JPEG est meilleur à propos du poids des images car son algorithme de compression est bien plus efficace que celui du GIF pour les photos). L'algorithme de compression du GIF sert plus pour les images simples, tels des graphiques ou des simleys.

Donc laissez ce triste sire qu'est le format GIF aux animations, il n'a pas beaucoup d'intérêt dans les autres cas.


Le format PNG (Portable Network Graphics. Extension : *.png)


Un tout bon format pour le web, sans doute le deuxième plus utilisé sur la toile. Pour l'anecdote, j'uploade toujours mes avatars ou mes icônes sur le SDZ au format PNG. Parce que si je le fait en JPEG, je ne sais pas pourquoi, mais il semble repasser par un processus d'enregistrement où le taux de compression est assez élevé (qualité clairement inférieure à 7, si vous voulez mon avis). Et ça se voit. En uploadant en PNG, la qualité n'est pas dégradable car elle est sans pertes et je conserve donc la même qualité que l'image qui est sur mon ordinateur. :)

En plus de compresser sans pertes, le PNG peut supporter n'importe quel type de transparence, totale ou partielle ! Vous pouvez donc jeter le GIF à la poubelle, il a trouvé plus fort que lui à ce niveau-là. Par contre, le PNG ne peut pas contenir d'animations.

Image utilisateur Image utilisateur Image utilisateur Image utilisateur
Quatre images jpg illustrant le concept de la transparence.
La fumée de l'allumette est transparente et laisse entrevoir le fond de l'image sur laquelle elle est placée.
Photo : © AMagill


Le format PNG est excellent pour représenter les images simples (smileys, graphiques,...), ce qui en fait le complément naturel du JPEG qui a un peu plus de mal à les compresser. Par contre, le PNG est à éviter pour les photos (que voulez-vous, on ne peut pas tout avoir !).

Cela dit, faut pas faire le puriste non plus, hein ! Pour l'image de l'allumette ci-dessus (qui est une photo), n'hésitez pas à utiliser le PNG pour conserver la transparence, tant pis si ça prend quelques kilo-octets en plus !

Ce qu'il faut retenir de tout ça



Tout ce qu'il faut retenir est dans le tableau :

Nom et extensionSupport transparenceSupport animationsCompressionUtilisation
JPEG (.jpg)
non
non
Avec pertes mais on peut sélectionner l'intensité de la dégradation.
Premier choix pour le web. Idéal pour les photos
PNG (.png)
oui
non
Sans pertes.
Très bon compromis pour le web. Support de la transparence parfait. A utiliser pour les images avec transparences et/ou ne contenant pas trop de couleurs.
GIF (.gif)
oui, mais totale seulement
oui
Sans pertes mais couleurs indexées (réduction à 256 couleurs au lieu de 16,5 millions).
N°3 sur la toile. Utilisé pour les images disposant de peu de couleurs et les animations.
Retour en haut

Q.C.M.

Quelle est l'image qui a les plus grandes dimensions ?
A quelle couleur correspond le code RVB suivant : R = 255, V = 255, B = 0 ?
J'ai une photo que je souhaite envoyer par e-mail. Il est préférable de l'envoyer dans quel format ?

Statistiques de réponses au QCM

Retour en haut
Ca y est, vous savez tout ce qu'il y a à savoir pour commencer ce tutoriel ! On va enfin pouvoir parler Photoshop : rendez-vous dans la partie suivante.
Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
Les images
Icône
Le dessin numérique : un jeu d'enfant !
Icône
Opérations et notions de base
Icône
Qu'est-ce qu'une image ?
Retour en haut
2 commentaires pour "L'imagerie numérique pour les zéros"
Note moyenne : 3.69 / 4 (62 votes)
Pseudo Commentaire
Hors ligne Ishimaru Chiaki # Posté le 25/11/2010 à 04:16:26
Kernel panic !
Avatar
Flux RSS
close

Ville : Baie-comeau
Pays : Canada

 Salut !

Ce chapitre ne pouvait pas mieux expliquer les concepts de base d'une image, et j'aimerais bien m'y baser dessus pour le premier chapitre que je prévois faire dans la v2 de mon cours sur Gimp, une fois que mon co-rédacteur aura donné son accord pour le changement de licence pour CC-BY-NC-SA.
Bien sûr, je citerai ton nom et le lien de ton chapitre.
Y a-t-il du monde qui utilise IPv6 localement ou en ligne dans la salle ? Si oui, nous avons désespérément besoin de testeurs pour la RC de Connectix Boards 0.8.5 !
 
Hors ligne The maaaaan # Posté le 25/11/2010 à 08:11:18
Avatar

Études : EPL UCL

 Pas de soucis, je trouve qu'effectivement certaines explications sur le sujet manquaient à votre tuto ;)
Image utilisateur

--> victor président !!
--> Maîtrisez la 2D avec Photoshop
--> Cryptage Vernam et exemple d'application (en PHP)
 

Voir tous les commentaires