EduTIC - Module de formation  - Les fonctionnalités avancés de MS frontpage

L'image sur Internet

 

I- Les formats d'images
    1. Images vectorielles, images Bitmap,   méta-formats
    2. Les couleurs
    3. La transparence et la couche Alpha
    4. La compression
    5. Les logiciels de traitement d'images
   6. Quelques formats et leurs caractéristiques

II- Les images du web
    1. Les images fixes
    2. Les images animées
   3. Les images de fond

 

   I- Les formats d'images

Toute image informatique s'affichant à l'écran est codée sous forme binaire et se résume par la combinaison des deux chiffres (0 et 1).
Les données d'une image sont regroupées dans un même fichier, selon différents modes qui sont le mode bitmap et le mode vectoriel.

            
1. Images vectorielles, images Bitmap,   méta-formats
1.1 Images vectorielles

Les images vectorielles sont décrites par des points clés. Les points manquants sont calculés par des formules mathématiques, qui créent des courbes et des droites permettant la liaison de points clés entre eux.
Dans ce mode, une ligne, un cercle ou un rectangle sont définis par deux points, un triangle est défini par trois points : les formes sont des formules mathématiques.
Une image vectorielle est très souple pour les déformations géométriques et les changements d'attributs (couleurs, épaisseur, alignement...).
Les différents objets d'une même image vectorielle sont souvent modifiables indépendemment les uns des autres.
Il existe plusieurs formats vectoriels tels que les formats DXF (Format Autocad), CDR (Corel Draw), EPS (format PostScript).
       

1.2 Images Bitmap

Les images bitmap sont composées par remplissage de surface, un peu comme une mosaïque, pixel par pixel. Une image Bitmap est décrite par une matrice où chaque élément est une valeur qui correspond à l'intensité de couleur.
Les images Bitmap (ou raster) sont   pixelisées, une forme est donc un ensemble de points.
La taille du fichier Bitmap, qui peut aller de quelques Ko à plusieurs Mo, nécessite beaucoup de RAM vive pour faciliter  le traitement à l'écran et une capacité de   stockage sur disque dur assez conséquente.
Il existe plusieurs formats bitmap manipulés par les logiciels de dessins tels que TIFF (Tag Image File Format), BMP, PCX, IMG, GIF...


Remarques
  • Lorsqu'on zoome dans une image vectorielle, elle est redessinée (calculée) en fonction de la résolution de l'écran et imprimée en fonction de la résolution de l'imprimante.
    Lorsqu'on agrandit un bitmap, on tombe dans le pixel.

  • Une image scannée est toujours un Bitmap. Passer du mode bitmap au mode vectoriel est plutôt difficile ; certains logiciels permettent de le faire : Adobe Streamline par exemple.                                                                    

             
1.3 Méta-fichiers

Il existe de nombreux formats qui contiennent d'autres informations. On parle souvent de méta-fichiers (metafiles) pour les décrire.
Cela va des simples mélanges de bitmap et de vectoriel (presque tous les formats vectoriels, en fait) à ce qui est plus compliqué pouvant inclure des objets en 3D, du texte et de l'hypertexte, des commentaires, de l'interactivité...On s'éloigne un peu de l'image numérique.
Quicktime, Flash, PDF sont de bons exemples de méta-fichiers.

  
2. Les couleurs

Il existe deux manières différentes de traiter la couleur numérique : le mode True Color et les Couleurs Indexées.
En True Color, chaque pixel se voit attribuer une valeur colorée quelconque : par exemple :
R : 255 , V : 0, B : 0 [rouge].
En couleurs indexées, le fichier est séparé en deux parties distinctes ; d'une part, la palette des couleurs, qui sert d'index, de l'autre, les positions correspondant aux couleurs de la palette. Par exemple, la couleur numéro1 sera du noir, la couleur numéro2 sera du blanc,...

             
3. La transparence et la couche Alpha

