Vous utilisez probablement des images pour illustrer vos documents, présentations ou articles de blogs. Vous vous demandez parfois quels formats et quelle qualité d’image utiliser ? Comment optimiser la taille de vos fichiers ?
Je vais vous présenter ici les éléments qui vous aideront à mieux comprendre ce qui caractérise les images et les différents formats. Vous serez ainsi plus à même de choisir les caractéristiques et le format d’image les plus adaptés selon les circonstances.
La profondeur des couleurs
Dans la nature, les couleurs forment une palette continue et il existe donc une infinité de tons de couleurs.
Bien que l’informatique ne puisse pas représenter une infinité de couleurs, elle permet tout de même d’en représenter un nombre très élevé, de sorte que l’œil ne puisse plus faire la différence entre deux tons voisins.
La profondeur de couleurs est une mesure du nombre de couleurs utilisées pour représenter une image. Elle 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
Bien entendu, plus la profondeur d’une image est grande, plus le fichier qui stocke cette image est volumineux.
Pour les photos, une profondeur de 24 bits est généralement nécessaire pour avoir une bonne qualité. Tandis que pour des images vectorielles basiques de types icônes, graphiques ou captures d’écrans, une profondeur de couleurs de 8 bits peut suffire selon les cas. Tout dépend du nombre de nuances qu’on souhaite représenter…
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 des tons intermédiaires 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
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 à rendre visible l’arrière plan à travers. Ceci permet notamment d’intégrer un dessin sur un fond coloré sans afficher un carré autour.
Dans l’exemple ci-dessous, les deux images sont sur un même arrière-plan coloré. Sur celle de gauche, aucune zone transparente n’est définie, ce qui fait ressortir le cadre blanc autour de l’image. Tandis que sur celle de droite, tout le cadre autour de la cible est transparent et devient donc invisible.
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 :
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
Écrans
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
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 d’une 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 :
La compression
Les bitmaps
Les images non compressées sont appelées bitmap et les fichiers correspondants ont une extension .bmp. Les fichiers bitmap sont très volumineux, ce qui les rend difficiles à stocker et à échanger par Internet. C’est pourquoi 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.
Pour réduire la taille des fichiers images, on utilise divers algorithmes de compression, avec ou sans perte d’information.
Compression 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, c’est à dire que l’information de chaque pixel de l’image peut être reconstituée.
En revanche, en utilisant une compression avec perte on accepte de perdre un peu d’information, de façon à réduire encore plus la taille du fichier.
Chaque format d’image utilise un algorithme de compression. Et selon le type d’image (photo, icône…etc), certains formats seront plus adaptés que d’autres, comme nous allons le voir.
Les formats d’image pour le web et la bureautique
Les formats d’image classiques
Voici les formats d’images les plus utilisés sur le web et dans les documents de bureautique :
JPEG (ou JPG)
Joint Photographic Experts Group
Format adapté aux photos, qui 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.
Plus de détails sur Wikipedia…
PNG
Portable Network Graphcs
Format adapté aux icônes, graphiques, formes géométriques, captures d’écran… c’est à dire des images dessinées plutôt que des photos. Il gère la transparence.
Plus de détails sur Wikipedia…
GIF
Graphic Interchange Format
Format semblable au png, mais avec une profondeur de couleurs plus faible et une gestion de la transparence très basique. Il permet en revanche d’afficher 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 GIF subsiste uniquement parce qu’il permet de créer des images animées.
Plus de détails sur Wikipedia…
Le format WebP
Caractéristiques
Le WebP est un format plus récent, développé par Google et sorti dans sa première version en septembre 2010.
Il est universel dans le sens où il permet de compresser avec ou sans perte et de gérer les images animées ainsi que la transparence.
Il est également plus performant que ses prédécesseurs en compression. En effet, selon cette page Google, il permet un gain moyen de poids de 26% par rapport au png et de 25 à 34% par rapport au jpeg. Il permet même de créer des images avec zones transparentes 3 fois plus légères qu’en png, en utilisant une compression avec perte !
Support
Le WebP est supporté presque depuis sa sortie par les navigateurs Chrome et Opéra, et plus récemment par Edge (depuis 10/2018) et Firefox (depuis 01/2019). Comme l’indique cette page Wikipédia, il est aussi supporté nativement par Android depuis sa version 4.0 et donc par les navigateurs qui utilisent l’API système, comme Android browser (« Internet »), Chrome Mobile, Zirco Browser et Dolphin. Il n’est en revanche pas encore supporté par Safari au moment où j’écris cet article (03/2019) et rien n’indique qu’il le sera.
En revanche, pas question pour l’instant d’inclure des images WebP dans vos documents Microsoft Office ou LibreOffice par exemple.
Enfin, beaucoup de logiciels de traitement d’images prennent désormais en charge le WebP, que ce soit de façon native ou par des plugins. On peut citer par exemple les logiciels ACDSee, Acorn, Affinity Designer, Darktable, GDAL, GIMP, ImageMagick, IrfanView, Konvertor, Paint.net, Photoshop, Pixelmator, Sketch et XnView.
Tableau résumé des formats d’image
Le tableau ci-dessous résume les principales caractéristiques des différents formats d’image que nous avons vus.
| Format | JEPG | PNG | GIF | WebP |
|---|---|---|---|---|
| Profondeur de couleurs maxi | 24 bits | 32 bits | 8 bits | 24 bits |
| Compression sans perte | – | ✓ | ✓ | ✓ |
| Compression avec perte | ✓ | – | – | ✓ |
| Gestion de la transparence | – | ✓ | ✓ | ✓ |
| Réglage de l’opacité | – | ✓ | – | ✓ |
Test comparatif de compression
Comparons maintenant les tailles de fichiers obtenues pour une même image enregistrée dans les différents formats.
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é.
Voici les résultats que j’ai obtenus en enregistrant cette image dans les différents formats avec le logiciel Paint.Net :
| Format d’image | 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 |
| WebP qualité 85 | 77,5 |
Remarque : avec Paint.Net, pour le png, le niveau de tramage n’est réglable que pour une profondeur de couleurs sur 8 bits
Analyse des résultats
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.
Enfin, l’image WebP est presque 2.3 fois plus légère que l’image jpeg d’origine avec la même qualité, ce qui montre la performance en compression du format WebP.
Attention, 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.
Les 4 étapes pour optimiser le rapport qualité/poids de vos images
Voici les étapes que je vous conseille de suivre dans l’ordre pour optimiser le rapport qualité / poids de vos images :
- Recadrer l’image pour enlever les parties inutiles
- 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)
- Choisir le format le plus adapté en fonction du type d’image et des contraintes de compatibilité. Si le WebP est possible, l’utiliser.
- Adapter le taux de compression ou la profondeur de couleur selon le format choisi
Les deux premières é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é
Conclusion
Cette synthèse sur les formats d’image vous a t-elle été utile ? Pensez-vous avoir l’information nécessaire pour bien gérer vos images dans vos documents ou articles web ? N’hésitez pas m’en dire plus en commentaire !