Les bases de HTML

Les différents formats d’images

Quels formats d’images peut-on utiliser sur Internet ?

  • Format gif
  • Format jpg
  • Format png
  • Format svg

Si vous vous occupez personnellement de la création ou de l’optimisation des images de vos pages Web, vous serez amené à choisir l’un ou l’autre de ces formats. Lequel? La réponse dépend des différents facteurs, les deux principaux étant la taille (pixels) du fichier résultant et la qualité souhaitée.

Le format gif
Le format gif est le premier format spécifiquement destiné au web. Il a initialement été mis au point par CompuServe. Ses caractéristiques essentielles sont les suivantes:

  • image matricielle
  • maximum de 256 couleurs
  • compression sans perte de qualité pouvant atteindre un rapport 1:3, voire beaucoup plus selon les images
  • possibilité de transparence (un seul niveau de transparence)
  • possibilité de gif entrelacé

Le format jpg
Le format jpg est destiné à la compression d’images photographique, qui comprennent donc de nombreuses variations de tons. Ses principales caractéristiques sont les suivantes :

  • image matricielle
  • millions de couleurs
  • compression avec perte de qualité variable selon les images, et qui peut être paramétré lors de
  • l’enregistrement; le taux de compression peut atteindre 1:10, voire beaucoup plus.
  • possibilité de jpg progressif

Le format png
Le format png , comme le format gif, a été spécialement développé pour le web (png signifie portable network graphics). Il ressemble au format gif par certains aspects, mais ses possibilités sont plus étendues. Ses caractéristiques sont les suivantes :

  • image matricielle
  • millions de couleurs, mais possibilité de limiter le nombre de couleurs à 256
  • compression sans perte de qualité de même type que le format gif, avec des taux de compression légèrement supérieures
  • possibilité de 256 niveaux de transparence
  • possibilité de png entrelacé

Le format svg
Le Scalable Vector Graphics (en français « graphique vectoriel adaptable1 »), ou SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML.
Les coordonnées, dimensions et structures des objets vectoriels sont indiquées sous forme numérique dans le document XML. Un système spécifique de style (CSS ou XSL) permet d’indiquer les couleurs et les polices de caractères à utiliser. Ce format gère quelques formes géométriques de base (rectangles, ellipses, etc.), mais aussi des chemins (paths), qui utilisent les courbes de Bézier et permettent ainsi d’obtenir presque n’importe quelle forme. Le remplissage peut se faire à l’aide de dégradés (gradients) de couleurs de motifs (pattern) qui sont des objets SVG quelconques, ou de filtres (appelés shaders en imagerie 3D). On peut également appliquer des motifs le long des chemins (markers) et utiliser les fonctions de remplissage. Le canal alpha, pour la transparence, est géré à tous les niveaux.
Avantages:
SVG est un format d'image léger lorsqu'il s'agit de représenter des formes simples, car seules les informations décrivant ces formes sont stockées (coordonnées, couleurs, effets) contrairement aux images bitmap (JPG, PNG, GIF) qui doivent mémoriser le contenu pixel par pixel.

Inconvénient:
La production d’images svg ne se fait que avec des logiciels spécifiques :

  • Inkscape orienté spécifiquement pour SVG (libre et gratuit)
  • OpenOffice ou LibreOffice Draw (libre et gratuit)
  • Illustrator par Adobe (payant)