Il existe deux modes de transparence d'images :
La transparence simple est utilisée dans des formats d'images en couleurs indexées, comme le gif : un des éléments de la palette des couleurs n'est pas une valeur colorée, mais une absence de couleurs.
La couche Alpha permet une approche progressive de la transparence.
En plus des 8 bits de rouge, 8 bits de vert, l'image contient une couche en niveaux de gris (8 ou 16 bits).

 
4. La compression
La compression consiste en la réduction de la taille physique d'un bloc d'information.
Il existe deux types de compression :
- les compressions sans perte de qualité (lossless)
- les compressions avec perte de qualité (lossy).
Une des méthodes de compression sans perte de qualité est de supprimer les informations redondantes. Par exemple, pour une ligne noire de 10 pixels, un format non compressé noterait : N N N N N N N N N N, un format compressé écrirait 10*N !

4.1 Les étapes de compression

La compression, quelle que soit la méthode utilisée, passe par trois étapes : transformation, quantification et encodage.

4.1.1 La transformation
Les données sont transformées sur base d'une série de fonctions (DCT pour le JPEG, ...).
Cette étape n'implique pas de pertes d'information. Par contre, c'est la plus critique car elle détermine complètement l'efficacité des deux étapes suivantes.

4.1.2 La quantification
Les paramètres des fonctions obtenus lors de la transformation sont réduits en nombre et en taille.
C'est ici que l'on décide de perdre plus ou moins d'informations par rapport à l'original. Le choix de la transformation à l'étape 1 ci-dessus est donc primordial car certaines permettent une discrétisation plus ou moins efficace.

4.1.3 L'encodage
Les paramètres restant après la discrétisation sont compactés dans un fichier de taille le plus faible possible.
Les méthodes d'encodage utilisées sont similaires à celles des encodeurs ZIP, RAR et autres méthodes bien connues. L'encodage n'implique aucune perte de données.

4.2 La compression RLE (Run Lengh Encoding)
La compression RLE est très répandue dans les algorithmes de compression d'images. Les formats TIFF, PCX et BMP l'utilisent. Cette compression est beaucoup moins efficace que d'autres méthodes, mais elle est facile à implémenter, rapide à exécuter et représente ainsi une bonne alternative.
RLE travaille sur la réduction de la taille physique des chaînes de caractères répétitives. Ces répétitions se nomment en anglais un " run ". Le premier octet représente le nombre de répétition. En pratique, cette valeur est comprise le plus souvent entre 1 et 128 ou 256. Mais cette valeur représentant le nombre de répétition, est stockée, décrémentée de un. L'octet suivant représente l'octet à itérer.

4.3 La compression Lempel Ziv Welch (LZW)
Cet algorithme est un des plus répandu. On le trouve dans les formats GIF et TIFF. Il constitue même une partie de la compression V42bis des modems. 
LZW est capable de travailler avec n'importe quel type de données. Il est rapide en compression et décompression et ne nécessite pas d'opération à virgule flottante. De par le fait qu'il encode au niveau bit et non au niveau de l'octet, il ne se soucie pas du processeur, et de la manière dont il code les informations.
LZW utilise la substitution des motifs en se basant sur un dictionnaire construit au fil de la compression.
Le flot d'information à compresser est découpé en chaînes d'octets. Chaque chaîne est comparée au dictionnaire. Si elle n'est pas présente, elle est stockée. Elle est ensuite écrite dans le flot de sortie compressée.
Quand une chaîne, déjà rencontrée, apparaît dans le flot, elle est codée et transmise si elle a une longueur inférieur au plus grand mot du dictionnaire. Pour le décodage, le logiciel reconstruit en fait le dictionnaire dans le sens inverse. Il n'est pas nécéssaire ainsi de transmettre le dictionnaire. Bien souvent, pour la compression et la décompression, le dictionnaire est initialisé avec les 256 valeurs de la table ASCII. Ainsi, tous les codeurs et décodeurs LZW initialisent leurs dictionnaires de la même méthode.
Le format TIFF effectue une concaténation de points. Les données sont ensuite soumises à la compression LZW. Ceci peut parfois produire quelques problèmes si l'image ne possède pas un nombre pair de points.
Le format GIF quant à lui code chaque point sur un octet, puis soumet la suite d'octets à la compression LZW. Ceci évite les désagréments des images ayant un nombre de points par ligne impair. Mais, cela oblige, pour des images en monochrome, à coder chaque point sur un octet, alors qu'un bit serait nécessaire.

