Source : PC-optimise.info
Date d´impression : 28/03/2024 (09:03:46)
Sommaire : |
---|
Dans le cadre de ce tutoriel, nous allons nous contenter d´explorer le cas des images comportant relativement peu de couleurs : on aura donc des dégradés et un nombre de couleurs limité pour ce qui n´est pas dégradé. Typiquement, cela correspond en fait :
Ces images ont comme principale particularité qu´il existe de nombreux pixels pour lesquels les pixels voisins ont une couleur proche (pour les dégradés) voire identique. Nous ne nous intéresserons pas au cas des photos, vu que logiquement, ces dernières ne présentent généralement pas de zones avec de telles propriétés.
Ci-dessous, voici l´image qui nous servira de base :
Un exemple d´image avec des dégradés (flèche verte et zone encadrée en vert), ou de teintes proches (encadré rouge), du texte et des zones relativement unicolores (cliquer pour agrandir)
Les images ont une profondeur de 24 bits pour une qualité optimale (hormis en photographie où l´on peut aller plus loin), soit 1 octet pour définir la conteneur en rouge, un autre pour le vert et un troisième pour le bleu. Pour définir une image, il suffit alors de donner ces 3 octets pour chaque pixel ! Un calcul rapide montre alors qu´une image de 1280 x 1024 pixels (soit la résolution typique d´un écran de 17 ou 19") nécessite alors 3.9 Mo de données ! Le bitmap (extension BMP) fonctionne ainsi, et donc occupe beaucoup de place, mais l´image n´est pas modifiée.
C´est justement parce que stocker les informations d´une image sous cette forme est peu intéressante qu´un certain nombre de formats ont été mis au point, dont certains plus particulièrement pour le Web : jpg, GIF et plus récement PNG.
Nous allons donc nous intéresser à ces formats bien particuliers, puisque reconnus par tous les navigateurs. Nous inclueront aussi le JPEG 2000, au sens où il commence lui aussi à percer.
Pas de mystère pour représenter rigoureusement la même information, il faut jouer des mathématiques et des propriétés de l´image à traiter. Pour faire simple,
Ces 3 procédés sont les principaux, et on remarque qu´ils se contentent de traduire l´image autrement, sans en altérer le contenu. Pour cette raison, ce sont des algorithmes de compression dits Sans pertes.
Une autre façon de compresser consiste à approximer les pixels par une fonction connue. On y perd de l´information, mais si l´oeil ne peut voir la différence, c´est un peu comme le mp3 en audio comparé au format CD. On parle alors de compression avec pertes. Le lecteur intéressé pour par exemple s´intéresser à la méthode des ondelettes, utilisée par exemple dans le JPEG 2000, et même dans beaucoup d´algorithmes à pertes. La justesse du résultat est paramétrable : plus on augmente la fidélité, plus le fichier devient conséquent en taille. Plus on compresse, et plus l´image se détériore. Reste à voir si pour des images "simples", ce type de compression se montre plus intéressant ou pas que la compression sans pertes.
Le tableau suivant résume les propriétés des différents formats :
Format | Définition | Type de compression | Profondeur des couleurs | Particularités |
---|---|---|---|---|
BMP | BitMaP |
|
|
|
GIF | Graphics Interchange Format |
|
|
|
JPEG | Joint Photographic Experts Group |
|
|
|
JPEG 2000 | Joint Photographic Experts Group 2000 |
|
|
|
PNG | Portable Network Graphics |
|
|
|
Bien que souvent utilisé, nous ne parlerons pas du format TIFF, puisque ce dernier est quasiment inexistant sur Internet.
Etant donné qu´une image est constituée, de façon évidente, des données décrivant l´image, mais aussi de données annexes appelées méta-données(résolution en dpi, copyright...), nous allons utiliser les logiciels suivants, qui éliminent ces données et optimisent le poids de l´image :
Il convient d´abort de donner quelques explications. Afin de comparer le format GIF, dont la profondeur est réduite à 8 bits, avec les autres formats, nous avons donc utilisé le fichier GIF pour générer une image Bitmap et un fichier PNG. Les palettes sont donc exactement les mêmes : la différence de taille est donc uniquement due à la compression. De façon évidente, le passage de 24 bits à 8 bits divise par 3 environ (aux métadonnées près) le poids de l´image au format bitmap.
Comparaison des formats de compression sans perte
Tout d´abort, on remarquera que le JPEG 2000 est mal à l´aise face à PNG qui se révèle très performant : le poids de l´image a été divisé par 20, sans aucune altération ! Entre PNG et GIF, on remarque que c´est à nouveau PNG qui s´en sort mieux : PNG a besoin de 40% d´octets en moins que GIF !
De la courbe de la partie précédente, on remarque que réduire la palette a un effet intéressant sur le poid de l´image. Evidement, on pert des nuances... Le tableau suivant permet d´observer l´influence de la palette selon la profondeur, sur des fichiers PNG. La palette a été générée de façon optimale par un logiciel (Picture Publisher).
4 bits (16 couleurs) | 5 bits (32 couleurs) | 6 bits (64 couleurs) | 7 bits (128 couleurs) | 8 bits (256 couleurs) | 24 bits (16.7 millions de couleurs) |
---|---|---|---|---|---|
28 ko |
31 ko |
34 ko |
37 ko |
42 ko |
84 ko |
Détail sur une zone de l´image
La réduction de la palette a un effet immédiat sur les dégradés : dès 8 bits (soit 256 couleurs), on en remarque les effets sur la partie supérieure de l´image. De façon évidente, plus on réduit le nombre de couleurs, et plus les détails disparaissent... par contre, contrairement à la compression à perte, une couleur uniforme reste uniforme : pour du texte, tant que le fond et le texte interviennent dans deux couleurs différentes, on n´aura aucun soucis à le lire. Par contre, adieu le respect des couleurs !
Les gains sont résumés dans le tableau suivant :
Influence de la profondeur
Comment lire ce graphe ?
Nous allons prendre le cas du PNG 7 bits. Si l´image de départ est un fichier BITMAP de 24 bits, le fichier converti en PNG pèse alors 2.2 % de l´image de départ. Si l´image de départ était déjà en PNG, le fichier final représente alors 44.4% (on divise la taille par un peu plus de 2 en passant de 24 à 7 bits pour notre image, toujours en PNG).
Les fichiers ci-dessous ont été réalisés avec XnView : pour le format JPEG, le mode progressif (qui permet de voir l´image apparaitre au fur et à mesure qu´on l´ouvre) a été désactivé puisque plus gourmand en taille, tandis que l´option Optimiser les tables d´Huffman a été activé.
En partant systématiquement du fichier d´origine, nous avons modifié le taux de compression pour voir comment le poid de l´image évoluait. Le graphe suivant représente la taille finale de l´image en % de l´image de départ (1.6 Mo en BMP).
Comparaison JPEG / JPEG 2000
JPEG 2000 est en effet plus efficace que JPEG... si on compresse fortement, du moins pour nos images qui ne sont pas du tout des photos. Point intéressant, compresser à 97% en JPEG 2000, c´est aussi ne pas compresser du tout, vu que nos fichiers de sortie font la même taille en octets. A 80% de qualité, il y a compétition entre les deux formats, dans le cas de notre image.
L´effet de la compression n´est par contre pas comparable dans les deux cas :
Format | Qualité : 60% | Qualité : 70% | Qualité : 80% | Qualité : 90% | Qualité : 97% | Qualité : sans pertes |
---|---|---|---|---|---|---|
JPEG | 110 ko |
125 ko |
146 ko |
188 ko |
269 ko |
|
JPEG 2000 | 56 ko |
83 ko |
137 ko |
268 ko |
438 ko |
438 ko |
Détail sur une zone de l´image
Dans les deux cas, les dégradés ont un rendu vraiment correct, quelque soit le niveau de compression (voir la zone supérieure de l´image, le dégradé gris vers blanc). A fort niveau de compression, on pert vite des détails avec le JPEG 2000, puisque dans la zone de dessin en nuance de noir (coin inférieur gauche), l´image devient de plus en plus floue. A l´oeil, il est difficile de voir des artefacts de compression pour une qualité supérieure à 90% (188 ko). A 80% de compression, on perd en netteté avec le JPEG 2000 mais les zones de fort contraste sont peu affectées.
Dans notre cas, nous avons au départ une palette réduite. Etant donné qu´on rajoute du bruit avec la compression, la palette va s´enrichir. Pour pouvoir comparer, nous allons reconvertir les images obtenues en PNG. Le graphe suivant donne l´augmentation de la taille des fichiers obtenus, avec pour référence le PNG 24 bits obtenu directement depuis le format Bitmap.
Recomparaison JPEG / JPEG 2000 en PNG
De façon immédiate, le mal est fait : les fichiers sont pour la plupart 6 à 7 fois plus gros que le PNG optimal ! Une fois qu´on a utilisé de la compression à perte, on a ajouté des couleurs aux palettes, et donc la compression sans pertes s´en sort moins bien, même si à l´oeil, la différence n´était pas visible comme avec du JPEG à 97%.
L´évolution du JPEG 2000 confirme qu´on a un bruit dont la fréquence croit lorsqu´on comprime fortement : en effet, lorsque la qualité augmente, la différence avec le PNG "optimal" diminue, ce qui signifie que la palette est de moins en moins altérée. On peut donc arranger un peu les choses avec du JPEG 2000 en applicant un filtre passe haut sur l´image... mais il faut pour cela un logiciel de retouche évolué !
Une seconde conséquence, la baguette magique (Paint.NET par exemple) a tendance à oublier des pixels, et pour cause, ils ont une couleur proche, mais différente... et donc la retouche est quasi impossible !
Une conclusion s´impose donc : on ne convertie en JPEG que lorsqu´on a fini de traiter un fichier... et si ce format est celui qui offre le meilleur poids.
L´image de départ : capture d´écran extraite de Test drive unlimited (309 x 288 pixels, 40 ko)
On remarque que cette image a les propriétés suivantes :
Dans un premier temps, nous allons nous contenter de redimensionner l´image et l´enregistrer de différentes manières :
Les tableaux suivants indiquent la taille des fichiers obtenus selon le format.
JPEG - Evolution en fonction de la qualité | ||||
---|---|---|---|---|
JPEG (90%) - 12.9 ko |
JPEG (80%) - 10.6 ko |
JPEG (70%) - 9.5 ko |
JPEG (50%) - 8.5 octets |
JPEG (30%) - 7.6 ko |
PNG - Modification de la palette | ||||
---|---|---|---|---|
PNG (24 bits) - 32.1 ko |
PNG (256 couleurs) - 10.4 ko |
PNG (64 couleurs) - 8.7 ko |
PNG (32 couleurs) - 6.5 ko |
PNG (16 couleurs) - 4.5 ko |
On remarque que pour satisfaire une taille en dessous de 8 ko, JPEG ne permet pas d´obtenir de résultat satisfisant, car il faut fortement diminuer la qualité...
Pour PNG, c´est totalement différent, au sens où avec une palette de 32 couleurs, on satisfait déjà toutes les conditions, et le résultat est plutôt correct. Quoique... si on y regarde de près, notre petite abeille voit le jaune de son visage vite remplacé par du gris...
Pour peu qu´on jette un oeil attentif aux couleurs lorsqu´on réduit la palette, on se rendra compte que le noir n´est pas parfait (tout comme le rouge) : il y a alternance de plusieurs teintes (2 dans le cas de la palette de 16 couleurs), ce qui n´arrange en rien le poids du fichier, ni l´algorithme qui a été chargé de trouver les couleurs optimales. L´observateur avec un écran convenablement réglé pourra d´ailleurs s´en rendre compte ! Sur l´image ci-dessous, l´une des teintes noires a été remplacée par du gris, et l´une des teintes rouges par du orange.
Mise en évidence des différentes teintes
Nous allons donc chercher à n´avoir qu´un seul rouge et un seul noir ! Pour cela, nous allons repartir de l´image de départ... A titre indicatif, Les manipulations nécessaires sont toutes possibles avec Paint.NET (freeware), au choix près de la taille de la palette. Nous allons donc utiliser dans un premier temps la fonction "baguette magique" pour sélectionner tous les pixels les plus "noirs" et les remplacer par une seule teinte de noir. Idem pour le rouge. On en profitera d´ailleurs pour corriger la trace plus foncée au dessus de l´aile de l´abeille.
L´image de départ (40 ko, JPEG) et la même après avoir retouché le noir et le rouge (51 ko, PNG)
Il est temps de réduire l´image aux dimensions requises : < 150 x 150 pixels. Cette réduction aura aussi pour effet de "lisser" le passage d´une couleur à l´autre. Il faudra cependant faire attention à l´algorithme utilisé : Lanczos rajoute par exemple du bruit sur les pixels environnants, avec un effet comparable à une compression de type JPEG. Etant donné qu´on souhaite réduire la taille de l´image, on se contentera donc d´une approximation linéaire ou bi-linéaire.
Reste à diminuer la taille de la palette !
PNG - Modification de la palette | ||||
---|---|---|---|---|
PNG (24 bits) - 18.7 ko |
PNG (256 couleurs) - 7.2 ko |
PNG (64 couleurs) - 5.9 ko |
PNG (32 couleurs) - 5.0 ko |
PNG (16 couleurs) - 3.8 ko |
Dès qu´on passe en 8 bits, le poids du fichier est déjà acceptable. Cependant, de visu, la différence est maigre avec 16 couleurs, mais des différences apparaissent entre le casque et l´aile de l´abeille. En 16 couleurs, la zone est moins agréable à regarder : il manque des couleurs intermédiaires autour du jaune. En 32 couleurs, c´est par contre satisfaisant.
En jouant de la baguette magique, on peut rattraper certains des défauts introduits par une compression à pertes, et repartir sur une compression sans pertes pour finalement arriver à des fichiers de très petite taille.
Encore une fois, tout est question de palettes, et la partie suivante ne fera que le confirmer !
Les photocopies sont souvent nécessaires... et sont à la base des documents avec peu de couleurs si dépourvus de photographies. Seulement, avec l´impression papier, on introduit du bruit (un peu comme le bruit de compression), dû aux fibres du papier. Lors du passage dans le scanner, on ajoute à nouveau du bruit (capteurs)... et une photocopie qui a l´origine était en noir et blanc prend rapidement beaucoup de place. Nous allons donc nous efforcer d´obtenir un document de très petite taille, et le plus propre possible (au sens du bruit sur l´image).
Cette page a pour but de montrer comment on peut obtenir un résultat de qualité (600 DPI de résolution, fond blanc et net, et texte noir) ne pesant pas très lourd.
Le point de départ, ce sera un la première page du contrat de Club Internet. Ce document a les caractéristiques suivantes :
De part la taille du texte, nous allons donc le scanner en 600 DPI, 24 bits : le fichier pèse alors 107 Mo, pour 35 millions de pixels !
Vue globale de l´entête et de la zone détaillée
On remarque plusieurs choses :
Dans un premier temps, voici les tailles obtenues pour un tel document pour différents formats d´image.
Format | Poids |
---|---|
Bitmap - 24 bits | 107 Mo |
Bitmap - 8 bits nuance de gris | 34.1 Mo |
JPEG - 8 bits nuance de gris (qualité de 80%) | 7.5 Mo |
JPEG 2000 - 8 bits nuance de gris (qualité de 80%) | 8.8 Mo |
PNG - 8 bits nuance de gris | 22.1 Mo |
Conclusion, c´est bien trop lourd ! Nous allons donc tenter de rattraper l´image !
On notera qu´avec une palette en nuances de gris, la couleur de valeur "0" correspond au noir et le "255" au blanc.
Dès à présent, il faut travailler avec un format SANS pertes à partir du format en nuances de gris (8 bits, BMP), car nous allons effectuer plusieurs retouches. Le BitMap, bien que plus lourd, se montrera comme le candidat idéal, car son traitement est vraiment rapide.
Premier constat : on a nécessairement plein de teintes pour les zones "blanches" correspondant au papier, et réciproquement, pareil pour les caractères avec le noir. Dans un premier temps, nous allons redresser un peu le contraste et ajuster la luminosité (on sature donc les blancs et les noirs) :
Détail de la même zone scannée, après ajustement du contaste et de la luminosité
Format | Poids |
---|---|
JPEG - 8 bits nuance de gris (qualité de 80%) | 4.7 Mo |
JPEG 2000 - 8 bits nuance de gris (qualité de 80%) | 8.3 Mo |
PNG - 8 bits nuance de gris | 5.5 Mo |
Après avoir retouche un peu le contraste et la luminosité
Le nombre de couleurs a nécessairement réduit, puisque le format PNG se comporte un peu mieux, mais la taille des fichiers reste tout de même conséquente...
On remarque toujours que les zones blanches ne sont pas parfaites (comme le noir). Nous allons donc utiliser un système de seuil pour effectuer les tâches suivantes :
Ces fonctions sont disponibles dans Corel Photopaint (et certainement tout logiciel qui se respecte).
Détail de la même zone scannée, après ajustement des seuils
Format | Poids |
---|---|
JPEG (qualité de 80%) | 5.5 Mo |
JPEG 2000 (qualité de 80%) | 8.2 Mo |
PNG - 8 bits nuance de gris | 2.1 Mo |
Après ajustement des seuils
On remarque le comportement de JPEG un peu "étrange" : la taille du fichier augmente un peu. Pour JPEG 2000, on a toujours un fichier d´une taille similaire. Par contre, pour PNG, c´est de mieux en mieux : on a déja un ratio de 50 sur la compression.
Désormais, les couleurs possibles s´étendent de 80 à 180, en plus de 0 et 255. Il n´est pas vraiment utile d´avoir une résolution en couleur très importante pour une simple photocopie... Nous allons donc réduire encore la palette en ne conservant que 4 couleurs en tout et pour tout (blanc, noir et deux intermédiaires).
Détail de la même zone scannée, après réduction de la palette
Format | Poids |
---|---|
JPEG (qualité de 80%) | 5.6 Mo |
JPEG 2000 (qualité de 80%) | 8.0 Mo |
PNG | 1.2 Mo |
Détail de la même zone scannée, après réduction de la palette
Le résultat est honnête avec un ratio de 90, imprimé avec pdf creator (d´après la taille du fichier, la compression est similaire au PNG). Acrobat reader s´occupant d´effectuer un lissage, le résultat est d´autant plus lisible.
Résultat d´une photocopie (cliquer pour voir en PDF)
A titre indicatif, il faud compresser avec une qualité de 8% l´image bitmap de départ pour obtenir le même ratio avec du JPEG. Au niveau rendu, il suffit de regarder l´image ci-dessous pour se faire une idées des dégâts !
Détail de la même zone scannée, en JPEG avec une qualité de 8%
Il est temps de conclure...
Tout d´abort, quel format utiliser ? La réponse est évidente, le PNG pour tout ce qui n´est pas photo. Plus efficace que GIF et compression sans pertes font de ce format l´outil idéal, quelque soit le type d´utilisateur, d´autant que la palette n´est pas limitante. Pour le graphiste, la gestion de la transparence (non évoquée ici) est aussi un point intéressant. C´est d´ailleurs fortement utilisé sur ce site ! Il suffit de changer de thème pour constater que le fond de certaines images change aussi de couleur.
Afin de réduire encore la taille des images, on pourra tenter de réduire le nombre de couleurs de l´image, solution qui s´adaptera bien s´il n´y a pas de zones contrastées.
Avec un outil gratuit comme PNGOptimizer, qui parvient à alléger les fichiers PNG jusqu´à 30% selon le logiciel ayant généré l´image, on obtient des fichiers vraiment compacts. Simple d´utilisation, cet outil est tout simplement indispensable !
PNGOptimizer |
---|
Enfin, le PNG étant un format libre, on peut l´utiliser sur des sites publics sans aucune restriction !
Concernant l´autre point évoqué, à savoir réaliser une copie d´un document, on peut facilement obtenir un résultat très probant en retouchant sommairement les palettes. Parmi les gestes à éviter : compresser à pertes à une étape ou une autre. D´ailleurs, on retiendra que si on cherche à réduire la palette, la taille des fichiers obtenu par les compressions à perte varie en fait peu...
Avez-vous apprécié l´absence de publicité sur ce site ?
La publicité est utilisée sur les sites internet pour financer les frais d´hébergement et de fonctionnement. PC-Optimise préférant que ses lecteurs ne soient pas importunés par ces contenus non désirés, c´est un système de dons qui a été mis en place, le reste des dépenses restant à la charge de l´auteur. Si vous avez apprécié, vous pouvez donc contribuer à travers un don via PayPal.