Les images matricielles et vectorielles sur le web

Les images sont dans la fin des années 80’ le contenu le plus lourd à transporter (on ne parle même pas à l’époque de son et de vidéo). Il faut trouver le moyen pour les rendre plus légère.

Précédent | 7/7

Les images

Les images dans une page web ne sont pas « dans » la page : la balise <img> est chargée de dire « ici se trouve une image ». L’image, un fichier informatique, peut se trouver à côté de la page web, ou ailleurs dans le monde, du moment que l’adresse spécifiée dans la balise est correcte.

<img src=“mondossier/monimage.gif“ />

Les premières images à apparaitre sur le réseau sont matricielles. mais leur poids est problématique. Pour définir une image par de petits points de couleur juxtaposés, il faut faire transiter un grand nombre de données.

Économie de bande passante

Une des obsessions de l’internet était la sauvegarde des données. Une autre est l’économie de données échangées. Chaque information reçue a du être envoyée, et il faut épargner le travail des serveurs pour des raisons de performances, de stockage et d’économie d’énergie. Les ingénieurs vont donc travailler à employer le moins de ressources possible pour faire parvenir une information d’un point à un autre.

Les images sont dans la fin des années 80’ le contenu le plus lourd à transporter (on ne parle même pas à l’époque de son et de vidéo). Il faut trouver le moyen pour les rendre plus légères.

Dans une page web, chaque lettre occupe un octet, soit 8 bits. Un texte de 1024 caractères occupe donc 1 kilooctet, ou 1K. Une image en couleur utilise de son côté 3 octets par pixel.

Une image rvb de 15 pixels sur 20 occupe donc plus ou moins 1K. 15 pixels sur sur 20, c’est à peine assez pour une icône. Une image de 100 pixels sur 100 pixels, comme celle-ci

JPEG - 4.5 ko

Emploie donc 10000 pixels de 3 octets chacun, soit 30000 octets ou 30 K lorsqu’elle n’est pas compressée...

Très vite, il a fallu trouver des solutions pour rendre plus légères les images. Différents groupes de travail vont proposer des formats de compression, des algorithmes que l’on nomme codec (COmpression/DECompression).
L’image est compressée lors de sa création (on sauve l’image dans le format désiré) et l’ordinateur qui reçoit le fichier image se charge de sa décompression au moment de l’affichage.

Aujourd’hui toujours, 3 formats d’image matricielles sont présents sur le net :
Le GIF, le PNG et le JPEG.

GIF

Le Gif est le plus vieux format de compression image pour le web (1989).
Il fonctionne par réduction du nombre de couleurs (de 256 à 2) et par compression LZW.

Le gif est donc adapté aux logos, à tout ce qui a de grandes zones de couleur homogène. On peut aussi avoir des zones transparentes, dites "transparence d’index", car on choisit une ou plusieurs couleurs pour les déclarer transparentes.
La transparence d’index signifie que l’on désigne une des couleurs employées dans l’image comme transparente. Du coup, les pixels de cette couleur laissent passer la couleur d’arrière plan.

On peut, enfin, créer une animation minimale avec du GIF, alors appelé « gif animé ». C’est ce qui assuré au gif sa longue vie même s’il est un peu archaïque aujourd’hui.
Le GIF est tombé dans le domaine public en 2004, soit 15 ans après sa publication.

JPEG

Le Jpeg (.jpg) est un format de compression web créé par un groupe d’experts (d’ou son nom). Les travaux ont été entamés en 1978 mais la norme ne sera adoptée qu’en 1992.
Il procède à plusieurs algorithme et est plus puissant que le gif pour toutes les images de type photographique. Le niveau de compression d’une image jpeg peut être paramétré (de 0 à 100% de qualité). C’est un format de compression avec perte : comme pour le fichier mp3 par exemple, il y a destruction d’une partie des informations contenues dans la fichier. Le paramétrage de qualité permet de faire le choix entre qualité et vitesse de chargement.

PNG

Le PNG est un format qui a été créé comme réponse à la protection du format GIF. Le GIF était très employé pour sa transparence et sa compression efficace des images composées de peu de couleur (les icônes par exemple), mais protégée par une patente commerciale qui n’expirera qu’en 20014.

Le W3C propose donc un format libre de droit en 1996.
Il étend les possibilité du GIF. Il est notamment le seul à permettre une transparence « alpha », c’est à dire partielle.
La transparence alpha signifie que chaque pixel possède un octet de donnée supplémentaire qui gère la transparence du pixel, allant de la transparence totale à l’opacité totale sur 256 niveaux.

Son utilisation a été freinée sur le web par le refus de Microsoft de l’implémenter dans Internet Explorer avant la version 7 du logiciel. Aujourd’hui, ce format est reconnu partout, et a permis de belles avancées dans le graphisme web.
Le PNG est aussi le seul format de compression sans perte, car il permet de compresser l’image sans que la couleur de chacun des pixels ne soit altérée.

Un format vectoriel : le SVG

Le format SVG (pour Scalable Vector Graphics) a été proposé (on dit que les spécifications de la norme ont été publiées) en 2001 par le W3C lui-même.
Il permet de décrire des images vectorielles.
Comme tous les formats open source, il a provoqué des résistances fortes de la part de l’industrie, notamment par Microsoft.
Il est pourtant aujourd’hui bien implanté et reconnu partout.
Le format SVG utilise un langage de description très proche du html : le XML. Cette particularité permet d’utiliser le SVG de trois façons différentes dans une page web :
- comme fichier externe, de la même manière que les images gif, png et jpg. On utilise alors la balise img : <img src="monimage.svg">.
- directement codé dans la page html. Hé oui. dans ce cas, on utilise le code spécifique du svg. Le code suivant décrit un cercle jaune à bord vert dans un espace de 100 pixels sur 100 pixels :

<svg width="100" height="100">
 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

- enfin, le svg peut aussi être codé directement dans une feuille de style. Étrange mais possible.

body { background-image:
       url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='force-w'><circle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' /></svg>");
     }

Notons enfin qu’il est possible de sélectionner un élément SVG avec les CSS :

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <rect height="10" width="10" id="MyRect"/>
</svg>
<style>
#MyRect {
 fill: red;
 stroke: black;
}
</style>

Mieux encore, il est possible de créer des animation grace aux css ou avec javascript, en créant et modifiant des éléments dans le code svg...
Berf, SVG est un format qui est bien plus qu’un format image : c’est une extension du html.