On a vu récemment les problèmes de respect des standards du web par Internet Explorer. Je n'avais pas abordé dans ce sujet les problèmes liés à l'affichage des images au format PNG sur ce même navigateur. Il n'y a aucun soucis avec ce format tant que l'on utilise pas la couche alpha (les masques). Le sujet est déjà abordé sur plusieurs sites mais connaissant certains de mes lecteurs, je sais que ça en intéressera plus d'un que j'aborde le sujet ici. Je vais donc essayer de vous donner quelques explications sur la solution à adopter pour éviter des affichages disgracieux avec un format d'image devenu incontournable.

---

Pourquoi utiliser le format PNG ?

Le web permet depuis ses débuts deux principaux format d'images : le JPEG et le GIF. Seul le format GIF autorise la transparence mais son défaut principal est qu'il est limité à 256 couleurs. Le format PNG qui a fait son apparition en 1995 (je crois), permet lui aussi la transparence et 24 bits de profondeur soit l'affichage de millions de couleurs. Cela laisse donc beaucoup plus de possibilité. Mais ce n'est pas tout ! Il permet aussi l'utilisation d'une couche alpha, également appelée masque.
Cette couche alpha va permettre d'afficher un pourcentage d'opacité pour chaque pixels de notre image (ci-contre la couche alpha de notre exemple d'image). C'est à dire que le pixel qui sera par dessus le pixel noir de la couche alpha, sera afficher à 100% de sa couleur. À l'inverse, un pixel blanc de la couche alpha ferra que le pixel qui le superpose dans l'image ne s'affichera pas. Et du coup, un pixel gris qui est en fait un pourcentage de noir, appliquera ce même pourcentage à son pixel référent. Par exemple, si j'applique un fond de couleur à l'image de ce billet sur laquelle il y a une couche alpha, voici le mélange que cela donnera :

Bon, dans le cas de cette pauvre Austin Mini qui n'a rien demandé à personne, on ne voit pas bien l'intérêt. Mais dans d'autres cas, cela permet de faire de jolis effets d'ombrage, de détourage ou de transparence.

Mais alors quel est le problème ?

Le problème c'est qu'encore une fois le navigateur web le plus utilisé au monde fais des siennes. En effet, celui-ci, mis à part la version 7 qui vient de sortir, ne sait pas gérer cette couche alpha et affiche à la place un très joli gris ce qui dénature évidement l'effet escompté (exemple ci-contre sur lequel il n'y a pas de couleur de fond). Beaucoup de webmasters frustrés ont alors rapidement abandonné cette possibilité de faire des sites avec de beaux effets de manière très simple.

Et y a-t-il une solution ?

Heureusement un développeur a eu la bonne idée d'écrire un script pour contourner le problème. En effet, si Internet Explorer ne sait pas gérer la couche alpha, paradoxalement, Windows lui sait le faire. Du coup, il suffit de demander gentiment à Internet Explorer d'appliquer un filtre contenu dans Windows pour que les images s'affichent correctement.

Le code JavaScript (très léger) est disponible sur le site de l'auteur et est très simple à intégrer :
http://homepage.ntlworld.com/bobosola

N'oublions pas que comme il s'agit d'un javascript, cette solution ne sera effective que pour les utilisateurs qui auront conservé le javascript activé.

Attention aux classes CSS

C'est magique non ? Vous êtes content de pouvoir enfin utiliser la couche alpha sur vos images PNG ? Bien ! Alors maintenant faîte attention à une chose. Si vous avez pour habitude de définir vos classes avec le nom des tags sur lesquels vous souhaitez les appliquer, vous risquez d'être confronté à d'autres problèmes d'affichage.
Admettons que vous définissez une classe avec le nom "right" pour aligner vos images à droite. Vous pouvez la définir en mettant seulement un point devant (.right) ou en ajoutant le tag HTML pour une image (img.right). Dans le premier cas, le style s'appliquera à tous les éléments HTML qui feront appel à cette classe, y compris les éléments qui ne sont pas des images. Dans le deuxième, il ne s'appliquera qu'aux images faisant appel à cette classe.
Or, nous l'avons vu précédemment, le javascript de correction des images au format PNG remplace notre tag image par un block. Ce block est en fait un "span" avec des styles CSS. Il va récupérer automatiquement les dimensions de l'image, son identifiant (id), ses classes (class) et ses styles directement attribués dans le code HTML et les appliqué à ce nouveau span. Du coup, votre image n'est plus une image mais un block affichant une image et n'est donc pas capable de reprendre le style défini dans votre feuille de style et défini uniquement pour les images.
La solution est simple. Il suffit de spécifier à notre classe qu'elle doit également s'appliquer aux éléments span :
img.right, span.right {
float: right;
}


Oui mais...

C'est bien beau cette solution, vous êtes content, cela vous corrige bien vos images au format PNG mais pas toute. En effet, le script n'est capable d'intervenir uniquement sur les images intégrées directement dans le code HTML mais pas celles que vous appelez depuis vos styles CSS. Qu'à celà ne tienne ! Vous pouvez tout à fait utiliser la même méthode que le développeur qui vous a concocté l'excellent script que vous venez d'intégrer.
Je m'explique. Ce script remplace le code HTML d'insertion de votre image par un block de même taille qui va afficher votre image avec le fameux filtre de Windows qui sera appelé via un attribut CSS. Vous pouvez donc vous aussi appliquer ce filtre de la manière suivante :
.ma_class {
background: url(url_de_l_image.png);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='url_de_l_image.png', sizingMethod='scale');
}

Alors, non seulement ce code n'est pas joli, je vous l'accorde, mais en plus ça vous affichera toujours l'image originale en premier plan. Et pour couronner le tout, ce code rend votre feuille de style imcompatible avec les standards CSS du W3C. Donc si vous souhaitez que votre feuille de style soit valide, c'est raté.
Pour ces deux derniers problèmes, vous pouvez utiliser des hacks CSS et une feuille de style conditionnelle uniquement pour Internet Explorer et tout rentrera dans l'ordre. Je ne m'étends pas sur ces fonctionnalités car c'est déjà largement abordé sur le web.

Moralité

La conclusion vous vous en doutez, du moment qu'on parle d'Internet Explorer elle est toujours la même, c'est que le temps de travail du webmaster est dans certains cas considérablement augmenté. Internet Explorer met des bâtons dans les roues du webmaster pendant que ledit webmaster essaye de ne pas devenir chauve...