Les images du Web obéissent à des contraintes de format et d'encombrement. Paint Shop Pro permet leur optimisation et gère la transparence supportée par certains formats...

Les formats du Web - Optimisation - Arrière-plan transparent - Images animées

Les formats du Web :

A l'heure actuelle, seuls trois formats d'image sont utilisables sur une page Web : le gif (graphics interchange file, copyrighté par Compuserve Inc.), le jpg ou jpeg (joint photographic experts group) et le png (portable networks graphics).

Gif : utilise une compression non dégradante, limité à 256 couleurs, codable sous 1, 4 ou 8 bits. Dans sa version 89a, il supporte la transparence. Il peut être entrelacé ou non entrelacé [affichage à netteté progressive ou immédiate par le navigateur].

Jpg : utilise une compression dégradante réglable. Toujours codé sous 24 bits (donc 2 ²⁴ = 16,8 millions de couleurs). Il peut être standard ou progressif (l'équivalent de l'entrelacé du gif).

Png : format récent qui n'est lisible que par les navigateurs de dernière génération (donc déconseillé pour l'instant pour un usage sur le Web). Utilise une compression non dégradante. Comme le gif, il supporte la transparence et peut être entrelacé ou non entrelacé.

Optimisation des images :

Choix du format :
Si on ne retient pas le png pour des raisons provisoires de compatibilité, il reste le choix suivant :

• image non dégradée mais limitée à 256 couleurs pour le gif

• image dégradée autorisant environ 16 millions de couleurs pour le jpg
  (il s'agit d'une palette de choix : il y a généralement beaucoup moins de 16 millions de points dans vos images !)

La dégradation des jpg affecte surtout la netteté des traits et contours bien définis : formes géométriques, texte... Inversement, la limitation de couleur des gif affecte surtout les photographies à large palette de couleurs.

Il est donc a priori raisonnable de choisir le format gif pour les dessins "au trait", les logos, les images contenant du texte, les cartes géographiques... et le jpg pour un rendu photographique.

Optimiser les images :
Optimiser une image, c'est lui donner la meilleure qualité possible pour une taille de fichier à télécharger minimale.

Depuis la version 6, un outil spécifique (fichier/exporter/GIF transparent ou fichier JPEG) permet de visualiser avant modification définitive une image gif ou jpg en faisant varier...

• pour les gif : le nombre de couleurs utilisées (entre 3 et 256 pour une image qui n'est pas en noir et blanc) et l'éventuelle transparence (voir ci-dessous)

• pour les jpg : le coefficient de compression - abusivement appelé "taux" dans PSP 6 français mais factor dans la version US - (entre 1 et 99).

...tout en indiquant la taille du futur éventuel fichier correspondant.

Dans les versions précédentes, l'optimisation est un peu plus artisanale. Retenez qu'il n'est pas toujours nécessaire de prévoir 256 couleurs pour une image gif (sujet déjà traité dans "palettes") et qu'il est possible de jouer sur le coefficient de compression des jpg (à choisir au moment de la sauvegarde sous ce format : bouton "options" dans la boîte de dialogue de sauvegarde). Il est difficile de conseiller un coefficient idéal, car cela dépend du contenu de l'image, en particulier de la présence ou non de lignes droites dont la netteté est à préserver. On le fera varier de 10 à 40, pour un compromis raisonnable entre qualité d'image et taille de fichier.

Arrière-plan transparent :

Les images gif à fond transparent sont apparues avec la version 89a de ce format. Destinées aux navigateurs Web, elles conservent leur fond opaque dans les autres applications graphiques (dont Paint Shop Pro d'ailleurs !)

Et tout de suite, évitons l'erreur classique qui consiste à confondre cette possibilité d'arrière-plan transparent avec la possibilité de créer des images à "fond transparent" - donc sous forme de calque - depuis la version 5 de PSP. Ces dernières sont des images provisoires et la "transparence" obtenue disparaîtra dès la sauvegarde de l'image sous un format autre que "psp". Cette "transparence" est visualisée sous l'aspect conventionnel d'un quadrillage dont dimensions et couleur peuvent être personnalisées dans "fichier/préférences/préférences générales du programme et l'onglet "transparence".

Dans le cas des images "à arrière-plan transparent", il ne s'agit pas de calque, mais bien d'une image considérée par PSP comme "arrière-plan" ou image "aplatie", mais où une couleur bien réelle va "disparaître" lors de l'affichage par le navigateur. Il faut indiquer à PSP la couleur qui devra acquérir cette "transparence". L'option "réglage de la transparence" du menu "couleurs" permet de la désigner de plusieurs façons (dont directement "à la pipette" dans PSP 6). La méthode la plus simple et valable dans toutes les versions consiste à sélectionner au préalable la couleur voulue comme "couleur d'arrière-plan", c'est à dire celle qui apparaît dans le rectangle de droite sous la palette de couleurs, puis de cocher l'option "donner à la transparence la valeur de la couleur d'arrière-plan". Vous ne verrez aucune différence, sauf si vous activez l'option de visualisation "couleurs/visualiser la transparence".
Attention, ne prenez pas l'expression "couleur d'arrière-plan" dans le sens "couleur à l'arrière du motif principal". Ce n'est qu'une façon de différencier deux couleurs utilisables simultanément : avant-plan/couleur de gauche/clic gauche et arrière-plan/couleur de droite/clic droit) !

Exemple : 1) je veux rendre "transparent" le jaune du fond de l'image ci-contre.		2) Avec la pipette et le clic droit, je sélectionne ce jaune comme "couleur d'arrière-plan".
3) Puis je "donne à la transparence la valeur" de ce jaune comme décrit ci-dessus. Je ne remarque aucun changement, mais si je choisis l'option de visualisation, ...	...je verrai quelque chose comme cela.	4) Cette image sauvegardée au format gif 89a semblera ne pas avoir de "fond" sur une page web !

Images animées :

La réalisation d'une image animée destinée à une page web n'est pas à proprement parler du ressort de Paint Shop Pro. Au format gif 89a, il s'agit en fait d'une suite d'images affichées successivement. Dans un logiciel traditionnel de dessin, on ne voit que la première image de la suite. Les navigateurs web reconnaissent, eux, l'en-tête spécifique du fichier et les contrôles séparant chaque image pour préciser l'intervalle de temps à respecter avant l'image suivante. La réalisation d'une telle image nécessite un logiciel spécialisé.

Depuis la version 5, Paint Shop Pro est accompagné d'un tel logiciel, Animation Shop. Son apprentissage sort du cadre de ce site. Je préciserai juste que si Animation Shop inclut des outils permettant de créer facilement des déformations d'image et des transitions entre images, il faut se méfier de la taille des fichiers obtenus : tout le monde ne bénéficie pas encore de l'ADSL. Il faut garder à l'esprit que les visiteurs de votre site attendent un chargement rapide des illustrations strictement décoratives ! Par contre, pour une animation classique comptant quelques images, l'usage d'Animation Shop permet une optimisation de la taille du fichier par l'utilisation de la transparence du format 89a, utilisation qui est elle-même "transparente" pour l'utilisateur !

L'animation est compatible avec la transparence, comme vous pouvez le constater sur cet autoportrait !