Un précédent article montrait les différences entre PNG et GIF pour le stockage d’images pour le web. Les plus flagrantes sont certainement la possibilité d’avoir des images en “couleurs vraies” et le support de la transparence progressive, permettant l’affichage d’images fidèles à leur original.
Pour le web, la transparence est une caractéristique clé pour faire des superpositions complexes et des effets graphiques sophistiqués. Cependant, les différences d’implémentation dans les différents navigateurs font que ce format peine à décoller. Dans cet article nous allons voir comment exploiter au mieux ce format pour des utilisations créatives.
Comme GIF, PNG fait partie des format “non destructifs”. Cela signifie que l’image sera exactement la même, qu’elle soit compressée faiblement ou fortement.
Mais la similitude s’arrête là . D’abord, le format PNG ne permet pas de faire d’animation.
Ensuite, PNG propose plusieurs réglages de couleurs et de transparence, contrairement à GIF qui ne permet que 256 couleurs avec une transparence simple. En théorie, il existe plusieurs combinaisons de ces réglages, permettant ainsi d’ajuster au mieux selon les besoins.
En pratique, seulement deux profils sont réellement utilisés:
Ce sont ces deux profils qui sont généralement proposés par les logiciels graphiques, notamment ceux d’Adobe.
Concernant le premier profil, il s’utilise exactement comme GIF. On peut interchanger GIF et PNG dans les cas où GIF était utilisé (hormis l’animation). La seul différence se fera sur la compression, où PNG est souvent plus avantageux. Si la taille compte pour vous, testez à chaque fois les deux formats et gardez celui qui donne le fichier le plus compact.
C’est avec le second profil qu’on va pouvoir être plus créatifs... et qu’on va rencontrer le plus de difficultés. La faute à Internet Explorer 6 qui supporte assez mal le format. Heureusement qu’il existe tout de même des moyens pour lui faire afficher les images correctement. Nous les détaillerons plus loin.
D’un point de vue créatif, PNG24 excelle lorsqu’on doit superposer des éléments. Voyons un peu ce qu’on peut faire.