PNG (Portable Network Graphics)
Le PNG est un format d'image, sans perte, libre, développé à cause du brevet sur le GIF. PNG-8 est limité à 256 couleurs, avec gestion de transparence simple, alors que PNG24 accepte 16millions de couleurs ainsi que la transparence progressive, pour ne parler que des deux formats les plus utilisés.
Peu utilisé sur le web jusqu'alors mais actuellement en nette progression, il a pris un mauvais départ sur Netscape à cause d'un quiproquo autour de sa liberté d'utilisation puis à été ralenti pas une mauvaise implémentation dans IE (il faut attendre IE7 pour voir la transparence progressive gérée) ainsi que sa mauvaise gestion par Photoshop (information gamma causant une différence de couleur sur Internet Explorer ou encore mauvaise compression et donc poids de l'image trop élevé).
La compression d'image en PNG est très souvent plus efficace que le GIF en particulier pour les graphisme peu détaillé.
| Les plus | Les moins |
|---|---|
| règlage du taux de compression | la limitation à 256 couleurs pour le png 8bits |
| 16 millions de couleurs | perte d'information si choix d'une palette de couleurs inférieures aux nombre de couleurs réel de l'image |
| transparence progressive | le poids important pour du png 24 bits et la transparence progressive |
Utilisation:
- logo, graphisme
- image où la transparence progressive est requise
En savoir plus:
http://fr.wikipedia.org/wiki/Portable_Network_Graphics
http://akvis.com/fr/articles/graphique-pour-web/format-png.php
Utilitaires
exemple des problèmes posés par le PNG
la transparence progressive
Voici une image exportée en png 24 à l'aide de photoshop:
On constate que sur IE6, La transparence n'est pas appliquée mais c'est un gris qui la remplace. Il est possible de remplacer le gris pas la couleur de notre choix ou de maintenir la transparence à l'aide d' un filtre propriétaire de Microsoft par le biais du css (cf la page sur le traitement des PNG pour IE)
la couleur d'un PNG exporté sous photoshop
Voici deux carré exporté pour le premier en gif, le deuxième en png 8:
On s'aperçoit que la couleur diffère légèrement sur Internet explorer (version 7 y compris) à cause d'une information gamma ajoutée par photoshop dans le format PNG
Ces quelques problèmes peuvent être résolus de différentes manières: Quelques pistes pour gérer les PNG sur IE
Editer