Want to make creations as awesome as this one?

Transcript

Les images numériques

Domaine 3 : Création de contenu

Développer des documents visuels et sonores

Les images numériques ont un certain nombre de propriétés à comprendre avant de les manipuler.

Qu’est-ce qu’une image dans un contexte numérique ? (internet, DVD, écran d’ordinateur, appareil photo numérique, smartphone...) ?
Ci-contre la définition sur Wikipedia.
Mais on peut faire plus simple : une image numérique est une ensemble de pixels dans une certaine gamme de couleurs.
Qu’est-ce qu’une image qui n’est pas numérique ? On dit alors “analogique”, c’est une image qui n’est pas encodée sous forme de 0 et de 1 : document imprimé (journal), photographie argentique, film négatif… et donc qui ne nécessite pas d’écran, pas d’ordinateur pour être vue.
Transformer une image analogique en image numérique s’appelle “numériser”, c’est ce que l’on fait avec un scanner par exemple.
Une image numérique peut-être une photographie, un pictogramme (comme sur cette page) ou un logo (comme le logo de Wikipedia).
Quand un document combine du texte et des images on dit qu’il est composite : c’est le cas de ce document, le texte est facile à manipuler et à modifier, je peux le copier, y faire des recherches… Alors que modifier une image est plus compliqué.

Définition

Qu'est-ce qu'une image numérique ?

Par format on entend “type de fichier”. Quand on veut parler du format d’une image dans le sens “sa taille” on utilise le terme définition d’image.
Pour identifier le format d’une image numérique le plus simple est de regarder son extension de nom de fichier*.
Pour faire simple nous allons nous limiter aux trois formats les plus courants qu’on trouve sur le web, qui est aussi pour le .jpg le format utilisé par nos appareils : smartphone, tablette… Pour faire des photos.

les différents formats d'image

* Un petit rappel sur les extensions de nom de fichier et comment les afficher.

La même image mais dans trois formats différents, chaque format ayant ses particularités.

Format le plus répandu sur le web, c’est aussi le format des photos réalisées par nos smartphones, tablettes ou appareils photos numériques courants.
Plus : images ne pesant pas très lourd.
Moins : pour ne pas peser lourd les images sont compressées*, ce qui peut les endommager si on pousse trop le taux de compression,
voici un exemple extrême :

les différents formats d'image : .jpg

* Il existe de nombreux modes de compression, mais l’objectif est toujours le même : économiser de la place, baisser le poids des fichiers. L'algorithme .jpg est destructeur : plutôt que d’encoder chaque pixel individuellement les pixels sont groupés en supprimant les nuances de couleurs intermédiaires.

Format assez peu répandu.
Plus/moins : images lourdes mais pas de compression, donc qualité maximum. Plutôt utilisé quand on veut garder la qualité la plus élevé : site de photographies, images destinées à être imprimés.

les différents formats d'image : .PNG

Le .png a un particularité : il peut être transparent, une partie de l’image peut être partiellement ou complètement invisible, ce que ne sait pas faire le .jpg
(il s’agit d’une option, le .png n’est pas obligatoirement transparent).


Le format .gif a la particularité de pouvoir être animé : il ne s’agit pas d’une vidéo mais d’une courte suite d’images. Les .gif animés sont assez lourds et prennent du temps à se charger dans un navigateur internet.

les différents formats d'image : .gif

Le format .gif, qu’il soit utilisé pour une image fixe ou animée a un grave défaut : sa palette de couleur est très limitée (256 couleurs contre 16 millions de couleurs pour un .png ou un .jpg).
Une image .gif fixe ne pèse presque rien mais sa qualité est très basse en raison de cette palette de couleurs limitée, exemple ci-contre.

.gif animé constitué de 13 images en boucle.

Rappel à propos des unités en informatique.

Une image en couleur standard (.jpg ou .png par exemple) est constituée de pixels composés d'un mélange de Rouge, Vert et Bleu. Chaque composante (RVB, Rouge, Vert, Bleu) est codée sur 8 bits, soit 256 possibilités (256 = 2^8). 256x256x256 = 16 millions de couleurs possible pour chaque pixel. Dans ce cas on dit qu'il s'agit d'une image 24 bits (8 pour le Rouge +8 pour le Vert +8 pour le Bleu).


Les .gif sont des images 8 bits : la palette de couleurs de chaque pixel est limitée à 256 couleurs.

Même chose pour les images en Noir & Blanc (en informatique on utilise le terme Niveaux de Gris) : 256 teintes possible pour chaque pixel (du Noir au Blanc en passant par toutes les teintes de gris intermédiaires).


Il existe des images en 48, voire 96 bits (respectivement 16 et 32 bits par couche RVB, on parle de profondeur colorimétrique). Pour créer ou capturer ce type d'image il faut un logiciel ou un appareil photo numérique professionnel.

L'œil humain est capable de différencier environ 24 millions de couleurs.

