Accueil Recherche | Plan Technique | Liens | Actualités | Formation | Emploi | Forums | Base
logo CERIG NOTE TECHNIQUE Cerig 
Vous êtes ici : Accueil > Technique > Internet et le web > L'optimisation des images pour le web           Révision : 3 février 2015
Note précédente Liste des notes     L'optimisation des images pour le web
(fin)
    Page technique Note suivante
 
Jean-Claude Sohm (CERIG / EFPG)
(15 octobre 2003)
 

Vers le début de la note...
 

La stratégie de création de l'image

Comme nous l'avons vu précédemment, changer l'échelle d'une image matricielle est presque toujours une mauvaise opération. C'est pourquoi il est généralement conseillé de créer l'image dans un logiciel de dessin vectoriel (le plus célèbre étant Illustrator de l'éditeur Adobe), puis d'ajuster ses dimensions avant de l'enregistrer sous forme matricielle.

Cette façon de procéder est particulièrement indiquée pour les logos et les images similaires. Pour les images à caractère technique, par contre, nous la déconseillons fortement. De tels dessins contiennent souvent de nombreux éléments qui n'ont pas besoin d'être lissés (cadre, axes, graduations, quadrillage, traits horizontaux ou verticaux, texte, etc.), et qui vont l'être de manière intempestive lors de la pixellisation. On peut ainsi doubler inutilement -- voire tripler dans le cas d'un "flow-sheet" par exemple -- la taille de l'image GIF résultante. Nous sommes donc amenés à conclure que les images à caractère technique devraient être créées, à leur échelle définitive, dans un logiciel de dessin matriciel (le plus célèbre étant Photoshop de l'éditeur Adobe).

En fait, la meilleure façon de procéder consiste souvent à utiliser une méthode mixte. On crée directement sous forme matricielle, à leur échelle définitive, les éléments de l'image qui n'ont pas besoin d'être lissés. On crée sous forme vectorielle les éléments de l'image qui seront certainement lissés, puis on règle leurs dimensions avant (ou parfois après) importation dans le logiciel de dessin matriciel, lequel effectue leur pixellisation.
 

Le tramage

Cette technique permet de créer une nouvelle couleur en mélangeant intimement des pixels de deux couleurs différentes. Elle fut très utilisée à l'époque où les cartes graphiques des ordinateurs courants ne permettaient pas d'afficher plus de 256 couleurs différentes. Aujourd'hui, 98 % des internautes voient le web en 32K couleurs ou plus, si bien que le tramage a beaucoup perdu de son importance.

Bien entendu, le tramage rend l'image GIF plus complexe, donc plus lourde, comme le montre l'exemple ci-dessous. En mélangeant des pixels bleus et des pixels verts, nous avons reconstitué une teinte cyan -- avec un aspect pointillé légèrement désagréable (image de gauche). L'image de droite représente une teinte cyan très voisine, réalisée sous forme d'un aplat. Comme nous pouvons le constater, le tramage alourdit l'image.

2 couleurs
185 octets
1 couleur
102 octets
image tramée image non tramée

Certains créateurs utilisent cependant le tramage dans le but de réduire la formation de bandes (banding) à l'affichage des images gif. Ces bandes apparaissent dans les dégradés lorsque le nombre de couleurs de l'image est insuffisant. L'expérience montre qu'il vaut généralement mieux augmenter le nombre de couleurs (quand c'est possible) et ne pas tramer, que diminuer le nombre de couleurs et tramer pour compenser le banding.
 

Le volume d'information

Une image GIF contenant un seul pixel pèse 35 octets, quelle que soit sa couleur. Si nous la déclarons transparente, son poids atteint 43 octets. Nous obtenons ainsi la fameuse "image vide", souvent utilisée dans la présentation des pages web pour régler une marge, une largeur de colonne dans un tableau, un interligne entre paragraphe, un retrait, etc. et mesurer l'audience d'une page par la technique des marqueurs.

En l'absence de compression, la taille d'une image varie comme le produit de ses dimensions exprimées en pixels ; une image agrandie dix fois pèse donc cent fois plus lourd. La compression change tout, comme le montre la figure ci-dessous à gauche. Nous avons représenté la variation de poids (en octets) d'une image GIF carrée monochrome en fonction de sa taille (en pixels). Nous voyons d'une part que la variation est presque linéaire, et d'autre part que l'image pèse peu quand elle ne contient pas d'information.

Poids vs taille d'une image gif monochrome           Poids image vs taille du texte

La figure de droite (ci-dessus) a été obtenue en introduisant un texte de longueur variable dans une image de taille fixe. Le texte était constitué de caractères de 20 pts, gras et lissés ; l'image avait pour dimensions 200 x 100 pixels. Nous voyons que la taille de l'image GIF résultante croît de manière quasi linéaire avec le nombre de caractères, c'est à dire avec la quantité d'information. Le poids de l'image vide (207 octets) devient vite négligeable devant le poids de l'information, dès que celle-ci prend un peu d'ampleur.

Par conséquent : le poids d'une image gif est principalement déterminé par la quantité d'information qu'elle contient. Pour maintenir ce poids dans des limites raisonnables, il faut restreindre l'information au strict minimum. Pas de fioritures, pas de complications inutiles, éventuellement pas de titre (ce dernier peut être incorporé dans la page web), le moins de lissage possible et -- en dernier recours -- pas de lissage du tout. Quand elle passe par la web, la communication graphique doit être relativement dépouillée, si l'on veut être sûr qu'elle atteigne l'internaute.
 

Le texte

Pour lutter contre le poids des fichiers, il faut éviter le plus possible de transformer du texte en image. Il existe cependant de nombreux cas où la présence de texte dans une image est inévitable. Ainsi, dans un graphique, il faut indiquer les noms des axes et les valeurs de leur graduation. Dans un schéma, il faut nommer les différents parties. Un logo comporte en clair le nom de l'organisme qu'il symbolise, etc.

Pour que l'image pèse le moins possible, il faut écrire en petits caractères, utiliser une police sans empattements (arial, tahoma, verdana, etc.), éviter les caractères gras, et ne pas lisser. De la figure ci-dessous (gauche) nous tirons les enseignements suivants :

    il ne faut pas descendre en dessous du corps 9 pour que le texte reste lisible ;
  le lissage du texte donne une impression de flou désagréable ;
  mieux vaut éviter les caractères gras. Si l'on veut absolument écrire en gras, mieux vaut alors lisser ;
  les polices conçues spécialement pour le web (Tahoma, Verdana) fournissent un texte plus facile à lire.
 
       

Il ne faut pas hésiter à transformer le texte en image (le "Rendu du calque" de Photoshop) pour régler l'approche entre caractères et la distance entre mots (figure ci-dessus à droite), du moins lorsque le texte n'est pas lissé.
 

Les dégradés

Il est fréquent que, dans une image, la présence d'un dégradé n'apporte pas d'information supplémentaire. S'il est uniquement là pour "faire joli", mieux vaut le supprimer, surtout si l'on trouve l'image un peu lourde. Mais... un dégradé léger en fond d'image, ou une ombre dégradée pour donner du relief à un objet, c'est bien tentant ! Voyons un peu quelle est l'incidence d'un dégradé linéaire sur le devis de poids d'une image GIF.

Pour ceux qui dessinent dans Photoshop, le dégradé linéaire contient un piège, comme le montre l'exemple suivant. Si nous utilisons ce logiciel pour créer un dégradé linéaire horizontal sur toute la largeur d'une image de 30x30 pixels, et si nous passons en mode couleurs indexées, nous avons une grosse surprise : l'image contient 110 couleurs différentes ! Comment peut-on loger 110 couleurs dans 30 pixels ? Si l'on examine l'image de près, le mystère s'éclaircit : la couleur change légèrement dans le sens vertical, alors qu'elle ne le devrait pas. L'outil dégradé linéaire de Photoshop ne fonctionne pas proprement, et cette situation se transmet de version en version.

Pour être sûr de disposer d'un dégradé horizontal parfait, nous avons donc coloré pixel par pixel une image de 250x1 pixels (représentée ci-dessous agrandie d'un facteur 2). Evidemment, pour ce faire, il faut un peu de patience...

Par des opérations de copier-coller successives, nous avons porté sa hauteur à 250 pixels. Dans cette image nous avons découpé des images carrées de taille inférieure. Pour chaque nouvelle image, nous avons créé une copie que nous avons fait tourner de 90 degrés. Nous avons ensuite enregistré toutes ces images au format GIF, sans diminution du nombre des couleurs (nombre qui est égal au nombre de pixels du côté de l'image). C'est ainsi que nous avons collecté les données qui sont à l'origine de la figure représentée ci-dessous. Sans ces précautions, les dégradés linéaires générés dans Photoshop pèsent beaucoup plus lourd.

Effet d'un dégradé sur le poids de l'image

Nous voyons que le poids d'un dégradé devient vite important lorsque ses dimensions augmentent, et que le phénomène est plus marqué pour le dégradé horizontal que pour le dégradé vertical. Si nous ajoutons à ce défaut le risque de formation de bandes, nous retrouvons une conclusion connue : sur le web, il faut se contenter de dégradés courts -- ceux que l'on trouve dans les ombres destinées à donner l'impression du relief, par exemple.
 

La taille de la palette

La palette d'une image gif peut contenir au maximum 256 couleurs. Quand on réduit le nombre de couleurs dans la palette, on diminue le poids de l'image pour deux raisons :

    on gagne 3 octets par couleur supprimée (la taille de la palette diminue) ;
  on simplifie l'image, ce qui rend la compression LZW plus efficace.

Ci-dessous, nous avons représenté une image et sa palette (les deux carrés noirs correspondent à des couleurs non utilisées). Comme nous pouvons le constater, certaines couleurs de la palette sont très proches les unes des autres. Il en résulte qu'il est possible de réduire le nombre de couleurs, sans que l'aspect de l'image s'en trouve dégradé de manière visible.

Image (4199 octets) Palette (222 couleurs)

L'examen attentif des images ci-dessous révèle que la qualité commence à baisser de façon visible quand on descend à 32 couleurs, ou plus encore à 16 couleurs. Si nous optons pour l'image GIF à 32 couleurs, nous économisons 1589 octets, soit 38 % du poids de l'image d'origine.

4199 octets 3880 octets 3263 octets 2608 octets 1846 octets 1322 octets
222 couleurs 128 couleurs 64 couleurs 32 couleurs 16 couleurs 8 couleurs

La figure ci-dessous (gauche) représente la variation du poids de la précédente image gif en fonction du nombre de ses couleurs. Nous avons également représenté les rôles respectifs de la palette et de la compression dans la diminution de poids de l'image lorsque le nombre de couleurs décroît. La figure de droite (ci-dessous) montre que le poids de l'image GIF varie de manière logarithmique avec le nombre de couleurs de sa palette.

     

On notera que le logiciel Photoshop permet d'influencer la formation de la palette, en présélectionnant les zones importantes de l'image avant de passer au mode "Couleurs indexées...". On peut aussi modifier les couleurs de la palette en cliquant dessus pour appeler le sélecteur de couleurs. On peut enfin verrouiller une couleur quand on réduit la taille de la palette.
 

Le format GIF entrelacé

On peut faire en sorte qu'une image GIF s'affiche de manière progressive, en quatre passes au maximum. L'internaute voit peu à peu la résolution de l'image s'améliorer, et peut arrêter le téléchargement en cours de route s'il juge que l'image ne l'intéresse pas. Le créateur doit choisir le format "GIF entrelacé" au moment où il enregistre l'image.

En règle générale, le choix du format entrelacé alourdit quelque peu l'image, mais ce d'une manière assez imprévisible, comme le montre la figure ci-dessous (gauche). La courbe violette représente l'augmentation de poids résultant du format entrelacé en fonction de la taille de l'image. Cette dernière est un carré blanc de 200 pixels de côté, dans lequel sont emboîtés des cercles colorés (ci-dessous, droite). Nous avons fait varier la taille de l'image en modifiant le nombre de cercles.

Augmentation de poids due à l'entrelacement

La droite des moindres carrés (couleur bleu-vert) correspond à une augmentation moyenne de poids voisine de 3 %, mais il existe de très grandes variations d'un poids d'image à l'autre. Il existe même des cas pour lesquels l'image entrelacée est un peu plus légère que l'image normale. L'expérience montre que, pour une image de poids notable (30-50 Ko), l'entrelacement peut facilement faire croître le poids de 5-6 %.

La figure ci-dessus montre que deux politiques peuvent être préconisées quant à l'entrelacement des images GIF, et qu'il est bien difficile de recommander l'une plutôt que l'autre :

    toujours entrelacer, en partant du fait que si l'entrelacement n'a pas d'intérêt pratique pour les images de faible poids, il n'augmente pas ce dernier de manière sensible (quand il ne le diminue pas un peu) ;
  entrelacer seulement au-dessus d'un certain seuil, 20-30 Ko par exemple.

Remarque : l'image ci-dessus à droite fournit un exemple d'illusion optique. Tous les cercles ont la même épaisseur (1 pixel), mais les cercles jaunes paraissent plus larges que les autres (cyan, magenta et noir).
 

La transparence (GIF 89a)

Il est possible, depuis l'introduction du format GIF 89a, de déclarer transparente soit une zone d'une image GIF, soit une ou plusieurs couleurs de sa palette. L'effet sur le poids de l'image est fort modeste ; il se traduit par une augmentation de quelques centaines d'octets tout au plus, comme le montre la courbe violette de la figure ci-dessous. Cette figure se rapporte à la série de cercles déjà utilisés dans le paragraphe précédent ; nous avons rendu transparente la zone comprise entre le plus grand cercle et les bords de l'image.

Augmentation de poids due à la transparence

La droite des moindres carrés tracée en bleu-vert sur la figure ci-dessus montre que l'augmentation de poids due à l'introduction de transparence est à peu près indépendante du poids de l'image (sauf pour les images les plus légères, l'image vide par exemple), même s'il existe de grandes variations d'une image à l'autre.
 

