Choisir les bons formats d’images pour vos illustrations

Choisir les bons formats d’images pour vos illustrations

Vous utilisez probablement des images pour illustrer vos documents, présentations ou articles de blogs. Vous vous demandez parfois quel format et quelle qualité d’image utiliser ? Ou bien comment optimiser la taille de vos fichiers ?
Alors vous êtes au bon endroit, car vous allez découvrir ici les notions indispensables à connaître sur les images, et comment faire les bons choix de format.

La profondeur des couleurs

Dans la nature, il existe une infinité de tons de couleurs. Les couleurs forment une palette continue.
En informatique, on ne peut pas avoir une infinité de couleurs, mais on peut en avoir un nombre plus ou moins élevé, de façon à retranscrire plus ou moins fidèlement la réalité. Cependant, plus le nombre de couleurs utilisé est élevé, plus le fichier qui stocke l’image est gros.

La profondeur de couleurs est traduite en informatique par un nombre de bits (un bit est une information binaire qui vaut 0 ou 1) :

  • 8 bits permettent d’avoir une palette de 2^8 = 256 couleurs
  • 24 bits permettent d’avoir une palette de 2^24 = 16 777 216 couleurs
  • 32 bits permettent d’avoir une palette de 2^32 ~ 4 milliards de couleurs

A savoir :
Pour les photos, on utilise généralement une profondeur de 24 bits.
Pour des images vectorielles tels que des icônes, des graphiques et des captures d’écrans, une profondeur de couleurs de 8 bits est généralement suffisante.

Le tramage

Lorsqu’on utilise une profondeur de couleurs de 8 bits, on ne dispose que de 256 couleurs, et certaines tons ne peuvent pas être représentés fidèlement.
Le tramage est une technique qui sert à simuler ces tons pour réaliser des dégradés plus fins et donner l’impression d’une meilleure continuité des couleurs.
Elle consiste à utiliser des pixels adjacents de tons différents pour donner l’impression d’une troisième couleur.
Plus le tramage est élevé, plus le dégradé obtenu sera fin, mais plus la taille du fichier sera grande

Les images ci-dessus sont en 256 couleurs avec un tramage permettant de simuler les différents tons de violet. Le tramage est plus élevé dans l’image de droite

Image tramée faiblement et fortement

La transparence

Certains formats comme le png et le gif gèrent la transparence. C’est-à-dire qu’il est possible de définir des zones transparentes dans l’image, de façon à ce qu’on puisse voir l’arrière plan à travers. Ceci permet notamment d’intégrer un dessin sur un fond coloré sans affichage d’un carré autour

Dans l’exemple ci-dessous, les deux images sont sur un même arrière-plan coloré. Dans celle de gauche, aucune zone transparente n’est définie, ce qui fait ressortir le cadre blanc autour de l’image. Dans celle de droite, tout le cadre autour de la cible est transparent et devient donc invisible.

Image sans et avec zone transparente

Le format png permet de définir des zones totalement transparentes, mais aussi des zones partiellement opaques, c’est à dire translucides. On spécifie pour cela un degré d’opacité compris entre 0 et 255.

Dans l’exemple ci-dessous, on reprend l’image de droite précédente en diminuant cette fois l’opacité de la cible elle-même :

Image avec zones totalement transparente et translucide

La taille (résolution) en pixels

En informatique, la largeur et la hauteur d’une image s’expriment en pixels. Le pixel est le plus petit point représentable sur un écran ou captable par un appareil photo.

Exemple : une image de 3500 x 2000 signifie qu’elle fait 3500 pixels en largeur et 2000 en hauteur. Elle possède donc en tout 3500*2000=7 millions de pixels

Cette taille en pixels est appelée aussi résolution (à tort, car on confond du coup avec la « vraie » notion de résolution qui mesure la finesse de l’image et s’exprime en pixels par pouce).

Appareils photos et caméras

La résolution d’un appareil photo ou d’une caméra est plutôt exprimée par le nombre total de pixels que possède son capteur CCD. Cela détermine la résolution maximale des images qu’il peut produire.

Exemple : un appareil de 16 Mpx possède environ 16 millions de pixels et peut produire au maximum des images de 5461 x 3072 pixels au format 16/9
En effet, 5461*3072 = 16 776 192 et 5461/3072=16/9

Ecrans

La résolution d’un écran est le nombre de pixels qu’il possède en largeur et en hauteur.
Un écran Full HD a une résolution de 1920 x 1080 pixels
Un écran 4K a une résolution de 3840 x 2160 pixels. C’est le double des valeurs précédentes, ce qui signifie qu’il a au total 4 fois plus de pixels qu’un écran Full HD, d’où le nom de 4K.
L’image ci-dessous illustre les tailles relatives des résolutions d’écrans standards :

Les résolutions d’écrans standards

Lorsqu’on affiche une image dont la résolution en pixels est supérieure à celle de l’écran, on ne peut donc pas la voir en entier, à moins de faire un zoom arrière.

La résolution en points par pouce

La résolution en points par pouces (PPP) ou dots per inch (DPI) en anglais, a une incidence sur l’impression de l’image.

A dimensions égales, plus la résolution dune image est élevée, plus ses points sont concentrés sur une petite surface, donc plus l’image est petite une fois imprimée.

