Les images numériques

Avant se lancer dans la réalisation de visuels dans un environnement numérique, il me semble important de maîtrisiez certains concepts de l'infographie, et plus particulièrement des images numériques.

Quelques définitions

Le pixel

Une image numérique est constituée d'un ensemble de points appelés pixels (pour PICture Element). Le pixel représente le plus petit élément constitutif d'une image numérique. L'ensemble de ces pixels est contenu dans un tableau à deux dimensions (hauteur x largeur) constituant l'image.

La définition

On appelle définition le nombre de pixels constituant une image : c'est le nombre de colonnes de l'image que multiplie son nombre de lignes.

Une image dont la définition est 1600x1200 correspond à une image de 1600 pixels en largeur et 1200 pixels en hauteur

Pour un périphérique d'affichage (écran), on note sa définition sous la forme colonne x ligne(ex : 800x600). Pour un périphérique d'acquisition d'image (appareil photo, caméra...), on note le résultat (ex : 16 millions de couleurs)

La résolution

C'est le nombre de pixels par unité de longueur (en pouce). Elle est exprimée en points par pouce (ppp, en anglais: dpi pour Dots Per Inch).

La résolution permet ainsi d'établir le rapport entre la définition en pixels d'une image et la dimension réelle de sa représentation sur un support physique (affichage écran, impression papier...).

Résolution = définition (largeur) / dimension (largeur)

Ex : Pour une image de 300 pixels de large mesurant 2 pouces de coté : résolution = 300 / 2 = 150dpi

Nous privilégierons les valeurs suivantes :

• Affichage sur écran (web, diaporama, fond d’écran, etc.) : 72 ppp.
• Image destinée à une impression de qualité : 300 ppp (on parle de « haute résolution »).
• Pour la presse, ou pour les très grands formats, destinés à être vu de loin, on baissera la résolution : 150 ppp

Résumé

La taille d'une image numérique peut se définir par :

• sa définition en pixels (640x480)
• ses dimensions en pouces ou système métrique (12'' ou 30cm)
• sa résolution en dpi ou ppp. (ex : 300dpi)

Ces 3 informations sont liées. Si vous en connaissez 2, vous pouvez calculer la troisième :

• Résolution = définition / dimension
• Définition = résolution x dimension
• Dimension = résolution / définition

Image bitmap vs. vectorielle

Lorsque l'on affiche une image sur l'écran d'un ordinateur, ce que l'on voit n'est qu'une succession de points. Il existe pourtant deux manières différentes de stocker une image, on parle d'image matricielle ou bitmap ou bien d'image vectorielle.

Image Bitmap

Dans une image bitmap, les points (ou pixels) sont stockés dans une matrice (un tableau). Dans chaque case du tableau se trouve la couleur que l'on doit afficher au point correspondant.

Les images Bitmap sont pleinement adaptées au monde de la photo ou, plus généralement, aux images réalistes.

Hélas, les images Bitmap souffrent du phénomène de pixellisation qui veut que moins l'image est de qualité (faible définition), plus on voit apparaître ces fameux petits carrés. C’est surtout vrai lors des agrandissements ou de l’impression.

En contre partie, plus l’image est de qualité, plus le fichier est volumineux.

Image vectorielle

Dans une image vectorielle, les objets sont constitués de formes géométriques simples, telles que des vecteurs, rectangles, des cercles, des ellipses, etc. Cette image utilise également les pixels, mais cette fois, leur position et leur couleur ne sont pas figées puisqu’elles sont calculées dynamiquement par le logiciel.

Autrement dit, pour afficher une ligne par exemple, le logiciel détermine le point de départ, le point d’arrivée puis la trajectoire à suivre. Ensuite, il calcule et positionne l’ensemble des pixels nécessaires pour afficher cette ligne. Il en va de même pour des formes et des couleurs plus complexes.

Le principal avantage des images vectorielles par rapport aux images bitmap est qu'elles sont redimensionnables sans pertes de qualité.

