Images, format, résolution, poids de fichier, comment ça marche ?

Nous manipulons des images tous les jours sur nos smartphones, les réseaux sociaux, par mail, pour le pro comme pour le perso. Mais peu de personnes connaissent finalement les tenants et aboutissants des formats de fichier, de ce qu’est une résolution, de la différence entre l’impression et l’écran ou de ce que veut dire la compression.

Bienvenue dans un rapide cours sur l’image ! Asseyez-vous confortablement et n’ayez crainte, cet article s’adresse plus aux débutants ou néophytes éclairés qu’aux spécialistes.

Qu’est-ce qu’une image ?

Incontournable question de base, il faut définir ce que nous entendons par une image. Dans le cadre de cet article, nous parlerons principalement de fichiers image, d’éléments informatiques. Cependant, nous ferons un rapide détour par l’impression à un moment donné.

Une image est donc une série de lignes de code qui vont définir ce qu’un écran va afficher lorsque vous allez le lire. Il existe deux manières principales très distinctes de coder une image : comme une carte de pixel (bitmap, traduction littérale en anglais) ou comme une série de fonctions vectorielles (oui, ces mêmes fonctions mathématiques qui vous ont peut-être donné du fil à retordre au lycée).

La plus connue : le bitmap, ou image matricielle

Pour faire simple : c’est comme un tapis, ou de la broderie

C’est sous ce modèle que vous prenez vos photos par exemple. C’est un quadrillage de pixel qui auront chacun une valeur précise correspondant à une couleur. L’ensemble de pixels vu « de loin » donnera naissance à une image. L’exemple le plus simple pour se représenter cela est d’imaginer un échiquier en noir et blanc. En code binaire, le 0 indique que l’on n’applique pas de noir, le 1 indique que l’on applique le noir. Si une case est un seul pixel, vous aurez donc 0 1 0 1 0 1 etc.

L’affaire se corse évidemment lorsque l’on passe en couleur puisque chaque pixel va contenir un code plus complexe pour correspondre à l’espace colorimétrique choisi. Une image est une suite de caractères interprétée par les logiciels pour « montrer » une image.

Je ne rentre volontairement pas dans le détail des types d’encodages et des métadonnées afin de ne pas perdre 85 % de mes cher(e)s lectrices et lecteurs.

La quantité de pixels permet de déterminer la définition d’une image et leur concentration est ce que l’on appelle la résolution, nous allons aborder ces notions plus bas. La quantité d’information de code contenu dans chaque image va induire son poids que nous verrons, vous l’avez deviné, plus loin dans cet article.

La moins connue, mais pourtant omniprésente : l’image vectorielle

Saviez-vous que depuis le début de cet article vous aviez vu plus de 2000 images vectorielles ? Dans l’écrasante majorité des cas, chaque caractère de texte sur un document informatique est en soi une image vectorielle. Qu’il soit en « taille de police » 12 ou 37895, le caractère sera toujours aussi net. C’est la force du vectoriel.

Dans ce type d’image, il n’y a pas de carte comme dans le bitmap, mais une série de segments, courbes de Bézier ou formes auxquelles on a donné des coordonnées. Pas de pixel : des instructions pour afficher le résultat qui sera le même indépendamment de la taille de votre écran ou du zoom que vous pourriez effectuer.

Même les aplats de couleurs sont définis comme des fonctions mathématiques : de tel point à tel point, on décrète que l’on souhaite un dégradé qui va commencer à telle valeur de couleur, prendre telle direction et s’arrêter à tel point, à telle valeur de couleur. Que l’image soit imprimée sur 3 centimètres de large ou 3 mètres, le résultat sera le même et la taille du code identique.

Image vectorielle : zoomez à fond (ctrl et molette de souris vers le haut), les courbes seront toujours aussi nettes

Cela donne des fichiers bien plus légers que le bitmap, exploitables à toutes les dimensions.

C’est donc un outil extraordinaire pour beaucoup d’applications : les logos par exemple. La plupart du temps les logos sont des formes bien définies et épurées. Mais ils doivent pouvoir servir sur une carte de visite, sur une bâche, sur un stand, à différentes tailles en somme, mais doit toujours rester aussi net. Grâce au vectoriel, un seul fichier (léger d’ailleurs) suffit pour tous les besoins.

Pourquoi ne pas faire que des images vectorielles alors, me direz-vous ? Tout simplement parce que cette méthode ne permet pas autant de liberté que le bitmap pour représenter une multitude de détails ou variations. Vous n’aurez jamais le rendu et le détail d’une photo avec un fichier vectoriel à moins d’un fichier d’une complexité incroyable.

Cela n’empêche pas beaucoup d’artistes de faire des illustrations époustouflantes en vectoriel : il vous suffit de rechercher « vector art » sur votre moteur de recherche d’image favori pour vous faire une idée.

Le mode colorimétrique : RVB, CMJN ? C’est quoi tout ça ?

Je vais passer rapidement sur ce détail un peu plus « pointu », mais néanmoins important. Cela vous expliquera peut-être pourquoi vos photos ne rendent pas du tout ce que vous avez vu et que ce que vous imprimez ne ressemble pas à ce qu’il y a à l’écran.

