Utiliser des images PNG et maintenir un affichage respectable sous IE6

GIF est un format périmé. Le standard, le présent et l’avenir de la compression sans pertes pour les images, c’est PNG. Et puis les effets de transparence progressive du format PNG sont franchement irremplaçables. Mais, le navigateur Internet Explorer 6 n’implémente pas correctement la transparence des images PNG. Et IE6 est encore très (trop) largement utilisé. IE6 sait en revanche afficher des images GIF transparentes.

Une solution que j’utilise passe par JavaScript : 1. les pages contiennent des images PNG ; 2. un script JavaScript, utilisant JQuery, change pour IE6 l’extension des fichiers images de « .png » vers « .gif » dans les balises img.

Pour chaque image PNG incluant de la transparence, nous devons alors au préalable générer une version GIF à déposer dans le même dossier et sous un fichier de même nom (à l’extension près !) que l’image PNG.

Voici le code JavaScript à coller dans un fichier « iehack.js » :

$(document).ready(function() {
  if ($.browser.msie && $.browser.version == 6) {
    // - use gif instead of png
    $("img.altgif").each(function() {
      var $img = $(this);
      var urlPng = $img.attr("src");
      var urlGif = urlPng.substring(0, urlPng.length - 4) + ".gif";
      $img.attr("src", urlGif);
    });
  }
});

Ce code utilise la bibliothèque de programmation JQuery. Il faut donc télécharger JQuery depuis le site officiel (choisir de préférence la version « minified » puis renommer le fichier en « jquery.js ») et l’ajouter sur le site au côté de notre fichier « iehack.js ».

Ensuite, dans le code HTML de la page Web, incluons JQuery ainsi que notre script dans l’élément header :

<html>
<head>
  <!-- ... -->
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="iehack.js"></script>
</head>
<body>
  <!-- ... -->
</body>
</html>

Il reste maintenant à marquer chacune des images PNG concernées. Il suffit d’adjoindre la classe altgif aux éléments img correspondants :

<img class="altgif" src="my-image.png" alt="My image"/>

IE6 change désormais à la volée les extensions des images marquées de « .png » vers « .gif ».

Nota. – Ceux qui en veulent trouveront sur ce site des notions sur JavaScript et JQuery.

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « 0SBj4r » dans le champ ci-dessous :