Il existe une multitude de formats de fichiers informatiques pour afficher des images. En revanche les formats que peut afficher un navigateur internet (Chrome, Mozilla, Explorer, Edge, etc.) se comptent sur les doigts d’une seule main :
gif, lancé le 15 juin 1987, limité à 256 couleurs, mais encore utilisé aujourd’hui pour les images comportant de grands aplats uniformément colorés, et pour les petites images animées, il gère aussi la transparence.
bmp, lancé en même temps que Windows 2.0, le 1er novembre 1987, un format sans compression de données, donc très lourd, peu utilisé sur le web.
jpg, lancé le 1er mars 1991, un format à compression variable, léger, mais avec pertes, bien adapté aux photographies, bien qu’il ne gère pas la transparence, c’est le format le plus utilisé.
png, lancé le 1er octobre 1996, un format à compression sans perte, bien adapté aux images avec aplats de couleurs, comme le GIF, mais comportant 16 millions de couleurs, il gère la transparence, mais pas les animations.
svg, lancé le 11 février 1999, un format vectoriel encodé en xml et éditable en mode texte.
Aujourd’hui je me suis amusé à comparer les poids, en octets, de la même image, en l’occurence le drapeau français, en 900 pixels de large pour 600 pixels de hauteur, avec les 5 formats : gif, bmp, jpg, png et svg, voici le classement, par taille croissante du poids en octets. A noter les comportements différents des navigateurs : Chrome n’ouvre pas le fichier bmp mais propose de le télécharger (alors qu’il l’affiche lorsqu’il est inclus dans une page html), Mozilla affiche les fichiers bitmap dans un cadre noir et IE gére mal le svg si la balise img indique une taille différente de la taille d’origine, aussi la vignette du premier drapeau n’est pas un svg mais un png, Edge en revanche l’affiche correctement.
svg 249 octets |
png 2972 octets |
gif 4506 octets |
jpg 15 285 octets |
bmp 1 620 054 octets |
Le code source du fichier svg est le suivant, les commentaires en vert ne font pas partie du fichier :
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600"> [dimension image]
<rect width="900" height="600" fill="#ED2939"/> [rectangle rouge]
<rect width="600" height="600" fill="#fff"/> [rectangle blanc]
<rect width="300" height="600" fill="#002395"/> [rectangle bleu]
</svg>
On peut créer et modifier les fichiers svg en mode texte, mais il est préférable d’utiliser un éditeur, comme inkscape, un logiciel libre gratuit.
Enfin, pour finir, le Gwenn ha Du en svg, largeur 450, hauteur 300, poids (indépendant des dimensions à niveau de détail égal) 1162 octets :
Attention ! Pas de redimensionnement de l’image avec certains navigateurs dont internet explorer !
Et son code source :
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="300">
<rect width="450" height="300" fill="#fff"/> [rectangle blanc 450 x 300]
<rect x="200" width="250" height="33.3" fill="#000"/> [rect noir 250 x 33.3]
<rect x="200" y="66.7" width="250" height="33.3" fill="#000"/> [rect noir 250 x 33.3]
<rect y="133.3" width="450" height="33.3" fill="#000"/> [rect noir 450 x 33.3]
<rect y="200" width="450" height="33.3" fill="#000"/> [rect noir 450 x 33.3]
<rect y="266.7" width="450" height="33.3" fill="#000"/> [rect noir 450 x 33.3]
<use xlink:href="#H" x="-75" y="-40.8"/>
<use xlink:href="#H" x="-25" y="-40.8"/>
<use xlink:href="#H" x="25" y="-40.8"/>
<use xlink:href="#H" x="75" y="-40.8"/>
<use xlink:href="#H" x="-50"/>
<g id="H" fill="#000">
<path id="s" d="M 100,55.8 l -3,-4.5 l 3,-7.5 l 3,7.5 z"/> [haut hermine]
<path d="M 100,55.8 l 13.5,33 l -10.5,-4.5 l -3,6 l -3,-6 l -10.5,4.5 z"/> [bas hermine]
<use xlink:href="#s" transform="rotate(-90 100,55.8)"/> [gauche hermine]
<use xlink:href="#s" transform="rotate(90 100,55.8)"/> [droite hermine]
</g>
<use xlink:href="#H" x="50"/>
<use xlink:href="#H" x="-75" y="40.8"/>
<use xlink:href="#H" x="-25" y="40.8"/>
<use xlink:href="#H" x="25" y="40.8"/>
<use xlink:href="#H" x="75" y="40.8"/>
</svg>