Exemple : prenons trois images de même taille (500 x 500 px) et même qualité avec des résolutions respectives de 40, 60 et 96 DPI.
Les trois images s’affichent de façon identique à l’écran, mais voici leurs aperçus avant impression :

Aperçus avant impression de trois images de même tailles mais de résolutions différentes

La compression

En informatique, on cherche généralement à réduire la taille des fichiers, de façon à optimiser l’espace de stockage et le temps de téléchargement des fichiers par Internet.
La compression est un traitement informatique qui vise à réduire la taille des fichiers images. Elle peut se faire avec ou sans perte.

Une compression sans perte optimise la façon de représenter les informations contenues dans l’image (formes, couleurs…) selon un algorithme plus ou moins élaboré, mais sans aucune perte d’information.

Une compression avec perte fait la même chose, mais en acceptant en plus de perdre un peu d’information, de façon à obtenir une taille de fichier encore plus réduite.

Une image non compressée est appelée bitmap. Les fichiers bitmap ont une extension .bmp et sont évidemment très volumineux. On peut utiliser ce format comme étape intermédiaire avant traitement par divers logiciels, mais il n’a aucun intérêt pour le stockage ou l’échange des fichiers.

Chaque format d’image a un algorithme de compression plus ou moins adapté aux différents types d’images, comme nous allons le voir plus bas.

Les formats

Les plus courants

Les formats d’images les plus utilisés sur le web et dans les documents de bureautique sont :

  • JPEG (Joint Photographic Experts Group) – abrégé aussi en JPG : format adapté aux photos. Utilise un algorithme de compression avec perte. On peut choisir un niveau de qualité entre 1 et 100. Plus le niveau de qualité est élevé, moins il y a de perte, mais plus le fichier est gros.
  • PNG (Portable Network Graphcs) : adapté aux icônes, graphiques, formes géométriques, captures d’écran, c’est à dire des images dessinées plutôt que des photos.
  • GIF (Graphic Interchange Format) : idem au png, mais pour des images avec une profondeur de couleurs réduite. Permet en plus de faire des images animées

GIF est un format ancien qui a été supplanté par PNG, car ce dernier supporte une palette de couleurs bien plus grande et gère mieux la transparence (meilleur fondu avec l’arrière-plan). Le principal intérêt du format GIF est de gérer des images animées.

Comparaison

Format JEPG PNG GIF
Profondeur de couleurs maxi
24 bits
32 bits
8 bits
Compression sans perte N O O
Gère la transparence N O O
Réglage de l’opacité N O N

Comparons maintenant les tailles de fichiers obtenues.
Pour cela, partons de l’image jpeg ci-dessous en taille 1500 x 1500 px, avec une profondeur de couleurs de 24 bits et une qualité de 85 :

Cette image est intéressante, car elle est à mi-chemin entre un dessin et une photo. C’est à dire qu’elle a beaucoup de formes géométriques et peu de couleurs différentes, mais tout de même une certaine complexité.

Lorsqu’on enregistre cette image dans les différents formats, avec différents réglages, voici ce qu’on obtient :

Format Taille fichier (Ko)
Jpeg qualité 85 (image d’origine)
177
Png 8 bits tramage 7 145
Png 8 bits tramage 8 183
Png 24 bits 705
Gif tramage 7 153
Gif tramage 8 176

NB/ Dans le logiciel que j’ai utilisé, en png, le niveau de tramage n’est réglable que pour une profondeur de couleurs sur 8 bits

Analyse du résultat

Comme l’image a peu de couleurs différentes, le choix de la profondeur de couleurs a beaucoup d’impact sur sa compressibilité. En png, avec une profondeur de 24 bits, le fichier est quasiment 4 fois plus gros qu’avec une profondeur de 8 bits

A profondeur de couleur égale, les formats png et gif donnent des tailles de fichiers similaires à 5% près. On voit que le gif est un peu plus performant que le png en tramage 7 et un peu moins en tramage 8.

Bien que l’image jpeg ait une profondeur de couleur de 24 bits, elle est un peu plus légère que l’image png 8 bits. C’est la valeur de qualité 85 qui permet cela.

Attentions, les résultats ci-dessus sont propres à l’image choisie. Ils ne sont pas transposables directement à toutes les images, mais ils donnent des indications intéressantes pour comprendre l’influence des différents facteurs sur la taille de l’image.

Optimiser le rapport qualité/taille d’une image

Voici les étapes que je vous conseille de faire dans l’ordre pour optimiser le rapport qualité / taille des vos images :

  1. Recadrer l’image pour enlever les parties inutiles
  2. Réduire sa taille (inutile par exemple d’avoir une image de 1500 x 1500 pixels, si c’est pour l’afficher dans un document ou un article en 600 x 600 pixels)
  3. Choisir le format le plus adapté au type d’image
  4. Adapter le taux de compression ou la profondeur de couleur selon le format choisi

Les deux première étapes sont généralement celles qui ont le plus gros impact. Ensuite, il n’est pas toujours facile de choisir entre png et jpeg. Dans ce cas, n’hésitez pas à faire des essais pour trouver le format le plus adapté.

Voilà, cette petite synthèse sur les formats d’images se termine. Si vous avez des bonnes pratiques ou astuces concernant l’optimisation de vos images, n’hésitez pas à les partager en commentaire !

Cyril

Administrateur du site office-in

Laisser un commentaire

Fermer le menu