Les images vectorielles sont adaptées à la création de visuels "simples" (ou non-réalistes) comme des logos, des illustrations, des schémas, des diagrammes etc…

En plus, les images vectorielles s’avèrent plutôt légères.

Les formats d'image

Un format d'image est une représentation informatique de l'image, associée à des informations sur la façon dont l'image est codée et fournissant éventuellement des indications sur la manière de la décoder et de la manipuler.

JPEG (Joint Photographic Expert Group)

Le format JPEG est le plus utilisé lorsqu’il s’agit d’images Bitmap.

Sa particularité est la compression de données, ce qui veut dire qu’il garde toutes les informations visibles et supprime celles que notre œil ne peut pas voir.

Résultat : le fichier est léger et possède une qualité suffisante pour une utilisation digitale. Il peut donc charger rapidement et être utilisé sur toutes les plateformes ayant une limitation de taille. Ce format est également visible sur tous les appareils sans avoir besoin de télécharger un logiciel adapté.

Cependant, il est important de savoir qu’à chaque fois que vous sauvegardez une image en JPEG, elle est à nouveau compressée, ce qui au bout d’un moment peut causer une perte de qualité et donner des images pixélisées.

• Avantages : ficher léger, visible sur presque tous les programmes.
• Inconvénients : perte de qualité lorsque le fichier est sauvegardé plusieurs fois.
• Utilisation Pour des images sur le Web, les images de réseaux sociaux ou portfolios de photos.

PNG (Portable Network Graphics)

Le PNG (dit aussi "PING")est un format qui permet une compression sans perte, c’est-à-dire qu’il supporte des images de haute qualité pour un usage digital en conservant la couleur et la netteté de l’image initiale.

Contrairement au JPEG, le PNG supporte aussi les images avec un fond transparent – ce qui est très utile pour les logos ou vos photos de produits par exemple. Comme on peut s’en douter, il pèse un peu plus lourd que le format précédent. Il est donc déconseillé de charger des centaines d’images en format PNG sur votre site ou portfolio. Vous risquez de saturer l’espace de stockage et d’augmenter de temps de chargement.

• Avantages : image de bonne qualité, supporte les fonds transparents.
• Inconvénients : fichier lourd (prend de l’espace de stockage et met du temps à charger).
• Utilisation : Des logos, photos pour votre site internet, réseaux sociaux (photo de profil, photo de couverture et publications).

GIF (Graphics Interchange Format)

Vous avez probablement déjà entendu parler de ce format grâce à sa fonctionnalité la plus populaire : l’animation.

Le GIF utilise un algorithme de compression sans perte appelé LZW, qui est très approprié pour enregistrer des graphismes avec peu de couleurs, comme des diagrammes, des logos ou des formes simples.

Si l’icône de votre entreprise contient trois couleurs ou moins, le format GIF conviendra parfaitement – de plus, sa petite taille vous permettra de l’utiliser sur toutes les plateformes. En revanche, une image de coucher de soleil sera non seulement trop lourde, mais les couleurs seront aussi déformées à cause de la limitation.

Tout comme le PNG, le GIF supporte les fonds transparents.

• Avantages : supporte les fonds transparents et les animations basiques.
• Inconvénients : couleurs limitées (n’affiche pas bien les dégradés).
• Utilisation : Pour les courtes animations sur les réseaux sociaux, comme Facebook et Twitter.

TIFF (Tagged Image File Format)

Le TIFF ou TIF est un format généralement réservé aux professionnels. C’est une référence pour les images Bitmap de très haute qualité. Il est en effet largement utilisé dans le domaine commercial et le monde de l’impression textile.

Mais la haute définition a un prix, le format TIFF est lourd et il consomme beaucoup d’espace de stockage.

• Avantages : l'excellente qualité de l’image.
• Inconvénients : c’est un fichier très lourd.
• Utilisation : Pour le partage et les impressions de très haute qualité.

