Pourquoi et comment compresser vos images

Le poids d'une image se mesure en octets. Des images trop volumineuses posent plusieurs problèmes :

  • le temps de chargement de vos planches est long ;
  • cela occupe de la bande passante ;
  • cela prend de la place sur notre serveur ;

Une image trop lourde, est coûteuse :

  • pour les lecteurs : longue à charger, surtout pour les internautes connectés en bas débit qui paient généralement leur accès Internet à la durée ;
  • pour le medium : le webcomic rivalise directement avec les vidéos, jeux interactifs et autres divertissements en ligne, etc. Dans ce combat, sa légèreté est un argument non négligeable ;
  • pour les auteurs : Webcomics.fr est gratuit, mais l'argent ne pousse pas sur les arbres. Un jour ou l'autre nous devrons trouver des sources de rentabilité, or tout ce qui sera englouti dans les coûts d'hébergement ne pourra pas contribuer à professionnaliser les auteurs ;
  • pour nous : le serveur dédié que nous louons n'offre pas un espace ni une bande passante illimités, respectez le.

Après avoir choisi le format de fichier approprié, encore faut-il compresser efficacement ses images :

La compression JPEG

Le format JPEG est un format dit « destructeur », il perd en détail sur l'image tout en restant dans des limites acceptables. Techniquement la compression JPEG commence par découper l'image en blocs plus ou moins grands ; puis il détermine la ou les couleurs principales de ce bloc et les enregistrement. Grossièrement si la couleur principale est verte, il enregistrera du vert pour toute la zone.

On comprend dès lors qu'un fichier JPEG très compressé — et donc léger — puisse être flou, perclus de zones « pixelisées » ou d'artefacts de compression. À l'inverse, un fichier JPEG peu compressé sera très lourd. Aussi, c'est une banalité, mais : il faut chercher le meilleur compromis.

Il est loin le temps où il fallait autant que possible s'en tenir à 50 à 60Ko pour une image de taille raisonnable ! Ne vous inquiétez pas de voir une planche « classique » atteindre 200Ko. Mais si votre planche pèse 500Ko ou plus, à moins d'être immense1, c'est qu'elle n'est pas convenablement compressée !

La base consiste à enregistrer vos fichiers JPEG à une compression de 75% ou 80% (qualité moyenne ou supérieure). Pour aller plus loin, il vous faudra apprivoiser votre logiciel : tous ne sont pas égaux devant la compression. Les plus performants permettent de définir des espaces qui seront moins compressés, ce qui peut être très utile pour afficher des textes très nets tout en compressant un peu plus le reste de l'image.

Le format JPEG produisant des images un peu floues, utilisez la fonction d'accentuation ou d'amélioration de l'image de votre logiciel avant de compresser votre image. Le résultat final sera généralement plus concluant.

Enfin, ne recompressez jamais un fichier déjà compressé ! Les artefacts dûs à la compression se multiplieraient pour produire une image de piètre qualité. Le format JPEG est un format final, pas un format de travail.

La compression PNG

Le format PNG est un format dit « non destructeur », comprenez par là qu'il enregistre rigoureusement la couleur de chaque pixel… Mais alors, comment compresse-t-il une image ? Tout simplement en limitant le nombre de couleurs !

Nous parlons ici du PNG 8 bits2 : ce format permet de limiter la palette à 256 couleurs maximum. Les images produites restent donc aussi nettes que les originales, mais les dégradés seront immanquablement détériorés3.

Moins votre image aura de couleurs et plus elle sera légère.

  • une image en noir et blanc peut bien souvent être réduite à 4 couleurs (noir, blanc et deux gris intermédiaires) ;
  • une images en niveaux de gris ou en camaïeux pourra n'en compter que 16 ;
  • une image plus colorée pourra aisément être limitée à 64, 128 ou 256 couleurs.

Suivant votre logiciel, il vous sera possible d'éditer très finement votre palette, pour supprimer manuellement certaines couleurs.

Le format PNG permet également de produire une image transparente. Soit en « transparence d'index », mieux supportée par les anciens navigateurs (notamment Internet Explorer 6) cette forme de transparence exige de bien surveiller les bordures des zones jouxtant les zones transparentes : des effets d'escalier4 ou de contrastes imprévus peuvent ternir le rendu final. En effet la transparence d'index se contente de rendre une couleur totalement transparente, sans aucun intermédiaire.

Soit en « transparence alpha », pour laquelle la palette peut comporter des transparences intermédiaires (définies en pourcentage) ce qui permet de « lisser » les bordures voire de créer des effets de superpositions5. L'inconvénient est qu'un ancien navigateur (toujours Internet Explorer 6) assimilera toute couleur transparente à une transparence totale, voire remplacera les transparences par un gris des plus disgracieux.

Compresser en PNG 8 bits sous GIMP

  1. Pour compresser convenablement votre image, quel que soit le format de fichier choisi, il est impératif de partir d'une image “source” de qualité. Aussi si vous devez scanner des documents papier, enregistrez les sans aucune compression (par exemple en JPG qualité maximale). Ou mieux, scannez directement vers votre logiciel de traitement d'image si celui-ci vous le permet.
  2. Pour réduire la palette de couleur et ainsi réduire le poids de votre fichier PNG, sous GIMP, il suffit de faire ceci :

> image > mode > couleurs indexées

Après avoir réduit le nombre de couleur et choisi d'activer ou non le tramage, enregistrez votre image au format PNG. Pour encore plus de légéreté, faites plusieurs essais afin de voir celui qui rend le mieux avec un poids de fichier optimum.

PNG Optimizer

Face aux difficultés que beaucoup rencontrent pour compresser en PNG 8 bits, Yanouch a dégotté un petit logiciel efficace pour optimiser des fichiers PNG sous Windows XP : PNG Optimizer.

  1. L'infinite canvas est le bienvenu sur Webcomics.fr ! Cette forme narrative consiste à exploiter le potentiel qu'a l'écran informatique à présenter des espaces virtuellement immenses. Cependant dans ce cas il est conseillé de composer votre planche en plusieurs images.
  2. Il existe également du PNG 24 et 32 bits, mais ces formats créent des fichiers beaucoup trop gros pour le Web.
  3. C'est pourquoi le format JPEG est conseillé si votre image présente une grande variété de textures.
  4. Plus connu de son nom anglais, aliasing et sa solution, l'antialiasing.
  5. Nous parlons là de pratiques réservées aux webdesigners chevronnés