Les images matricielles et vectorielles sur le web

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 qui la lie 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.

Economie 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

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.
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é).

PNG

Le PNG est un format qui a été créé comme réponse à la protection du format GIF. Il étend les possibilité de celui-ci, notamment en permettant une transparence « alpha », c’est à dire partielle.
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.

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 juane à 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. Etrange 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.