Une image, c’est quelque chose que l’on voit (merci Sherlock), si on peut la voir c’est que des informations lumineuses parviennent à notre œil et que notre cerveau les interprète. Une image perçue, c’est de la lumière. (Si vous vous demandez « est-ce qu’une image existe si personne ne la voit ? » je vous enverrai vers un ami philosophe.)

On peut ressortir nos cours d’optique du collège sur ce que l’on appelle la synthèse additive et la synthèse soustractive à ce stade, ou simplifier :

Lorsque l’on regarde quelque chose dans le monde qui nous entoure, nous captons la lumière réfléchie par les surfaces des objets, qui ne renvoie qu’une partie de la lumière qu’elle reçoit, que nous interprétons comme une couleur.

Lorsque nous regardons un écran, nous captons la lumière directement émise par ce dernier.

C’est là toute la différence : la lumière réfléchie (de la « vraie vie » pour vulgariser) et la lumière émise par les écrans. Vous vous doutez que si ce sont deux manières différentes d’envoyer de la lumière à notre œil, elles ne peuvent pas s’exprimer en code de la même manière.

C’est précisément ce qui a été mis au point lors de l’invention des premiers écrans : une manière informatique de calculer les couleurs émises. L’une des plus connues est le RVB pour Rouge Vert et Bleu, trois couleurs primaires dont le mélange permet d’obtenir plusieurs millions de nuances.

Mais lorsque l’on imprime quelque chose, la lumière sur le document ne sera plus émise, mais bien réfléchie. C’est donc une autre manière de coder la couleur qui devra être utilisée. Le plus souvent dans ce que vous trouverez dans les magazines, livres ou affiches : le CMJN (Cyan Magenta Jaune Noir).

Il y aurait ÉNORMÉMENT de choses à dire sur la couleur, ses paramètres, les autres types de codage de la couleur, leur intérêt, le gamut, le spectre chromatique et d’autres mots qui font peur. Si cela vous intéresse, indiquez-le en commentaire et je m’emploierai à faire un article dédié sur le sujet de la couleur, plus précis.

Bon, et la résolution d’une image du coup, c’est sa définition ?

En informatique, la taille compte.

Alors en fait non. Par abus de langage, beaucoup de gens confondent résolution et définition, mais c’est après tout bien normal. On parle de « HD » pour Haute Définition et on peut très justement penser que l’image sera plus nette.

Sauf que la définition indique la quantité d’informations contenue dans une image (ou une vidéo d’ailleurs). Pas sa concentration. 45 personnes dans votre appartement, c’est beaucoup, ces même 45 pour seul public d’un meeting de Trump, c’est très peu (et tant mieux).

Il faut se servir de la définition pour trouver la résolution. Une définition c’est un nombre total de pixel. Il faut établir la largeur et la hauteur de votre image et de là en déduire quel est le nombre de pixels « au mètre carré ». En vérité, le plus souvent, c’est en pouce (« inch » unité de mesure impériale, environ 2.54 cm) que l’on compte.

La résolution n’a finalement de sens que lorsque l’on souhaite donner une taille (d’impression) à une image, lui donner une dimension en largeur par hauteur fixe et définitive en cm ou en pouce.

On exprime alors la résolution en « point par pouce » ppp ou, le plus souvent, dans son abréviation anglophone : dpi (dot per inch => point par pouce). C’est un héritage de l’impression où les images sont réalisées avec des « points de trame » un peu sur le même principe que les pixels. On parle souvent de ppp ou ppi (pixel par pouce ou per inch) pour les besoins du web, la notion de point d’impression n’ayant pas de sens pour un écran. Quoiqu’il en soit cela revient à dire qu’au format de l’image, sur une ligne(ou colonne) d’un pouce, il y a X pixels.

Les résolutions d’images nécessaires varient selon les besoins. Lorsque j’ai pu commencer à me servir d’internet, il était de coutume d’y mettre des images qui, une fois à la taille voulue sur un écran, soient de 72 dpi. L’idée était bien sûr d’utiliser la résolution optimale pour allier « qualité visuelle » et taille de fichier : les bandes passantes n’étaient pas les mêmes qu’aujourd’hui, c’était également lié aux qualités d’écran : le premier écran Macintosh permettait un affichage d’une résolution de… 72dpi. En vérité, la résolution n’a aucune importance pour le web.

Image d’un étudiant en infographie qui se rend compte que ses profs lui ont menti en lui disant qu’il fallait du 72 dpi sur le web et qu’il a retaillé 1875 photos pour rien.

Hein ? il ne faut réduire la résolution d’une image pour le web afin qu’elle pèse moins lourd ? Pas vraiment : il faut réduire sa définition, soit le nombre total de pixel contenu dans l’image. Sur le logiciel photoshop par exemple, si vous ne cochez pas l’option « rééchantillonage » et que vous modifiez la résolution, le nombre total de pixel ne changera pas, donc le poids non plus. Seules changeront les dimension en cm, par exemple pour l’impression.

