Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Introductions aux types d'images (images matricielles, images vectorielles

Introductions aux types d'images (images matricielles, images vectorielles

Dans ce chapitre, vous n'aurez que de la théorie pas de balises à apprendre, ni attributs

Avant de parler des formats d'images supportés par le web et la syntaxe xhtml des images, on va aborder un petit peu le domaine de l'infographie, même si je ne suis pas assez expert en la matière. Pour commencer gardez dans la tète qu'il y a deux formats d'images du point de vue général.

  • les images matricielles (images bitmap) ;
  • les images vectorielles.

Les images matricielles (images bitmap)

Qu'est-ce qu'une image matricielle (définition)

Elles s'appellent aussi images bitmap, ce sont des images représentées par une matrice de pixels d'où leur appellation, une matrice est en quelques sortes un tableau. Un pixel (abréviation de picture élément : élément d'image) est le plus petit élément constituant une image bitmap, ces pixels ont une forme rectangulaire, et chacun d'entre eux possède une couleur quelconque, et en rassemblant ces pixels on obtient notre image matricielle. Ces derniers ne sont pas visibles à l'œil nu, sauf si l'image est agrandie. En voici la preuve :

image matricielle (pixels) image matricielle (pixels)

Je parie que vous arriviez à remarquer les pixels, dans l'image à droite qui représente la tête agrandie de Shawn Ray (un bodybuilder), c'est avec ces petits rectangles qu'on constitue une image, remarquez comment on obtient les chiffres : image matricielle (pixels)

Les images matricielles sont créées par les imprimantes, scanners, appareils photographiques et certains logiciels d'infographie comme Photoshop.

La différence entre la résolution et la définition d'une image

La résolution

Tant que la résolution d'une image est grande tant qu'elle est nette et bonne, la résolution est le nombre de pixels par pouce, un pouce est égal à 2.54 centimètres. La résolution d'une image numérique définit le degré de détail de l’image. Ainsi, plus la résolution est élevée, meilleure est la restitution, grande est la taille, très longue est l'impression.

Voici deux images avec les mêmes dimensions mais des résolutions différentes (respectivement 72 pixels par pouce, 20 ppp). Notez la perte en termes de détails et de netteté.

résolution d'une image définition d'une image

La définition

La définition d'une image est à peu près la même chose sauf que la définition correspond au nombre de pixels la composant, c'est à dire le nombre de points en hauteur et en largeur, par exemple une image de 200 pixels par 450 pixels, abrégé en « 200 × 450 ». Alors que la résolution est exprimée par unité de surface, généralement le ppp, ainsi Une résolution de 300 ppp signifie 300 colonnes et 300 rangées de pixels sur un pouce carré ce qui donne 90000 pixels sur un pouce carré.

Pour connaître la définition d'une image, placez la souris au-dessus d'elle et vous allez obtenir des informations très pertinentes.

résolution et définition

Dans cet exemple, il s'agit d'une image jpeg, sa taille 55.3 ko, et sa définition est égale à 1024 x 768 ça correspond exactement à la résolution de votre écran, pourquoi, eh bien il s'agit d'une image d'arrière-plan, or un fond d'écran est destiné à couvrir tout votre écran vous-voyez ce que je veux dire.

Dernier exemple : voici une image avec une définition de 5 x 6 (mais attention les pixels de cette images sont agrandis, rappelez-vous qu'un pixel est invisible à l'œil nu) :

résolution et définition

Le poids d'une image (en considérant que l'image n'est pas compressée)

Pour connaitre le poids d'une image, il suffit de connaître combien reçoit chaque pixel en terme de mémoire et puis on doit multiplier cette valeur par le nombre total de pixels composant l'image c'est à dire la définition de l'image : nombre de pixels en largeurs x nombre de pixels en longueur. Quelques exemples :

Une image dont les dimensions sont : 640 x 480 et ayant pour chaque pixel 24 bits (3 octets) sa taille est : (640 x 480) x 3 = 921600 octets.
Pour convertir la taille en Kilooctet, il suffit de la diviser par 1024 : 921600 / 1024 = 900 Ko. Pour plus d'informations à propos des unités de mesures rendez-vous au chapitre des langages informatiques (octet, Kilooctet, Mégaoctet, Gigaoctet).

Définition de l'image Noir et blanc
(1 bit)
256 couleurs
(8 bits)
65000 couleurs
(16 bits)
True color
(24 bits)
320x200 7.8 Ko 62.5 Ko 125 Ko 187.5 Ko
640x480 37.5 Ko 300 Ko 600 Ko 900 Ko
800x600 58.6 Ko 468.7 Ko 937.5 Ko 1.4 Mo
1024x768 96 Ko 768 Ko 1.5 Mo 2.3 Mo

 

Les images vectorielles

Les images vectorielles sont composées d'entités géométriques telles qu'un cercle, une ligne, un rectangle, une courbe ou un segment etc. (donc pas de pixels). Ces entités géométriques sont représentées par des formules mathématiques (un rectangle est défini par deux points, un cercle par un centre et un rayon, une courbe par plusieurs points et une équation). C'est le processeur qui se chargera de "traduire" ces formes en informations interprétables par la carte graphique.

L'intérêt avec ce type d'images c'est qu'on peut les agrandir sans perte de qualité c'est-à-dire sans aucun effet d'escalier (comme pour la première image dans ce cours). Un dessin vectoriel est dessiné à nouveau à chaque visualisation, ce qui engendre des calculs sur la machine. On se sert de ce types d'images pour représenter des formes simples et non pas pour dessiner un Homme ou un animal. Voila ce que peut arriver lorsqu'on agrandi les deux types d'images : images vectorielles

Parmi les logiciels de dessin vectoriel, il y a : Adobe Illustrator, Adobe Flash, FreeHand.

Assurez-vous que vous n'allez pas trouver d'images vectorielles dans le web, ça pour le moment, vous croyez qu'on s'est débarrassé de 50% du cours image désolé de vous décevoir mais ce chapitre est très loin d'être fini, c'est pourquoi j'ai décidé de le scinder en plusieurs parties.

Maintenant on va s'attaquer aux images matricielles, il en existe tout un paquet de formats, Les plus répandus sont : bmp, jpeg (jpg), gif et png. Seulement ces trois derniers formats sont supportés par les navigateurs actuels. Ceci dit que dans l'avenir l'histoire va changer images

Bon on va commencer par traiter le format d'images PNG (introduction et avantages : compression, transparence, entrelacement...), en raison de la popularité qu'il a pu se faire ces derniers temps.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau