Petit point rapide pour que tout soit bien clair. Il existe sur le Web trois formats d’images reconnus et compatibles.
Le format JPG
Il s’agit d’un format de compression puissant et particulièrement adapté aux photos et aux dégradés de couleurs.
Il est possible lors de l’optimisation de jouer sur :
- le taux de compression (plus le taux est élevé plus l’image sera « abîmée ») ;
- le niveau de flou (une image légèrement floue fera apparaître moins de défauts à la compression) ;
- les passes (à savoir un affichage qui sera rendu de manière progressif le temps du chargement de l’image).
Le format GIF
Ce format est principalement utilisé pour créer des images animées, mais il est possible toutefois de l’utiliser avec des images fixes car l’optimisation des images en est parfois meilleur qu’avec le format JPG. Notamment avec des images très « géométriques », petites ou dont la palette de couleurs est limitée.
Il est possible lors de l’optimisation de jouer sur :
- le nombre de couleurs dans la palette (jusqu’à 256) ;
- et les différents paramètres qui permettront justement de réduire ce nombre de couleurs.
Le format GIF accepte la transparence binaire (totalement transparent ou pas).
Le format PNG
C’est avant tout de ce format que je voulais parler car c’est sans doute le moins connus de tous. En effet, il est mal intégré aux logiciels de production habituels et également disponible en plusieurs format, ce qui ne facilite pas son utilisation.
PNG 8
On parle là d’une optimisation en 8 bits des images. On travaille donc comme en GIF sur une palette de 256 couleurs à la quelle on ajouter la transparence binaire là encore. Le taux de compression étant dans la plupart des cas meilleur qu’en GIF, si votre image n’est pas animée, je préconise de choisir ce format.
Il est possible lors de l’optimisation de jouer sur :
- le nombre de couleurs dans la palette (jusqu’à 256) ;
- et les différents paramètres qui permettront justement de réduire ce nombre de couleurs.
PNG 24
Ce format diffère du précédent par la prise en charge de la transparence sur plusieurs niveaux. On pourra alors dire que telle couleur est rouge et transparente à 25%. Par ailleurs la palette n’est plus limitée à 256 couleurs puisqu’elle est codée maintenant sur 24 bits.
Il est possible lors de l’optimisation de jouer sur :
- les passes (à savoir un affichage qui sera rendu de manière progressif le temps du chargement de l’image).
La seule restriction à ce format est qu’il n’est pas prit en charge par le navigateur Internet Explorer dans ses versions inférieures à 7. Il faut alors user de techniques particulières pour que cela marcher et ce n’est pas toujours évident.
Enregistrement des fichiers PNG
Que ce soit en PNG 8 ou en PNG 24, je vous conseille fortement de compresser vos fichiers avec un petit utilitaire : PngOptimizer. Non seulement il compresse au mieux vos fichiers mais il corrige également des erreurs couleurs faites par la plupart des logiciels (dont Photoshop).
C’est un logiciel qui ne fonctionne que sous Windows, et je n’y ai pas trouvé d’alternative sérieuse sur Mac ou Linux. Les commentaires sont là pour ça.
En résumé
- Pour une image animée, utilisez le format GIF.
- Pour une image riche en couleurs et détaillée (une photographie), utilisez le format JPG.
- Pour une petite image faible en couleurs, qui nécessite une transparence binaire ou très « géométrique », utilisez le format PNG 8 (en veillant à compresser correctement).
- Pour une image qui nécessite une transparence sur plusieurs niveaux, utilisez le format PNG 24 (en veillant à compresser correctement et en utilisant les techniques appropriées pour Internet Explorer).