Conclusions

L'optimisation d'une image GIF destinée au web commence à la conception même. Le message graphique que l'on veut transmettre à l'internaute doit être clair, simple et dépouillé d'artifices inutiles. Le texte doit être réduit au minimum indispensable, et il faut utiliser des caractères de petite taille. Il faut éviter tout lissage intempestif. Il ne faut pas hésiter, par contre, à utiliser la couleur, qui rend le message plus clair et plus agréable.

Régler le nombre de couleurs de la palette conduit à des règles pratiques que l'on peut énoncer ainsi :

    pour les petites images (poids inférieur à 1 Ko environ), on conserve la palette telle quelle, le gain de poids associé à une diminution du nombre de couleurs étant de toutes façons négligeable ;
  pour les images de taille supérieure, on cherche à réduire le nombre de couleurs dans la palette, en réalisant un compromis entre la qualité de l'image et son poids ;
  pour les images lourdes (plusieurs dizaines de Ko), on sacrifie la qualité à la légèreté en évitant tout lissage, et on conserve la palette telle quelle.

Enfin, il faut se rappeler qu'une image GIF bien faite pèse toujours moins lourd qu'un brouillon réalisé trop rapidement. Sur le Web, la qualité est toujours récompensée...

Note précédente Liste des notes Page technique  Note suivante 
 
Accueil | Technique | Liens | Actualités | Formation | Emploi | Forums | Base
 
Copyright © Cerig/Grenoble INP-Pagora
Mise en page : J.C. Sohm