PSD (document photoshop)

Ce format est généré par le fameux logiciel de retouche d’images Photoshop. Contrairement aux autres formats de traitement d’images, le PSD est un fichier matriciel, c’est-à-dire composé de pixels.

Le PSD est généralement utilisé pour les photos, qui elles, ne peuvent pas être vectorisées.

• Avantages : les images peuvent être travaillées très précisément.
• Inconvénients : sa taille et vous devez avoir Adobe Photoshop.
• Utilisation : la retouche photo.

AI (Adobe Illustrator)

l’AI est le format créé par défaut lorsque vous utilisez Adobe Illustrator. Il s’agit du logiciel de design vectoriel le plus connu au monde. On appelle design vectoriel des illustrations digitales basées uniquement sur des formes géométriques et des tracés.

Les fichiers AI sont principalement utilisés par des graphistes ou des imprimeurs dans le cadre de campagnes de communication.

• Avantages : permet de redimensionner des images sans altérer la qualité.
• Inconvénients : vous devez avoir Adobe Illustrator.
• Utilisation : pour créer des images vectorielles à utiliser sur tous les supports de communication.

SVG (Scalable Vector Graphics)

Le SVG permet également de sauvegarder et d’afficher des images vectorielles. C’est un format léger pour représenter des formes simples.

Il s’utilise principalement pour afficher des images vectorielles sur les navigateurs web. Codé sous forme des balises, il est léger et peut être facilement animé en CSS et/ou JS.

• Avantages : peut être redimensionné sans perte de qualité.
• Inconvénients : les réseaux sociaux ne supportent pas ce format.
• Utilisation : pour les éléments visuels de votre entreprise : logo, icônes, illustrations, etc.

EPS (Encapsulated Poscript)

Le format EPS est le prédécesseur du PDF. Il rentre également dans la catégorie des fichiers vectoriels, c’est-à-dire redimensionnables à volonté. Il peut être ouvert avec plusieurs logiciels (Illustrator, Freehand ou Adobe Photoshop), ce qui en fait généralement un fichier de partage. Qu’est-ce qui le distingue du fichier AI ? Simplement l’outil sur lequel vous travaillez. Si c’est un logiciel Adobe, vous pouvez vous contenter du .ai. Si en revanche, vous utilisez d’autres outils, préférez le format EPS. Ce sera sans doute un choix plus judicieux pour partager vos images. - Avantages : peut s’ouvrir avec plusieurs logiciels. - Inconvénients : c’est un fichier assez lourd. - Utilisation : ce format est de moins en moins utilisé, il est aujourd’hui remplacé par le PDF.

PDF (Portable Document Format)

Le PDF n'est pas un format d'image à proprement parlé mais un format universel pour tout type de documents.

Ce format a été créé par Adobe. Il est utilisé pour les fichiers en ligne ou destinés à être imprimés. L’idée est de pouvoir partager des documents et de faire en sorte qu’ils restent identiques quel que soit l’appareil sur lequel ils sont affichés. Grâce à la fiabilité du PDF, vous pouvez créer de longs documents sans risquer de perdre votre design ou mise en page (image plus petite, texte qui se déplace, etc.).

Les fichiers PDF peuvent contenir plusieurs éléments différents : texte, photo (image Bitmap), image vectorielle, vidéo, audio et même des éléments interactifs comme des boutons et des formulaires.

Attention, pour pouvoir lire un PDF vous devez installer un lecteur PDF (PDF Reader) sur votre appareil. Notez que désormais les navigateurs savent afficher un PDF.

• Avantages : conserve la mise en page quel que soit l’appareil sur lequel il est affiché.
• Inconvénients : peu… mais vous devez installer un lecteur PDF
• Utilisation : pour les documents à imprimer ou à partager.

Pour cet atelier, il est recommandé de travailler exclusivement avec des formats vectoriels (.svg, .ai, .eps, .pdf).