AlphaPNG pour les Masses
Publi� le 14 décembre 2005

Les AlphaPNGs (images 32-bit PNG avec transparence alpha) permettent d'utiliser les transparences alpha pour des choses comme les ombres, les coins, les couleurs opaques, etc. Les points d'interrogation de cet article qui semblent flotter ont des ombres (comprises dans l'image) et le cadre rouge ci-dessous est un png transparent avec 50% d'opacité. Notez que vous pouvez voir à travers ces éléments opaques (ou semi-transparents).

Cela a naturellement fonctionné sur plusieurs navigateur depuis quelques années ... sauf pour IE (Internet Explorer), la plaie de beaucoup de développeurs web. Alors pour IE, on utilise un filtre css (que seul IE reconnaît) pour activer le canal alpha (la méthode propriétaire utilisée par IE pour supporter ces images). Il y a des rumeurs qui disent qu'ils ne veulent pas supporter ce format à cause de problèmes avec Compuserve parce qu'ils ne voulaient pas que le format GIF perde ses royalties d'Abode ... bla bla bla. Quoi qu'il en soit, ils le supportent, ils veulent juste qu'on ne le sache pas alors il n'est pas activé. La bonne nouvelle est que vous pouvez l'activer par vous-même avec le CSS.

PNG n'est pas toujours le bon format à choisir, mais souvent il l'est. Voici un petit guide pour dire comment j'ai choisi d'utiliser et de ne pas utiliser les images PNG.

PNG

-  Si vous avez besoin d'une image 8-bit (jusqu'à to 256 couleurs), voire avec une couleur transparente.
-  Si vous avez besoin d'une image 24-bit (jusqu'à 16,777,216 couleurs) compressée (sans perte).
-  Si vous avez besoin d'une image 32-bit (jusqu'à 16 million et plus de couleurs) compressée (sans perte).
-  Si vous avez besoin d'une image 32-bit (jusqu'à 16 million et plus de couleurs) compressée (sans perte) avec un canal alphapour quelque chose comme une ombre ou une transition.

JPG

-  Si vous avez besoin d'une image 24-bit (jusqu'à 16,777,216 couleurs) compressée (avec perte) [1].

GIF

-  Si vous avez besoin d'une image 8-bit (jusqu'à 256 couleurs), avec une couleur transparente et des images animées.

Alors vérifiez le script et utilisez ces styles. Vous pouvez télécharger les fichiers ci-dessous :

-  alphapng.js
-  spacer.png

Note : N'oubliez pas le fichier spacer.png, sans quoi votre script ne marchera pas. Modifiez le fichier alphapng.js pour inclure le chemin vers spacer.png.

Traduit de l'anglais
Source : Tobby Miller


[1] Sauf pour JPEG 2000

Forum de l'article

# 320 AlphaPNG pour les Masses 12 mars 2007
Bonjour, je voulais vous signaler que les fichiers alphapng.js et spacer.png ne sont pas accessibles et c'est bien dommage car sans vouloir vous presser en quoi que ce soi, j'ai une extrême envie de voir fonctionner cette trouvaille.
# 321 AlphaPNG pour les Masses 12 mars 2007, par Frédéric
J'ai mis à jour les liens ;-).
Poster un message