Choisir le bon format de l'image Web
Les différents formats images
Le choix du format image est très important puisqu'il va déterminer le compromis qualité / poids de l'image ; il existe trois grands formats utilisés sur le Web : GIF, JPEG et PNG.
GIF (Graphics Interchange Format)
Le format GIF utilise principalement l'encodage Paletted pour le stockage des couleurs ; de cette manière, il stocke jusqu'à 256 couleurs dans une image. Cet encodage peut provoquer une dégradation plus ou moins visible de l'image si celle-ci dispose de plus de 256 couleurs.
Une fois encodé, il peut être modifié sans causer de dégradations supplémentaires à chaque enregistrements. Il peut être animé, en jouant une succession d'images GIF stockées dans un fichier.
JPEG (Joint Photographic Experts Group)
Le format JPEG utilise différentes méthodes pour stocker les couleurs. Le plus populaire utilise une méthode de stockage avec pertes
: il dégrade la qualité de l'image et le potentiel de ré-utilisation, mais offre la particularité d'avoir un très bon compromis qualité / poids pour certaines images, comme les photographies.
JPEG est un format final : évitez de convertir du JPEG en PNG, ou encore d'effectuer plusieurs ré-enregistrements successifs, qui vont détériorer l'image à chaque encodage.
PNG (Portable Network Graphics)
PNG peut utiliser différentes méthodes (Paletted, TrueColor, GrayScale) pour stocker l'image, selon ses caractéristiques. Il utilise des filtres de calcul qui permettent de pré-optimiser une image pour augmenter considérablement le potentiel de compression de l'image.
Le format PNG est très souvent sous-exploité par l'utilisateur ou les logiciels : de nombreuses caractéristiques peuvent déterminer le rapport qualité / poids qu'il peut offrir.
Designers : travaillez avec des formats bruts
Certaines créations être largement optimisées lorsqu'elles se prêtent bien à la compression. C'est le cas des dégradés de couleurs par exemple, où le potentiel d'optimisation est très fort.
Enregistrez toujours vos travaux de création en un format brut, comme le BitMap (BMP) ou encore le PNG. De cet enregistrement dépend le potentiel d'optimisation. Il est inutile de convertir un JPEG en PNG (ou BMP) pour espérer récupérer le potentiel d'optimisation.
L'intégrateur peut alors beaucoup mieux travailler vos images en vue d'optimiser leur rapport qualité / poids, sans pour autant en détériorer la qualité originelle.
Intégrateurs : choix du format final
Certaines caractéristiques peuvent vous faire opter pour un format en faveur d'un autre. Le premier facteur important est la méthode de stockage des couleurs.
Paletted (PNG)
Si l'encodage Paletted est retenu pour le stockage d'une image, assurez vous que celle-ci dispose d'un nombre assez restreint de couleurs, sous réserve de voir la qualité de l'image se dégrader. C'est le cas d'un logo simple, de certaines images de décoration, ou encore de la plupart des captures d'écran qui ne contiennent pas d'images types photographies.
Le choix logique se tournera probablement vers PNG, dont les techniques de compression sont plus robustes et offrent de meilleurs résultats dans la majorité des cas.
| PNG TrueColor | PNG Paletted | PNG Paletted |
 |  |  |
| 2082 couleurs | 256 couleurs | 64 couleurs |
| 7294 octets | 3589 octets | 2262 octets |
En rapport avec Paletted (PNG) :
TrueColor (PNG)
L'encodage TrueColor peut être utilisé par PNG lorsqu'il s'agit de stocker des images de faible définition, comme une image de 1 pixel * X pixel(s), qui représenterait un dégradé de couleurs. Les bannières qui utilisent des dégradés cohérents peuvent également être encodés en utilisant cette méthode.
 |  |
| PNG Paletted | PNG TrueColor |
| 32 couleurs avec forte quantification | 255 couleurs |
| 1296 octets | 74 octets |
En rapport avec TrueColor (PNG) :
- L'encodage TrueColor
- PNG-24 (PNG TrueColor)
GrayScale (PNG)
L'encodage GrayScale est efficacement utilisé sur des images en vrai niveau de gris. De la même manière que TrueColor, cet encodage est particulièrement efficace sur les dégradés.
 |  |
| PNG Paletted | PNG GrayScale |
| 32 couleurs avec forte quantification | 255 couleurs |
| 1117 octets | 69 octets |
En rapport avec GrayScale (PNG) :
Photographies (JPEG)
Evitez l'encodage Paletted ou -d'autant plus- TrueColor sur les photographies. Préférez l'utilisation du format JPEG qui sera beaucoup plus efficace, même sur des images disposants de définition plus faibles.
 |  |
| PNG Paletted | JPEG |
| 256 couleurs avec forte quantification | 20318 couleurs |
| 25790 octets | 12703 octets |
En rapport avec Photographies (JPEG) :
Beaucoup de couleurs non successives (JPEG)
Lorsque beaucoup de couleurs non successives sont codées dans une image (valeurs des couleurs par rapport à la position de pixels les uns vis à vis des autres), le PNG peut donner un PNG TrueColor inadapté dont le poids excessif résultant est souvent flagrant.
Dans un tel cas, utilisez JPEG ; gardez néanmoins une version brute de l'image dans le cas où elle serait modifiée à l'avenir.
 |  |
| PNG Paletted | JPEG |
| 5118 octets | 4890 octets |
Transparence (PNG)
Le format PNG propose plusieurs formats de transparence. De la même manière que GIF, il propose une transparence Paletted (dite transparence binaire
), qui est supportée par un grande majorité de navigateurs Web depuis Internet Explorer 4.0.
Néanmoins, la méthode la plus utilisée (car c'est l'encodage choisit par défaut par les logiciels) est celle de la transparence en utilisant un canal alpha. Il en résulte que les intégrateurs sont souvent obligés d'utiliser des techniques pour forcer le support dans le navigateur Internet Explorer, puisque ce dernier ne supporte pas le canal alpha.
| PNG32 | Solution en PNG8 |
 |  |
| Incompatible IE4 à IE6 | Compatible IE4 à IE6 |
| 8223 octets | 3668 octets |
Etudiez la solution décrite dans la brève Améliorez la transparence de vos PNG : elle permet d'optimiser votre fichier PNG, et est supportée par Internet Explorer. Elle permet d'éviter l'utilisation des différents méthodes
utilisées par le plus grand nombre pour forcer la transparence.
Récapitulatif des usages des formats images
| Usage | PNG | GIF | JPEG |
| Edition de l'image Enregistrement rapide | OUI | OUI | NON |
| Dégradation de l'image à l'enregistrement | NON | POSSIBLE | OUI |
| TrueColor Pas de transparence | OUI (selon l'image) | NON | OUI |
| TrueColor Transparence | OUI | NON | NON |
| Paletted Pas de transparence | OUI | OUI | NON |
| Paletted Transparence | OUI | OUI | NON |
| Paletted Transparence Alpha variable | OUI | NON | NON |
| Paletted Animation | NON | OUI | NON |
| TrueColor Photographies | NON | NON | OUI |
| Logos, icônes éléments décorations, dégradés | OUI | OUI | NON |
| Très faible résolution peu de couleurs | OUI | OUI | NON |
Compléments d'article
Comparatif entre GIF, PNG et JPEG
Comparatif démontrant particulièrement les capacités du format PNG.
Ne convertissez pas JPEG en PNG
Notion particulièrement importante concernant la conversion du format JPEG en PNG.