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).
8 commentaires ↓
Haaa les PNG 😀 Je suis globalement d’accord avec tout ce que tu viens d’affirmer, sauf :
Une petite comparaison des supports d’images dans les navigateurs : http://en.wikipedia.org/wiki/Comparison_of_layout_engines_graphics
Et puis une petite promo pour ma bibliothèque javascript PNGHack : http://png-hack.googlecode.com 😉
Viens pas embrouiller tout au dernier moment voyons !
Plus sérieusement, j’apprends des trucs, merci pour les liens.
« il corrige également des erreurs couleurs faites par la plupart des logiciels (dont Photoshop) » Quelles sont les erreurs ?
Avec certaines couleurs, le rendu sous IE6 de celles-ci au sein d’un PNG 8 bit est légèrement diffèrent d’une couleur de fond passée en hexadécimal par exemple.
D’après mes recherches (suite à ton commentaire), il s’agit d’un bug non pas de Photoshop mais de IE (décidément).
Plus d’infos sur ce fameux bug gAMA en suivant les liens de ce billet.
Rien ne vaut un belle image BMP renommée en ICO par un développeur Java ! :p Plus sérieusement, le jour où nous seront débarrassés d’IE6, ce sera une libération pour tous de pouvoir utiliser les PNG.
Moui, aujourd’hui le seul problème sont les effets secondaires engendré par le filter quand on veut l’utiliser en remplacement de background.
I’m working on it 😉
Le problème, c’est surtout de devoir utiliser le filter. Ce qui signifie impossibilité de jouer sur le positionnement du background (quand l’image est en background), sur la répétition de l’image (toujours en background). Plus tous les effets de bord merdeux complètement aléatoires et incontrôlables, et la charge d’exé du script. Vivement qu’IE6 soit à la poubelle, tant qu’à faire on pourra utiliser le min-height / min-width et les position:fixed sereinement aussi…
Au sujet des erreurs sur les couleurs avec le PNG-24, ce ne sont pas vraiment des erreurs (ni de la part des éditeurs d’images, ni de la part des navigateurs), mais plutôt quelques subtilités pas toujours bien prises en compte. Il y en a deux:
L’enregistrement d’une correction Gamma au sein du fichier PNG (option proposée par certains logiciels). Pas bien compris à quoi ça pouvait servir, mais en général ça n’est pas utilisé ou activé par défaut par les éditeurs d’images.
L’enregistrement d’un profil colorimétrique au sein du fichier PNG. Dans l’idée, c’est intéressant, mais dans la pratique ça pose des problèmes de cohérence entre couleurs PNG et couleurs CSS. On peut notamment constater ces problèmes de couleurs théoriquement identiques (même code hexadécimal) mais en pratique différentes (car gérées avec des corrections colorimétriques différentes) avec Safari sous Mac (pas sous Windows). Le problème de cette deuxième information de couleur, c’est que la plupart des éditeurs d’images l’enregistrent dans le fichier PNG… sans forcément proposer un autre fonctionnement.
On peut en apprendre plus en lisant l’article suivant: http://hsivonen.iki.fi/png-gamma/
La solution est donc de retirer ces informations de couleur, et en passant on pourra en profiter pour compresser à fond le PNG (sans perte de qualité) avec un logiciel comme PNG Optimizer, effectivement.
Pour les alternatives à PNG Optimizer, on peut citer:
PNGCrush: http://pmt.sourceforge.net/pngcrush/ Utilitaire en ligne de commande pour systèmes Unix/Linux. Je l’utilise pour ma part sous Ubuntu. Pour plus d’efficacité et de convivialité, j’ai créé des raccourcis pour Nautilus (environnement de bureau Gnome, nécessite le plugin Nautilus-actions): http://www.grumz.net/?q=node/320
Il y a également pngout.exe et pngout-darwin qui peuvent être intéressants, mais je ne leur connais pas d’interface graphique gratuite. Si je trouve le temps et le courage, je tenterai peut-être quelque chose pour mac intel.
Plus de précisions ici: http://pierre.equoy.free.fr/blog/index.php?post/2008/07/08/png-gamma-et-safari-attention&pub=1#c996
Laisser un commentaire