4.4 La compression JPEG
Une des meilleures compressions actuellement sur le marché est la compression JPEG, JPEG signifiant Joint Photographie Experts Group.
GIF compresse des images de 256 couleurs maximum. Les algorithmes LZW ne sont pas très efficaces sur des photos. La solution semble être la compression JPEG. Elle offre, avec une vitesse raisonnable, un excellent taux de compression sur des images ayant les points codés de 6 à 24 bits.
JPEG est une compression avec perte d'information. A la différence des autres méthodes tels RLS ou LZW, JPEG est une sorte de boîte à outils regroupant différents algorithmes de compression. JPEG est prévu pour supprimer certaines informations, invisibles à l'oeil nu, dans une image.
JPEG est destiné à des images de type photographique. Les images composées de vecteurs, de droite ou d'objet géométrique, ne seront pas compressées efficacement. Le taux de compression dépend fortement du contenu de l'image. Pour une photo, un taux de 20:1 à 25:1 peut être obtenu sans modification perceptible par l'oeil humain.
La transformation des couleurs : JPEG peut gérer différentes formes d'expression des couleurs comme RGB, CYM ou les niveaux de gris. Cette première phase va donc permettre de ramener tous ces formats à un seul propre à JPEG.
Rééchantillonnage de la chrominance : La chrominance est une des composantes de l'image. L'oeil ne peut pas différencier, sur un pavé de 2 x 2 points les différences de chrominances. Le rééchantillonage consiste donc à unifier ces chrominances par blocs de points afin de diminuer l'information par 2.
DCT : Discrete Cosine Transform : L'image est découpée en bloc de 8 x 8 points. La fonction mathématique DCT transforme ce bloc de l'image plane en une somme des fréquences. La première est une approximation grossière du bloc de points. Plus on ajoute des fréquences, plus on se rapproche du bloc de points d'origine.
Quantification de chaque bloc : Afin de supprimer certaines informations, le compresseur divise chaque DCT par un " coefficient de perte ". Plus le coefficient est élevé, plus l'image est dégradée par rapport à l'original. C'est cette étape qui permet de contrôler la qualité de l'image compressée.
Encodage : un encodage et une compression Huffman sont ensuite appliqués avant le stockage de l'image.
JPEG est également composé d'extensions optionnelles qui permettent d'améliorer la qualité. Au nombre de celles-ci, on compte une compression arithmétique qui remplace la compression de Huffman effectuée en fin de codage.

4.5 Outils de compression d'images
Web Graphix Optimizer, shareware : nte-serveur.univ-lyon1.fr/nte/html1/optimisationimages.htm, il
permet aussi une bonne optimisation des images.

GifWizard  : http://www.gifwizard.com/. GifWizard inspecte à la demande les pages d'un site, passe en revue les images et analyse ce qu'il reste de compression à gagner. 

           
5. Les logiciels de traitement d'images
5.1 Logiciels de conception graphique :

- GIMP : http://www.gimp.org/