Que votre image soit en 72 dpi ou en 800, si le nombre total de pixel (la définition) ne change pas, le poids non plus. Réduire la résolution sans toucher à la définition n’affectera que la taille « d’impression ». Sur un écran vous ne verrez pas la différence.
Si une image fait 2000 pixels de large, que vous ayez une résolution de 1 point par pouce ou 1000, ça n’aura aucun impact visuel à l’écran.
Collègues qui ne me croient pas : ouvrez photoshop et faites le test, changement de résolution sans rééchantillonnage, vous verrez 🙂

Définition : largeur x hauteur en pixel
Résolution : rapport de la concentration de pixel et de la dimension en cm (ou pouces)

Il est par contre important de réduire le poids d’une image, tout simplement pour que votre page web chargera plus vite (ce que google aiment bien). Cela fera également des économies de données pour vos utilisateurs qui naviguent en 4G et rendront votre site plus agréable en navigation.
Il faut donc réduire la définition de vos images.

Mais du coup tous ceux qui parlent de diminuer la résolution pour le web sont des tocards ? Non, la plupart d’entre eux, en réduisant la résolution, « rééchantillonnent » l’image et réduisent donc en même temps sa définition. Par contre beaucoup de professionnels pensent encore que la résolution est importante sur le web, tout simplement parce qu’on leur a appris que c’était le cas. (c’est votre cas ? Dites-le en commentaire)

Pour ce qui est de l’impression (professionnelle, pas votre imprimante de bureau), les définitions conseillées sont de 300 dpi pour une image couleur, 600 pour les image en niveaux de gris et 1200 voire 2400 dpi pour de l’impression d’image au trait — exclusivement constituée de couleurs pures, sans nuances, par exemple pour les gravures ou les mangas — . Ici la résolution a une importance capitale : l’image a une taille physique qui ne changera plus jamais.

D’accord, mais le jpg, le gif, le png, il faut utiliser quoi ?

Tout dépend de vos usages, encore une fois. Pour ne pas rentrer trop dans les détails : l’intérêt majeur du gif et du png par rapport à un jpg est qu’ils peuvent être transparents, c’est-à-dire que certains pixels n’auront aucune information de couleur. Un jpg aura forcément une forme rectangulaire.

Le png est souvent préféré au gif pour son ratio compression/qualité et la richesse des couleurs pour le format png-24. L’intérêt du gif est de pouvoir contenir une suite d’images pour donner l’illusion d’une vidéo sans le son : le fameux « gif animé ».

Et si vous vous posez la question, moi je prononce « jif ». Oui, je sais, je prends position, je suis clivant comme ça.

Le jpg, longtemps décrié pour sa compression dite « destructive » a bien évolué avec le temps et s’impose de plus en plus comme le leader du format d’image. Dans le milieu des professionnels de l’impression, le TIFF est encore beaucoup utilisé, mais il est bien plus lourd. Je pourrais continuer en vous parlant des eps, des svg, raw et de bien d’autres encore, mais cela nécessiterait un article à part (si cela vous intéresse, n’hésitez pas à le dire ne commentaire).

Le poids des images

Votre navigateur internet qui arrive sur un site non optimisé

Si vous en êtes arrivé jusqu’ici, déjà, bravo, mais surtout vous devez avoir compris ce qui va faire le poids d’un fichier : sa définition.

Dans le cadre d’une image bitmap, si elle fait par exemple 2 000 pixels de large pour 2 000 pixels de haut, nous avons donc 4 000 000 de pixels. Chacun d’entre eux va comporter un code qui va déterminer sa couleur dans un « panel » donné. Quatre millions de séries d’informations sur plusieurs bits pour dire qu’il y a tel pourcentage de Rouge, Vert ou Bleu dans le cadre du RVB.

C’est une simplification, car d’autres éléments sont à prendre en compte (la profondeur des couleurs exprimée en bit par pixel par exemple https://fr.wikipedia.org/wiki/Profondeur_de_couleur_ [informatique]), mais vous avez l’idée générale.

Si vous avez besoin de réduire le poids de vos images, pour les mettre sur votre site internet par exemple, le plus simple est de déterminer quelle taille environ elle va prendre sur un écran. Dans un logiciel adapté vous lui donnez cette dimension en pixel.

Vous pouvez également, dans le cadre d’un jpg par exemple, régler son taux de compression pour le rendre plus léger. Cela va réduire le champ des couleurs qu’il est possible au fichier d’exprimer, donc réduire le poids de son code, compresser une image à 8-9 (sur 12) ne donnera quasiment aucune différence à l’œil nu. Si cela vous intéresse, je pourrais rédiger un article sur la compression d’image.

Dans le cadre de votre travail ou de votre vie personnelle, un conseil : n’écrasez jamais vos fichiers natifs, ceux que vous avez de la plus haute définition, vos « fichiers de base » si vous voulez. Vous ne pouvez pas savoir si vous n’aurez pas besoin d’eux plus tard. Une fois la définition d’une image réduite, il n’y a pas de retour en arrière possible.

En espérant que tout cela vous aura appris des choses, je vous dis à bientôt !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.