Vous êtes ici: Home > Support > Images

Les formats d'image pour le web

Comparaison entre les formats

Voici tout d'abord une comparaison, à qualité égale, entre les trois formats portant sur une photographie:

JPG

GIF

PNG

Graphique JPG Graphique GIF Graphique PNG
12K (comp. 80) 29K (128 couleur) 27K (128 couleur)
Constatation: le fichier JPG est de meilleure qualité (manche droite) et pèse (Ko) moins de la moitié des deux autres fomats.

Voici maintenant une comparaison, à taille égale, entre les trois formats portant toujours sur la même photographie:

JPG

GIF

PNG

Graphique JPG Graphique GIF Graphique PNG
13K 13K (18 couleur) 13K (21 couleur)
Constatation: les fichiers GIF et PNG ne parviennent pas a compresser correctement une photographie, il y a trop de couleurs.

Voici une comparaison, à qualité égale, entre les trois formats portant sur un graphique:

JPG

GIF

PNG

Graphique JPG Graphique GIF Graphique PNG
11K (comp. 80) 5.2K (32 couleur) 5.4K (32 couleur)
Constatation: on obtient ici l'effet inverse de ce que l'on pouvait constater sur les deux comparatifs précédents.Les fichiers GIF et PNG parviennent parfaitement a compresser une image contenant peu de couleurs.

Voici une comparaison, à taille égale, entre les trois formats portant toujours sur le même graphique:

JPG

GIF

PNG

Graphique JPG Graphique GIF Graphique PNG
5K (comp. 43) 5K (28 couleur) 5K (21 couleur)
Constatation: Il est évident que pour une image de ce genre JPG ne peut pas être utilisé. JPG provoque un effet de pixellisation inacceptable sur le bord des surface de couleurs.

Le format GIF

Abréviation de Graphics Interchange Format. Il s'agit d'un format créé par Compuserve et dont il existe deux versions: 87a et 89a, correspondant à leur année de création. La dernière comporte quelques avantages et c'est actuellement la plus répandue. Ce format conserve intégralement les informations. Il souffre toutefois d'une restriction majeure: il ne supporte que 256 couleurs.

Les avantages de GIF sont:

Les inconvénients de GIF sont:

GIF recèle également une particularité méconnue qu'il est bon de connaitre. En effet, GIF compresse par ligne. C'est-à-dire qu'une image contenant des lignes de couleur uniforme sera moins lourde (ko) qu'une image identique ayant des colonnes de couleur uniforme!

Voici un exemple qui illustre ce propos:

Image GIF avec lignes multicolores horizontales
2.1 Ko
Image GIF avec lignes multicolores verticales
4.3 Ko

A l'aide des propriétés de l'image (menu contextuel), vous pouvez comparer le poids de ces deux images.

Si vous le souhaitez, vous pouvez télécharger le fichier original (.tif) ayant servi à créer ces deux fichiers GIF

Le format JPEG

Créé en 1990 par le Joint Photographic Experts Group, ce format devait s'affranchir des restrictions du format GIF tout en réduisant substantiellement la taille du fichier. Il réussit parfaitement ce pari mais reste un délicat amalgame entre la qualité de l'image et la taille du fichier. Il est capable de représenter 16 millions de couleurs. La plupart des logiciels permettent de choisir le taux de compression.

Plus le taux est proche de 1, plus la taille du fichier sera faible et la qualité de l'image médiocre. Il convient parfaitement aux photographies. Il ne convient pas aux graphiques utilisant peu de couleurs.

Affichage progressif

La plupart des logiciels de retouche d'images permettent la sauvegarde d'un fichier GIF ou JPEG avec l'option ''Progressive'' ou ''Entrelacée''. Cette option permet d'afficher les images par trames successives (et non plus de haut en bas). Ceci donne l'impression que l'image devient plus nette au fur à mesure de sa transmission. L'affichage de l'image est ainsi plus agréable pour l'internaute puisqu'il obtient assez rapidement une idée du contenu de l'image.

PNG 24bits

Ci-dessous, deux fichiers PNG 24bits avec transparence (alpha). Si votre navigateur accepte la transparence dans les fichiers PNG 24bits, l'arrière-plan devrait être de la même couleur que le fond de la page. Sinon, le fichier généré à l'aide de GIMP devrait avoir un fond de couleur bordeaux.

imaweb/indecenceGIMP.png
GIMP
36 Ko
imaweb/indecence.png
Photoshop CS
37.7 Ko
imaweb/indecenceGIMP.png
GIMP
Fond rouge en css
imaweb/indecence.png
Photoshop CS
Fond rouge en css
imaweb/indecence.jpg
Comparaison JPG
22.1 Ko

GIMP 2.0 permet d'enregistrer une couleur d'arrière-plan pour le cas où le logiciel de visualisation ne parviendrait pas à interpréter la couche alpha.

Malheureusement, Photoshop CS ne semble pas proposer cette option...

Internet Explorer 6 semble éprouver quelques difficultés avec la transparence. Au contraire, Mozilla, Firefox et Opera semble interpréter correctement le canal alpha.

support.jpg
LogiWin Sàrl - En Bouley 39 - CH-1680 Romont FR - Tél. 026 652 01 28 - info@logiwin.ch
Création et gestion de site web Simple, rapide, efficace!