Ce logiciel de dessin bitmap téléchargeable depuis Internet est l'acronyme de GNU Image Manipulation Program. C'est un logiciel de retouche photo et de création graphique semblable à Photoshop qui présente l'énorme avantage d'être gratuit. Vous trouverez tous les renseignements nécessaires à son téléchargement et à son utilisation sur le site http://www.gimp.org/ ou sur http://www.gimp.org/, ainsi qu'un manuel d'utilisation en français sur le site www.linux-france.org/article/appli/gimp/gum-fr/gimp.htm. Ce logiciel tourne actuellement sur UNIX et  Linux  ainsi que sur Windows 98. Vous y retrouvez toutes les fonctions utiles à la retouche et à la création d'image ainsi que la possibilité de produire de petites animations. La qualité la plus remarquable de ce logiciel est sa capacité à évoluer et à s'enrichir continuellement par l'ajout de plug-ins et de script-fu (langage dérivé de Scheme permettant de programmer des macro-commandes), souvent développés par des utilisateurs eux-mêmes et téléchargeables sur le net. Il existe d'autres logiciels libres comme par exemple Killustrator, spécialisé dans le dessin vectoriel.
UNGI utilise le module Perl de GIMP pour générer des GIFs similaires grâce aux script-fu.

- Adobe Photoshop /Adobe Image Ready : http://www.adobe.fr/
La version 5.5 de ce  logiciel de retouche d'images est disponible depuis été 99. Nous retrouvons les habituels outils de retouche et de dessins enrichis de fonctionnalités propres à la production pour le Web. En effet, la version 5.5 est livré avec la version 2.0 d'Image Ready, logiciel de production Web, qui fonctionne de manière transparente avec Photoshop. Il a aussi intégré en son sein un jeu complet de fonctions d'optimisation d'images pour le Web. Nous y trouvons aussi de nouveaux outils graphiques tels que la gomme magique, le "Back-grounder Eraser", ou encore la commande "Image Extract".

- Adobe Illustrator : http://www.adobe.fr/
Logiciel de dessin vectoriel, Illustrator 8.01 est particulièrement adapté à la création de logos et dessins avec à plats de couleurs ou dégradés. Pour une production destinée à Internet, il permet la création de typographies ou sert à la mise en page de graphiques. Il est aussi possible d'importer dans Flash et Image Styler des documents au format Illustrator. Les formats JPEG, GIF, et PDF sont disponibles sur Illustrator. Le format PNG en est par contre absent.

- Painter : http://www.metacreations.fr/
Ce logiciel de peinture numérique s'est enrichi d'outils et de commandes spécialement destinés à la production sur le web. La version 5.5 a intégré des fonctions de langages en Java Script. Il est donc possible de créer directement dans Painter des boutons interactifs. Le logiciel prévoit aussi l'enregistrement au format GIF animé et le traitement par lots.

-DeBabelizer de Equilibrum : http://www.equilibrium.com/
Lancé en 1991, DeBabelizer en est à la version 4.5. C'est un outil professionnel de traitement d'images automatisé. Des images destinées au Web sont manipulables, optimisables et convertibles par lots, et ce dans de nombreux formats dont le GIF, le JPEG et le PNG.

- Freehand : http://www.macromedia.com/
Ce produit Macromédia est autant adapté à l'impression qu'à l'édition sur le Web. Tout comme Illustrator, c'est un logiciel de dessin vectoriel. Outil de conception graphique et d'illustration, il permet aussi l'exportation vers Flash de dessins vectoriels.
Il existe  d'autres logiciels de graphisme : Coreldraw chez Corel, Goo de Méta-créations, etc... Des fiches détaillées sont consultables sur http://www.apacabar.fr/

5.2 Logiciels de conception graphique pour le web :
- Adobe Image Styler
: http://www.adobe.fr/
Ce logiciel permet de créer et d'appliquer à des objets des styles graphiques très variés. De par l'intégration du langage Java Script dans ses fonctions, il est très facile de créer des rollovers . Il offre une grande diversité de typographie et l'ergonomie du logiciel rend leur travail aisé. Il offre aussi la possibilité de créer des mises en pages HTML. Pour Adobe Image Ready, se reporter au paragraphe sur Photoshop 5.5.

