Accueil
Contact
Flux RSSRécapitulatif des méthodes d'affichage des images au format PNG avec transparence sur Internet Explorer
Publié le lundi 24 septembre 2007 dans Mon salon - lu 4027 fois
J'ai déjà abordé le sujet il y a quelques mois mais sans présenter toutes les solutions possibles. Aujourd'hui je vais essayer de reprendre les différentes méthodes possibles en présentant les avantages et inconvénients pour chacune.Rappel de la problématique :
Les images au format PNG 24 permettent la transparence via le canal alpha (ou couche alpha). Cela permet d'agrémenter les sites internet avec des images de bonne qualité, légères et cela offre beaucoup plus de possibilités qu'avec les images GIF ou JPG.
Les logiciels de navigation sur internet interprètent parfaitement ce format d'image sauf Internet Explorer, le navigateur de Microsoft, pourtant le plus utilisé au monde... La transparence est alors remplacée par un gris-bleu dégradant l'image.
Une seule solution
Pour corriger ce défaut, il n'y a, à ma connaissance, qu'une seule solution qui consiste à appliquer un filtre intégré à Internet Explorer depuis la version 5.5. Ce filtre appelé AlphaImageLoader, doit être exécuté à la demande du concepteur du site qui contient les images PNG dotés d'une couche alpha. Plusieurs méthodes sont possibles pour faire appel à ce filtre.» En savoir plus sur le filtre AlphaImageLoader
1 - La méthode manuelle
Il est bien évidement possible de faire appel au filtre d'Internet Explorer pour chaque image contenant une couche alpha. Pour ce faire, il faudra faire appel à une boîte vide ou à une image transparente (comme c'est le cas dans l'exemple ci-après) à laquelle on va insérer une image de fond grâce à un style CSS.Le code HTML faisant appel à une image GIF transparente :
<img id="image" src="blank.gif" alt="" />
Le style CSS ajoutant une image PNG en fond :
#image {
width: 100px; /* largeur de l'image PNG */
height: 100px; /* hauteur de l'image PNG */
background: url(image.png) no-repeat center center;
}
Le style CSS à n'appliquer que pour Internet Explorer (en style conditionnel ou avec un hack) :
#image {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='image.png');
}
Avantage
- Le filtre est appelé seulement pour les images qui en ont besoin et pas pour toutes les images au format PNG
- L'image n'est pas incluse dans le code HTML directement et ne sera donc pas accessible aux moteurs de recherche
- Cette méthode nécessite un ajout de code dans la feuille de style et ne peut donc être appliquée sur des images insérées par des rédacteurs
2 - La méthode Javascript
La solution la plus populaire grâce à sa simplicité de mise en œuvre est un JavaScript. Ce script va tout simplement rechercher les images au format PNG contenues dans la page qui l'exécute et appliquer sur celle-ci le filtre intégré à Internet Explorer. Pour cela, le script va remplacer le code HTML de l'image par un élément sur lequel il va appliquer un style CSS.Le site de l'auteur : http://homepage.ntlworld.com/bobosola/
Le code source du script : http://homepage.ntlworld.com/bobosola/pngfix.js
Code à insérer dans l'en-tête de la page (entre les balises <head> et </head> )
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
Avantages
- Très simple à installer
- Ne touche pas à la feuille de style qui reste donc valide le cas échéant
- Ne s'applique qu'aux images intégrées dans la page, pas les images appelées par la feuille de styles
- Le filtre s'applique une fois la page et les images chargées. Les images sont donc affichées avec le défaut sur la transparence puis sont remplacées par les images corrigées
- Les utilisateurs qui ont désactivé le JavaScript ne bénéficieront pas de cette correction
3 - La méthode HTC
Le principe de cette méthode est le même que le précédent sauf qu'il est appelé par un fichier HTC, également à mettre en lien avec les pages concernées. Microsoft a intégré à Internet Explorer des Composants HTML (HTML Components). Les fichiers HTC contiennent généralement des scripts (JScript ou VBScript) qui permettent d'appliquer de nombreux filtres aux éléments HTML.Le site de l'auteur : http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
Le code source du script : http://webfx.eae.net/download/pngbehavior102.zip
Code à insérer dans l'en-tête de la page (entre les balises <head> et </head> )
<!--[if lt IE 7.]>
<style type="text/css">
img { behavior: url("pngbehavior.htc"); }
</style>
<![endif]-->
Avantages
- Très simple à installer
- N'affecte pas le code HTML de la page
- La propriété behavior n'est pas un attribut de style valide
4 - La méthode PHP
Comme pour les deux méthode présentées ci-dessus, ce script recherche les images au format PNG et les remplace par un élément avec un style CSS appelant le filtre d'Internet Explorer qui corrige leur transparence éventuelle. Par contre, ce script est exécuté côté serveur et non côté client comme c'est le cas des deux autres.Le site de l'auteur : http://koivi.com/ie-png-transparency/
Le code source du script : http://koivi.com/ie-png-transparency.zip
Code à insérer au début de la page :
<?php ob_start(); ?>
Code à insérer à la fin de la page :
<?php
include_once 'replacePngTags.php';
echo replacePngTags(ob_get_clean());
?>
Avantages
- N'affecte pas le code HTML de la page
- Dans certains cas, certainement plus rapide à exécuter que les autres méthodes
- Un peu lourd à installer
- Ne s'applique qu'aux images intégrées dans la page, pas les images appelées par la feuille de styles
- Il est nécessaire de posséder un hébergement avec module PHP
Faites vos jeux
J'ai pour habitude d'utiliser les trois premières méthodes présentées et mal connaître la dernière. Je ne vais donc pas vous conseiller une méthode plutôt qu'une autre.Je pense que le choix doit se faire en fonction du site, selon que les images sont intégrées dans la charte graphique ou dans le contenu, selon que les images avec transparence sont nombreuses ou non...
Je ne connais pas d'autres méthodes que celles exposées. Si quelqu'un en connait d'autres, elles seront les bienvenues en commentaires ou dans ma boîte mail.
Sur Twitter
- pour le javascript, certaines personnes le desactive (je sais, c'est rare)
- pour la css, la feuille n'est plus valide
Pour la mêthode php c'est sympa mais ca fait du traitement en plus pour le serveur, ce dont il saurait se passer :]