L' IMAGE NUMÉRIQUE Pour qu'un site Web soit attractif et agréable à utliliser pour un internaute, il est impératif que celui-ci comporte un certains nombre d'images : des photos des illustrations des plans mais aussi : une interface ( l'environnement du site lui-même, le haut du site par exemple) des boutons (bien utiles pour naviguer plus facilement) Bref, vous l'aurez bien compris, un site c'est avant tout du VISUEL. Pour cela nous devons donc insérer ces images, de quelques formes soient-elles, comme nous avons déjà pu le faire lors de nos différentes interventions sur le Site UTL. Ces images doivent être PRÉPARÉES au format adapté au Web. QU'EST-CE QU'UNE IMAGE NUMÉRIQUE? Une image numérique est un fichier informatique (des chiffres et des données, basé sur le binaire 1-0). Ces données dressent la carte des pixels de couleurs qui une fois assemblés selon un code déterminé constituent l'image telle que vous pourrez la visualiser sur votre écran. Il existe une multitude de " codes" de fichier d'image numérique et donc de format de fichier d'images. Depuis le développement incessant de la technologie informatique, et notament du Web, ceux-ci ont été conçus au fil du temps pour répondre à des besoins ou des spécificités très variées. LES DIFFÉRENTS TYPES DE FICHIER IMAGE 1 - BITMAP ( extension fichier.bmp ) Le premier format, et celui qui a été le plus longtemps usité, est le Bitmap : BRUT BIT MAPPING (carte de pixels à l'état brut) C'est le format le plus simple, puisqu'il consisite à énumérer un à un dans le code les points de couleurs et l'endroit où ils se trouvent. C'est aussi le fichier le plus lourd, donc l'un des moins adaptés pour le WEB. InfographYP L'image numérique Page :1 /6
Exemple : Prenons cette image : Les pixels qui la compose seront décomposés de façon suivante : Le code BITMAP sera ainsi le suivant : Case A1 bleu Case A2 jaune Case A3 jaune Case A4 rouge Case B1 jaune Case B2 bleu Case B3 rouge Case B4 jaune Case C1 jaune Case C2 rouge Case C3 bleu Case C4 jaune Case D1 rouge Case D2 jaune Case D3 jaune Case D4 bleu Sur une image qui comporterai 200 lignes sur 200 colonnes, cela représente 40 000 lignes de code. Ce n'est q'une petite image, mais imaginez donc la taille du fichier informatique correspondant! 2 - JPEG ( extension fichier.jpg, ou. jpeg ) Ce format de fichier est aujourd'hui le plus courammant utilisé. : Joint Photographic Expert Group La façon dont il code les images est basé sur le nombre de couleurs du document, qu'il adresse ensuite aux emplacements correspondants. Concretement, en reprennant le même exemple, cela donne en code : Bleu : Cases A1, B2, C3, D4 Rouge : Cases A4, B3, C2, D1 Jaune : Cases A2, A3, B1, B4, C1, C4, D2, D3 Il ne faut plus là que 3 lignes de codes ou 16 en nécessitait pour l'exemple précedent. Il est donc plus léger, et plus rapidement affiché à l'écran sur internet. Ce procédé de codage, permet en outre, la COMPRESSION : En effet le fichier jpg est capable d'accepter les traitements algorythmiques effectués par la plupart des logiciels d'imagerie numérique, visant à réduire le poids de l'image. (nous développerons la problématique du poids un peu plus bas.) Concretement, l'ordinateur va interpoller les diférentes couleurs pour en réduire le nombre. InfographYP L'image numérique Page :2 /6
Exemple : jpeg non compressé: jpeg compressé : Il ne faut pour la seconde image que 3 lignes de code, là ou ilen fallait 5 pour la première. Bien évidement, la compression se fait de façon beaucoup plus subtile que cet exemple. Il n'en demeure pas moins que l'image est du coup dépréciée, puisqu'avec moins de détails. C'est également la raison pour laquelle in convient de TOUJOURS garder les images de base en copie. Si le format jpg permet à l'ordinateur de réduire les différentes couleurs, celui-ci ne peut pas par contre en créer, en inventer. Une image compressée ne pourra jamais être "décompressée" 3 - PNG ( extension fichier.png ) Ce format, codé de façon assez similaire aux jpeg, à surtout la particularité de prendre en charge la TRANSPARENCE. En effet, par défaut, le fond d'une image BMP ou JPEG est blanc. Cela signifie qu'avec le png, il est possible d'obtenir des images dont le fond ne se voit pas. Cela facilite donc son insertion dans un document où le fond est déjà d'une couleur déterminée. Imaginons un document dons la couleur est orange : Je veux y insérer cette image : En BMP et en JPG, par défaut, le fond est blanc. Lors de l'insertion cela donnera ceci : InfographYP L'image numérique Page :3 /6
En PNG, qui permet la transparence, cela donnerai : Ce qui est quand beaucoup plus propre. Le PNG, toutefois peut lui aussi être assez lourd pour le WEB. Il faut donc bien s'assurer que le fichier image nécessite réellement une transparence. LA QUALITÉ DES IMAGES NUMÉRIQUES Dans la vie courante, nous avons l'habitude d'utiliser les mesures métriques pour déterminer les dimensions d'un objet ou d'une image. Ces mesures ce font par ailleurs par les anglo-saxons en pieds et en pouces (yard et inch, en anglais) En numérique, la taille des images est quant à elle exprimée le plus souvent par le nombre de pixels qui la composent. Exemple : cette image que nous avons utilisé pour le site UTL mesure 200 pixels de large sur 150 pixels de haut. (on note généralement 200px/150px) Comme vous le savez, l'informatique a été principalement développée par les américains durant ces 40 dernières années (IBM, MicroSoft, Apple ) et donc on travaille selon leurs standards : De ce fait, la qualité, c est-à-dire la défintion de l'image, est déterminée par le nombre de PIXELS présents dans l'image par POUCE (un pouce =2.54cm). Notez que la pluparts des logiciel proposent aussi de travailler en Pixels par Cm, mais c'est une pratique extremement peu répandue chez les professionnels (notament les imprimeurs) InfographYP L'image numérique Page :4 /6
On parle donc de définiton PPP, Pixels Par Pouce en français On parle surtout de définiton DPI, Dot Per Inch en anglais. La règle étant très simple : plus le DPI est élevé, plus l'image sera de meilleure qualité. Le corollaire l'est tout autant : plus il y a de pixels plus le fichier est lourd. Actuellement, les appareils photos proposent le plus souvent 300 ou 600 dpi de défintion. Mais ils peuvent être réglé pour plus ou moins selon les besoins. Dans le WEB, qui nous concerne plus directement, le standard est de 72dpi, il est communément admis que c'est suffisant pour la visualisation sur un écran. Petit exercice : Considérant que l'image prise en exemple fait 200px de large sur 150px de haut Que la défintion de l'image est de 72 dpi Combien mesure cette image en cm? Réponse : 200px 72dpi = 2.78 pouces x 2.54 = 7.06 cm 150px 72dpi = 2.08 pouces x 2.54 = 5.29 cm Considérons maintenant cette image de 7.06cm sur 5.29 cm et voyons quelle taille elle ferait si elle était en 300dpi : 7.06cm 2.54 = 2.78 pouces x 300dpi = 834px 5.29cm 2.54 = 2.08 pouces x 300dpi = 625px C'est là que la magie de l'informatique intervient : à l'impression papier les 2 documents auront exactement la même taille, alors qu'à l'écran l'une apparaitra beaucoup plus grande que l'autre. La différence de qualité elle par contre se verra vraiment sur le papier. LE POIDS DES IMAGES NUMÉRIQUES Bien, nous pouvons laisser de côté les mesures cm ou pouce pour le moment, puisque comme dit déjà un peu plus haut, nous travaillerons principalement en pixels pour le WEB. L'intérêt que recquiert l'assimilation de ces notions de base réside dans le fait que la navigation sur un site web doit pour être efficace et rapide. C'est pourquoi il faut veiller particulièrement au POIDS des images, qui, s'il est trop élevé met beaucoup de temps à s'afficher à l'écran, et fatigue rapidement le visiteur qui finit par aller voir ailleurs. Qu'est-ce que le poids de l'image? C'est le nombre d'octets que nécessite le code utilisé pour décrire les pixels qui composent l'image. L'octet, c'est en fait les séries de 0 et de 1 qui compose le langage informatique, le code BINAIRE. Vous l'avez compris, plus il ya d'octets, plus l'ordinateur met de temps à les lire, cqfd. Pour informations le poids des fichiers informatiques sont exprimés le plus souvent en Ko (kilo Octets) InfographYP L'image numérique Page :5 /6
Pour information : octet Kilo octet 1 Ko 1 octet 1 000 octets Mega octet 1 Mo 1000 Ko 1000000 octets Giga octet Tera octet 1 To 1 Go 1000 Go 1000 Mo 1000000 Mo 1000000 Ko 1000000000 Ko 1000000000 octets 1000000000000 octets Pour résumer ce que nous venons de voir : il faut que l'image soit : 1- Aux bonnes dimensions en PIXELS 2- Au bon FORMAT 3- D'une DÉFINITION adaptée 4- D'un POIDS raisonnable L'objectif est donc de déterminer quel format de fichier conviendra le mieux à votre projet. Essayer de "jongler" entre la taille du document (pixels), la qualité de l'image (sa définition) tout en limitant son poids au maximum. NB : nous pourrions également parler de la colorimétrie. En effet, les couleurs des images numériques peuvent se déterminer selon différents standards. Cela n'a cependant que réeelement de l'imporatnce que si on destines ses travaux au web, ou à l'impression papier. Considérant que nous travaillerons essentiellement pour le Web, la règle à retenir est que nous utiliserons de préférence le mode RVB (Rouge Vert Bleu) (pour l'impression, on choisirai le CMJN : Cyan Magenta Jaune Noir) InfographYP L'image numérique Page :6 /6