fredreillier.com

Webdesign, contenus et stratégie web

Quelques notions sur l'image numérique

Les écrans d’ordinateurs : bits et résolution

Du 8 au 24 bits

1 bit : plus petite unité d’information – 1 pulsation électronique – 0 ou 1

Ecran 1 bit : chaque pixel peut être noir ou blanc. (1985)

2 bits : 4 « couleurs » : 00, 01, 10, 11

4 bits : 16 solutions

8 bits : 256 couleurs (2 puissance 8 ) – L’état des lieux de la majorité des écrans au moment de la création du web, d’où la palette web 216 couleurs.

Aujourd’hui la majorité des écrans affiche 24 bits (256 nuances différentes pour les trois couleurs primaires qui sont rouge, vert et bleu), soit un total de 16,7 millions de couleurs.

Résolution du moniteur

On peut changer le nombre de pixels affichés sur l’écran, et la profondeur en couleurs (control panel)

Selon la résolution, le même document ne s’affiche pas à la même taille sur l’écran. D’où
des surprises au moment de l’impression…

La grande différence : sur un écran, si on a le bon nombre de couleurs, une image à 72 dpi apparaît de très bonne qualité. Sur papier, elle est médiocre.

Pour le web, on utilise des images à 72 dpi, car les fichiers sont beaucoup moins volumineux qu’à 300 dpi. Cela permet
un affichage plus rapide sans perte de qualité visible.

Première distinction : Bitmap/vectoriel

L’image bitmap :

En mode Bitmap, l’image est une : mosaïque de pixels.
Chaque pixel prend une valeur de gris ou de couleur différente

Résolution : Dans une image donnée, tous les pixels sont de taille identique. Mais d’une image à l’autre, la taille des pixels varie. C’est la résolution de l’image.
La résolution s’exprime en dpi (dots per inch, ou point par pouce – ppp- en français).

1 pouce = 2,54 cm

Poids d’une image A4 à 300 dpi : plus de 8 millions de pixels et 24Mo

Règle pour le poids des images : quand on divise la résolution par deux, on divise le poids de l’image par 4. (une image de
10×10 pixels fait 100 pixels, une image de 5×5 fait 25 pixels)

Les logiciels bitmap proposent des outils comme le pinceau, la gomme, l’aérographe. On peut y créer des dégradés,
modifier la couleur des pixels…Un fichier bitmap très agrandi devient « pixellisé ».

Logiciels bitmap : Photoshop, Gimp (gratuit mais complexe)

Photoshop est à l’origine un logiciel bitmap, mais il sait aujourd’hui gérer les deux types d’images

L’image vectorielle

En mode vectoriel, les tracés sont définis par une formule mathématique

Exemple : les polices d’un traitement de texte : on peut les agrandir autant qu’on veut et elles restent lissées, car elles sont vectorielles.

Les logiciels vectoriels permettent de sélectionner une forme (un rond, un tracé), de le déplacer, de le déformer.

Ils permettent de dessiner de nouveaux tracés.

Un dessin vectoriel très agrandi reste parfait, un document bitmap agrandi apparaît « pixellisé », c’est à dire que les carrés dont il est composé apparaissent.

Logiciels vectoriels : Illustrator (illustration), Flash (animation), mais aussi tous les logiciels d’image de synthèse.

Bitmap vs vectoriel : la comparaison

Avantages du bitmap

  • Simplicité du codage de l’image
  • Pas de problème lors de l’impression
  • Chaque pixel peut prendre une valeur différente, il est donc possible d’afficher n’importe quelle image, quelles que soient sa complexité ou ses nuances

Avantages du vectoriel

  • Simple formule mathématique, l’image forme un fichier plus léger
  • Modifications de taille sans perte de qualité
  • Précision et facilité de correction
  • Changements de couleurs et ajouts très simples

Inconvénients du bitmap

  • Perte de qualité si agrandissement
  • Fichiers lourds

Inconvénients du vectoriel

  • Si fichier trop complexe mathématiquement problèmes d’impression (ex critique : les cartes géographiques, où le moindre détail compte)
  • Difficulté à reproduire les nuances (photographiques)

Usages des deux types d’images :

Vectoriel : logos, schémas, dessins techniques, illustration graphique