On appelle définition la quantité de pixels des côtés d’une image, en donnant la taille en pixels Largeur x Hauteur.
Par exemple une image de définition 1920 x 1200 fait 1900 pixels de large par 1200 pixels de haut (soit 1920 x 1200 = environ 2,3 millions de pixels ou 2,3 mégapixels).

La définition des images

Dans cet exemple 1920x1200 correspond à une image de grande taille ! C’est une image qui est plus grande que la plupart des écrans d’ordinateur et qui s’affichera parfaitement sur un écran.

Ci-contre le pictogramme en haut à gauche de cette page. L'image d'origine fait 48 x 48 pixels, très agrandie on distingue nettement ces pixels.

différentes définitions pages suivantes

La définition des images

960 x 540

300 x 193

50 x 32

La définition des images

image 50 x 32 agrandie

Dans cet exemple nous avons pris la photo de la page précédente dont la taille d’origine est de 50 x 32 pixels.
Puis elle a été agrandie manuellement comme on peut le faire dans traitement de texte par exemple.
On met là le doigt sur le problème fondamental des images : elle sont constituées de pixels, agrandir une image signifie y ajouter des pixels qui n’existaient pas… Parce que votre écran affiche lui même des pixels et que la meilleure qualité à l’écran est celle qui affiche :
1 pixel d’image = 1 pixel d’écran
Si il y a plus de pixels tant mieux, mais s’il n’y en a pas assez c’est la catastrophe…

Quelques précisions techniques

Il est tout de même possible d’agrandir un peu une image sans perdre trop de qualité. Cela dépend de l’image, mais un agrandissement jusqu’à 120% de la taille d’origine reste souvent acceptable.
Vous avez peut-être vu à la télévision ou au cinéma des fictions dans lesquelles un technicien est capable d’améliorer la qualité d’une image pour rendre certains détails visibles (un visage, une plaque d’immatriculation…). C’est de la fiction, ce n’est pas possible : si vous agrandissez des pixels, vous allez juste avoir des gros pâtés de pixels, cela ne va pas révéler de détails.
En revanche il est possible de restaurer des images, pour la vidéo par exemple des programmes informatiques sont capables de combler les informations manquantes en utilisant les données d’autres vidéos. Les nouvelles images générées sont réalistes mais pas réelles.
Exemple en vidéo : New-York en 1911 - 4K 60 fps*
Dans ces extraits les films d’origine ne sont pas numériques, mais les pellicules d’époque étaient très petites : il a donc fallu les numériser puis les agrandir et les traiter pour supporter cet agrandissement. Ce type traitement utilise le machine learning et les réseaux de neurones.
Les algorithmes d’agrandissement d’image sont depuis peu accessibles au public, par exemple :

* 4K est le nom commercial du format 4 096 x 3 112 pixels, 60 fps est la cadence d’images : fps = frames per second ou images par seconde.
Théoriquement 25 à 30 images/seconde suffisent pour créer l’illusion de mouvement sans saccades (24 ou 25 images/seconde pour le cinéma)

où trouver des images, des vidéos

Les images, comme les autres ressources qu'on trouve sur internet, sont soumises soit au droit d'auteur, soit aux licences Creative Commons. Ces licences définissent le droit d'usage : usage privé, usage commercial, obligation de citation de l'auteur, autorisation à modifier le support et à le redistribuer…

Lisez ce document sur Wikipedia, il est très important de comprendre le fonctionnement de ces licences.

Si un document n'est pas régi par une licence Creative Commons il est implicitement soumis au droit d'auteur… Auquel cas vous n'êtes pas autorisé l'utiliser.
Le plus simple reste encore d'utiliser des images explicitement libres de droits ou simplement soumises à une obligation de citation du créateur (comme nous le faisons dans la partie Sources de ce document).
Pour les images et les vidéos pexels.com
Pour des icônes, des illustrations, des logos, des pictogrammes : flaticon - freepik
(attention les sites comme flaticon ou freepik mélangent images libres et gratuites, et images payantes, lisez bien les conditions d’utilisation, les images à télécharger sont dans différents formats : privilégiez le .png)
Pour créer vous même vos designs, vos plans, vos diagrammes… :
canva.com
app.diagrams.net

Ce ne sont que quelques suggestions, il existe de nombreuses ressources sur internet… Dans tous les cas consultez les conditions d'utilisation.

encore plus de technique…

Nous n'avons fait que survoler les données techniques essentiels. Si vous voulez aller plus loin, passez à la suite :

Les images et sons numériques,
aspects techniques

Sources

Image numérique

Les extensions de nom de fichier

Image format .png

Bob l'éponge

© Stephen Hillenburg / Nickelodeon

New-York en 1911

Algorithme agrandissement d'image

Licences Creative Commons

Sources

Image de couverture

https://www.pexels.com/fr-fr/photo/photo-de-personne-tapant-sur-le-clavier-de-l-ordinateur-735911/

Pictogrammes
https://www.pexels.com/photo/woman-s-black-hair-2807495/

Images

Banques d'image, outils de création :


https://www.pexels.com/fr-fr/
https://fr.freepik.com/
https://www.freepik.com
https://www.canva.com/
https://app.diagrams.net/