1ère Générale NSI

 

Term. Générale NSI

 

Terminale STI2D SIN

Bts Ccst

Technico-commercial 3.0

[[{"text":"Regarder la vidéo suivante :



Si la vidéo ne fonctionne pas, suivez le lien suivant :
https://youtu.be/UnNPNc-F9ks
","title":"Les images numériques"}],[{"quiz":805}],[{"text":"
Nous avons vu qu’une image était composée de pixels.
Un pixel est la combinaison des trois couleurs  Rouge Vert B;eu (RVB ou RGB Red Green Blue).

Executer le code ci-dessous.

Modifier le code pour visualiser les pixels de l'image ( zoom à 20). 
","title":"Pixel"},{"code":"
image = new SimpleImage(\"./assets/x.png\")

image.setZoom(1)

print(image)
"},{"solution":"image.setZoom(20)"},{"text":"Explications sur le code :
x.png est une petite image de 10 pixels de haut (height) sur 10 pixels de large (width).
Cette image est au format png.

Ce programme est composé de 3 lignes :
 - La première ligne stocke l'image nommée \"x.png\" dans la variable nommée \"image\":
image = new SimpleImage (\"./assets/x.png\");
- La ligne 2 : image.setZoom(20); - régler l’option de zoom sur 20 (10, 20, ... peu importe).
- La ligne print(image); - affiche l'image avec un agrandissement de 20x.

"}],[{"text":"

».

\"\"

Le pixel, souvent abrégé px, est l'unité de base permettant de mesurer la définition d'une image numérique matricielle (tableau 2 dimensions). Son nom provient de la locution anglaise « picture element », qui signifie « élément d'image ».

Le pixel est l'unité minimale adressable par le contrôleur vidéo. C'est aussi l'unité utilisée pour spécifier les définitions d'affichage (largeur × hauteur) :
la définition du VGA (« Video Graphics Array ») est de 640 × 480, soit 307 200 pixels ;
la définition du Super-VGA, ou S-VGA (« Super Video Graphics Array  ») est de 800 × 600, soit 480 000 pixels ;
la définition du XGA (« Extended Graphics Array ) est de 1 024 × 768, soit 786 432 pixels ;
la définition du SXGA (« Super Extended Graphics Array ») est de 1 280 × 1 024, soit 1 310 720 pixels ;
la définition du 4K (« Ultra Extended Graphics Array ») est de 3 840 × 2 160, soit 8 294 400 pixels.

Les pixels sont organisés sur une grille :
\"grid

x=0, y=0 est l'origine. Elle se trouve dans le coin en haut à gauche. (0, 0)

X augmente vers la droite.

Y augmente vers le bas.

x=1, y=0 est le pixel voisin en haut à droite de l'origine - (1, 0)

x=0, y=1 neighbor below the origin - (0, 1)


À chaque pixel est associée une couleur, usuellement décomposée en trois couleurs : Rouge Vert Bleu (RVB).

Si nous voulons visualiser le RVB du pixel de coordonnées (0,0), il faut appliquer le code ci-dessous :

","title":"Les pixels"},{"code":"
image = new SimpleImage(\"./assets/x.png\")
image.setZoom(20)
print(image)

pixel = image.getPixel(0, 0)
print(\"rouge : \",pixel.getRed())
print(\"vert : \",pixel.getGreen())
print(\"bleu : \",pixel.getBlue())




"},{"text":"Est-ce normales de trouver ces valeurs pour le rouge, le vert et le bleu du pixel (0,0) de l'image? Justifier."},{"edit":"

Répondre ici.

"}],[{"text":"Faire de même avec le pixel de coordonnée (2,2) de l'image \"x.png\". En vous aidant du code précédent, écrire le code python correspondant.","title":"Visualiser la couleur du pixel(0,0)"},{"code":""},{"text":"Justifier les résultats."},{"edit":"

Répondre ici.

"}],[{"text":"
Vous allez effectuer un dessin de votre choix à l’aide d’une application.
ou Phofiltre ou The Gimp.

Sauvegarder ( save as ) le fichier au format  BMP,, JPG, GIF et PNG.

Donnez la taille de ces 4 fichiers. 



","title":"Format des images numériques"},{"edit":"Importer votre belle image numérique ici.

Donnez la taille de chacun des fichiers ici:
image.bmp = ?
image.png = ?
image.jpg = ?
image.gif = ?

Conclure ici les extensions.
 
"}],[{"text":"

Les images numériques que nous voyez sur vos écrans sont donc stockées dans des fichiers. Vous venez de voir qu'il existe plusieurs formats d'images, c'est-à-dire plusieurs façons de coder l'image dans un fichier. 

Selon le format, l'image prend plus ou moins d'espace disque et est de plus ou moins bonne qualité.

 logo.BMPlogo.jpg (jpeg) logo.png logo.gif 
Taille 159koTaille 11koTaille 22koTaille 8ko

 

"}],[{"text":"
Le Bitmap (bmp) est un format non compressé (contrairement aux JPG, PNG, GIF etc.)
Concrètement, cela signifie les choses suivantes :

Le fichier est très rapide à lire, contrairement aux formats compressés qui doivent être décompressés.

La qualité de l'image est parfaite. Certains formats compressés comme le JPG détériorent la qualité de l'image, ce n'est pas le cas du BMP.

Mais le fichier est aussi bien plus gros à charger puisqu'il n'est pas compressé !

Attention, le format bmp n'est pas pris en charge par les navigateurs web. 

 
","title":"Image.bmp"}],[{"text":"
Le format jpeg ou jpg (Joint Photographic Experts Group)est un format de compression très efficace mais avec perte de qualité. Plus l'image est compressée, plus la qualité de l'image diminue. Il convient donc de trouver un compromis permettant un chargement rapide tout en gardant une qualité acceptable. Les logiciels graphiques permettent de régler le facteur de compression qui va de 1 à 99.
Le format JPEG est particulièrement adapté et recommandé pour les images de type Photographies, il peut supporter en effet 16.7 millions de couleurs et donne un bon rendu pour les images nuancées et les dégradés. 

Le format JPEG ne supporte pas la transparence et ne permet pas de créer des animations.






Sans Compression

Compression
faible
80%

Compression moyenne
50%
Compression forte
20%
285ko

85ko

49ko26ko


Avec le fprmat JPEG, la qualité de l'image diminue avec l'augmentation du facteur de compression.
","title":"Image.jpeg ou Image.jpg"}],[{"text":"
Le format GIF (Graphics Interchange Format) est un format qui utilise une compression sans perte de qualité.

Les images au format GIF peuvent contenir un maximum de 256 couleurs, ce qui rend ce format peu adapté pour les photographies, les images nuancées et les dégradés. Par contre ce format donne d'excellents résultats pour les images avec un petit nombre de couleurs, les logos, les formes géométriques, boutons etc...
Le format GIF supporte la transparence et il permet également de créer des animations : les GIFs animés.
L'option d'entrelacement permet d'afficher l'image progressivement, l'image étant flou au début du chargement et devenant de plus en plus précise.


\"Résultat

Source : https://media2.giphy.com/media/SOKP23cFJhtbW/giphy.gif 

Ce gif fait : 
- 2879 0ctets avec 243 couleurs utilisées
- 2232 0ctets avec 32 couleurs utilisées
- 901 0ctets avec 16 couleurs utilisées

Attention : Il y a une incidence du nombre de couleurs sur le poids et l'apparence des GIFs.

 
","title":"Image.gif"}],[{"text":"
Le format PNG (Portable Network Graphics) utilise une compression sans perte de données.
Le PNG supporte comme le GIF une palette indexée jusqu'à 256 couleurs, mais également les niveaux de gris jusqu'à 16 bits et les couleurs réelles jusqu'à 42 bits.
Le PNG supporte la transparence ainsi que 254 niveaux de transparence partielle.
Il possède également une méthode d'entrelacement très performante.
Les fichiers PNG sont généralement plus légers que les GIF, par contre le PNG est moins performant que le JPEG pour la compression des photographies.
Le PNG ne permet pas de créer des animations.

Dans l'image ci-dessous, Mario est créé une association d'image png (pour la transparence) et le fond est réalisé en jpg. 


\"\"
Source : http://www.polygon.com/2015/10/21/9584302/super-mario-bros-speedrun-world-record


","title":"Image.png"}],[{"text":"Lire la page suivante :","title":"Définition et résolution des images numériques"},{"htm":"","css":"","js":""}],[{"text":"Un fichier \"image\" issu d'un appareil photo numérique contient plus qu'une simple image. On trouve en effet des informations sur l'image elle-même (définition, résolution...) mais aussi des informations sur la prise de vue (date et heure, lieu...). Cette spécification des fichiers \"image\" d'un appareil photo numérique s'appelle EXIF (EXchangeable Image file Format). Ces données contenues dans un fichier \"image\" d'un appareil photo s'appellent des métadonnées.","title":"Les métadonnées d'une image"}],[{"text":"
Vous allez prendre votre smartphone, puis activer le GPS, puis prendre en photo l'image ci-dessous :

\"Arrivée

Télécharger une application qui edite les métadonnées des images.
Pour Android, sur google play, il faut télécharger photo exif editor :  https://play.google.com/store/apps/details?id=net.xnano.android.photoexifeditor&hl=fr

sur l'Apple store il faut télécharger l'application metapho  :

Visualiser et noter les données enregistrer par votre photo. 



"},{"edit":"

Répondre ici.

"}],[{"text":"Exécuter le code ci-dessous.
Visualiser les données de chacunes des images (flowers.jpg et photo.jpg).

Donner la largeur et la hauteur des images.

Indiquer le lieu ou l'image photo.jpg a été prise.

Sous quel format les métadonnées sont enregistrées dans l'image (Json, Xml, Csv ou Vcard)? 
"},{"edit":"

Répondre ici.

"},{"code":"
url = \"./assets/photo.jpg\"
#url = \"./assets/flowers.jpg\"

image = new SimpleImage(url)

#afficher les métadonnées de l'image
getExif(url)

print(image)

"}],[{"text":"

Etes-vous capable de lire des informations complémentaires, si oui lesquelles ?

Visualiser une image sur internet comme sur le site du monde (lemonde.fr) par exemple


Faites un clic droit et copier l’adresse d'une image sur la page.

Vous avez ainsi copié le l’adresse URL de l’image sur Internet.

Connectez-vous sur le site : http://exif.regex.info/exif.cgi

Copier l'url dans URL.
Cliquer sur je ne suis pas un robot.
Visualiser les données de la photo en cliquant sur \"view image data\".

Puis recherchez le nom de l’auteur de l’image et le lieu de prise de vue de l’image.

"},{"edit":"

Répondre ici.

"}],[{"text":"Sources : "},{"code":""}]]

En poursuivant votre navigation sur mon site, vous acceptez l’utilisation des Cookies et autres traceurs  pour réaliser des statistiques de visites et enregistrer sur votre machine vos activités pédagogiques. En savoir plus.