Bitmap : photos, dessins complexes, tons continus

Seconde distinction RVB/CMJN

RVB

Mode utilisé par les scanners, les appareils photo numériques, l’affichage des images à l’écran, la vidéo, mais aussi par les imprimantes personnelles, même les imprimantes photographiques (y compris celles pour lesquelles on achète
des encres cyan, magenta, jaune et noir) -> couleurs non réfléchies, lumière

Le seul usage qui ne permet pas de rester en mode RVB est l’impression professionnelle en quadrichromie sur films.

En mode RVB, l’image est décomposée en trois couleurs primaires, et chacune des couches est codifiée sur
256 niveaux (8 bits)

Image finale = association des trois couleurs. On parle de synthèse additive car 100% des trois couleurs donne du blanc.

256 niveaux sur trois couches donne 256*256*256 : plus de 16 millions de couleurs.

CMJN

Mode « quadrichromique » – couleurs « réfléchies», solides -> encres, matière

Nécessaire pour l’impression sur papier car si on additionne les trois couleurs, sur un écran cela donne bien du blanc, mais sur papier, l’addition des trois encres donne un résultat sombre proche du noir.

Pour imprimer, il faut utiliser les couleurs complémentaires des couleurs primaires (RVB). Ces couleurs sont le cyan(v+b), le magenta (b+r) et le jaune (r+v)

L’addition des encres donne bien du noir, et le blanc s’obtient en ne mettant aucune encre -> On parle de synthèse soustractive.

Détail additionnel : les pigments de couleurs utilisés dans l’encre d’imprimerie ne sont pas aussi purs que les
pixels sur écran, et certaines teintes ne peuvent donc pas être représentées. Les principales couleurs à
problèmes sont :

  • Vert fluo
  • Bleu électrique
  • Rouge vif
  • Noir (l’addition des trois encres donne en fait un marron sale, et il faut donc utiliser de l’encre noire en plus de c m et j).

Pour ces couleurs à problèmes, on utilise des encres supplémentaires (cyan clair, magenta clair) afin d’élargir
le gamut (espace des couleurs imprimables) de l’imprimante -> hexachromie

Formats de fichiers graphiques

Chaque application a son format de fichier. Il n’est généralement pas possible d’ouvrir un fichier photoshop avec une autre application.
Sur le web en particulier, le format photoshop ne passe pas.

Il faut donc sauver ses images travaillées sous Photoshop dans un format compatible pour cet environnement. Les trois formats d’images qui sont lus par les navigateurs web sont : gif, jpeg et png.

GIF

Graphic Interchange Format – Développé par Compuserve en 1987. L’un des premiers formats universels.

C’est un format compressé : les informations du fichier sont simplifiées pour réduire son poids.

Pour réduire encore le poids, on peut choisir le nombre de couleurs d’un fichier gif, et chercher ainsi un compromis entre
le poids et la fidélité de l’affichage.

Gif : format 8 bits, donc 256 couleurs seulement.

Avantages :

  • Transparence (depuis gif 89)
  • Possibilité de créer des animations
  • Emploi : images avec des aplats, logos, cartoons, photos miniatures

Jpeg

Joint Photographic Experts Group

Format compressé également, mais avec perte d’information (contrairement à GIF).

Pas de transparence

Rend mal les aplats (insère des irrégularités dans une surface de couleur unie)

En revanche : 24 bits, donc 16,7 millions de couleurs affichables.

Emploi : photos, couleurs subtiles.

Problème du jpeg : trouver le bon compromis entre le taux de compression et la qualité de l’image. Il n’y a pas de formule miracle, chaque image est un cas particulier.

PNG

Compression sans perte comme gif, mais 24 bits comme jpeg

Information gamma (permet à l’image de s’afficher avec une brillance différente selon l’écran

Zoomable

Transparence

Anti-aliasing

L’idée est de rendre le tracé bitmap d’un gif plus « doux », au prix de pixels supplémentaires (éviter l’effet d’escalier). Très utile pour un meilleur rendu des typographies (sauf les petites)

Aperçus – Vignettes

même pour des photos, les mettre en gif donne un résultat aussi bon pour un poids moins élevé

Laisser un commentaire

Champs Requis *.