- Fireworks de Macromedia : http://www.macromedia.com/
Dédié à la production d'images pour le web, ce logiciel possède d'importantes capacités de création graphique. Il contient à la fois des utilitaires vectoriels et des outils en bitmap. Les commandes d'exportation sont très fonctionnelles et offrent la possibilité de comparer plusieurs moyens de compression. Des commandes en Java Script sont  intégrées au logiciel (4 fonctions de survol prévues). Les fonctions de gestion des couleurs, de la saturation, de la luminosité et du contraste, que l'on trouve dans les Xtras, sont riches et multiples. Fireworks est un logiciel particulièrement bien adapté à la conception graphique pour le Web.

- Flash de Macromédia :
Flash est un logiciel de création d'animations pour le Web.

                 
6. Quelques formats et leurs caractéristiques
6.1 Formats adressables par bit (ou trame)

Ces formats enregistrent des renseignements sur les pixels ou les points particuliers. Ils sont habituellement destinés à la mémorisation, donc ils ont tendance à être utilisés pour les images simples.

Format GIF : Graphics Interchange Format (format de transfert des graphiques) (".gif")
Format d'image très utilisé qui permet un bon affichage sur la plupart des systèmes informatiques, mais est limité à 256 couleurs. Il utilise une technique de compression sans perte. Il rend disponible des fichiers relativement petits pour affichage immédiat avec des textes dans les documents Web, il est donc couramment utilisé pour les barres d'outils, les icônes et les images intégrées. Il peut être "entrelacé" (toute l'image est affichée avec clarté au lieu d'un affichage séquentiel ligne par ligne). Une couleur peut être transparente (convient aux images/icônes flottantes sur fond d'écran). Il convient mieux que le format JPEG pour obtenir des lignes nettes, des images en noir et blanc et en divers tons de gris.

JPEG : Joint Photographics Expert Group (Groupe mixte d'experts en photographie) (".jpg")
Format de compression à qualité contrôlée. Plus de 16 millions de teintes de couleur sont disponibles. Convient mieux que le format GIF pour les images réelles comme les photographies couleurs.

TIFF : Tagged-Image File Format (format d'étiquette de fichier vidéo) (".tif" ou "tiff")
Ce format emmagasine une très grande quantité de renseignements à propos d'une image. Il soutient différents types de compression (à qualité contrôlée et sans perte). Il est très utilisé, mais il est principalement un format intermédiaire entre les lecteurs et les programmes d'éditique.

PNG : Portable Network Graphics (graphiques de réseaux portables) (".png"; prononcé "ping")
Vise à remplacer le format GIF, et comporte des améliorations au niveau de la détection d'erreur et de la vitesse d'entrelacement, ainsi qu'un taux de compression plus grand. Format en émergence mais pas encore très utilisé.

Format disque compact photo
Le format disque compact photo est un format privé de Kodak pour l'entreposage numérique sur disque compact d'images à haute résolution. Les images peuvent être visualisées à un éventail de résolutions, et être manipulées à l'aide de logiciels de traitement d'images.

Groupe 4 du CCITT
Le CCITT a conçu une série de mécanismes de compression d'images en noir et blanc et de transmission par ligne téléphonique via le télécopieur. Ces normes sont connues officiellement sous le nom de Recommandations T.4 et T.6 du CCITT mais sont mieux connues sous le nom de compression Groupe 3 et Groupe 4 respectivement. Le Groupe 4 est le plus utilisé.

6.2 Formats vectoriels
Ces formats sont utilisés pour emmagasiner de l'information (algorithmes mathématiques) sur les lignes et les courbes qui composent l'image. Il est utilisé pour les documents composites (p.ex., les documents qui combinent les textes formatés de façon complexe, les images, etc.). Il change facilement d'échelle pour afficher différents niveaux de grossissement. PostScript et PDF utilisent l'imagerie vectorielle.

CGM : Computer Graphics Metafile (métafichier d'images graphiques informatiques)
Norme pour la mémorisation et l'échange de données graphiques à deux dimensions. Il était au départ un format vectoriel, mais a récemment été élargi pour comprendre les capacités de mémoire de trame. Quatre normes internationales ont été élaborées et précisent la façon dont CGM doit être utilisé dans les courriers électroniques avec extension MIME et sur le Web.