FreeSoftWEB.tk
Formato PNG con transparencia en MSIE

2. FORMATO PNG CON TRANSPARENCIA EN MSIE

Copyright © 2005, 2006 Daniel Martínez. Se otorga permiso para copiar, distribuir y/o modificar este documento bajo los términos de la Licencia de Documentación Libre GNU, Versión 1.2 o cualquier otra versión posterior publicada por la Free Software Foundation; sin Secciones Invariantes, sin Cubierta Frontal, y sin Cubierta Posterior. Se puede obtener una copia de la licencia de gnu.org, también traducida al castellano, y comentada en la Wikipedia.

2.1. Qué es el formato PNG y cuáles son sus virtudes

El formato PNG es un formato de archivo de imagen de prestaciones muy interesantes para el diseñador web experto o aficionado. Se trata de un formato standard que acepta una profundidad de color de hasta 24 bits (frente a los 8 bits del formato GIF), y nos brinda la posibilidad de utilizar un efecto transparente de gran calidad gracias al canal alfa. Mediante este efecto se consigue una transparencia realmente impactante, frente a la capacidad limitada del extendido formato GIF que se limita a marcar como transparente un solo color de la paleta de colores, con lo cual no es posible crear semitransparencias como lo hace el formato PNG.

2.2. El navegador MSIE (MS Internet Explorer) no es compatible con PNG transparente

El problema de usar el formato PNG con transparencia en nuestras webs está provocado por el navegador MS Internet Explorer. Como much@s sabréis, a pesar de resultar un navegador poco eficiente y de prestaciones más que limitadas, se trata del navegador más utilizado en el mundo entero, ya que se instala junto con el sistema (in)operativo Windows de Microsoft, el cual es (por desgracia y a causa de las prácticas monopolísticas de la compañía de Redmond) el más extendido a día de hoy. Y entre los distintos motivos para no utilizar ese navegador se encuentra su falta de un correcto soporte para el formato PNG (entre muchos otros, como su inseguridad, la ausencia de pestañas o un bloqueador de pop-ups, poco respeto por los standards y mala implementación de CSS...).

Aunque dicho navegador sí que soporta el formato PNG, lo hace de manera totalmente ineficiente, de modo que no interpretará correctamente el canal alfa de nuestro PNG de 24 bits (sí que mostrará correctamente la transparencia en un PNG de 8 bits, el cual se comporta igual que un GIF, marcando un color de la paleta como transparente). Mientras el resto de navegadores mostrarán perfectamente nuestra imagen con canal alfa (Mozilla, Konqueror, Epiphany, Galeon, Safari, Opera...), MSIE la arruinará por completo al ignorar la transparencia.

Por ejemplo, en estas capturas podrás comprobar cómo muestran Mozilla y MSIE el mismo documento. Dicho archivo tiene de fondo una imagen JPG que simula una pared de ladrillo, y dos imágenes PNG con transparencia, que en un caso se ven correctamente, mientras en el otro el efecto es desastroso.

Imágenes con transparencia en Mozilla
Transparencia correcta con Mozilla
Imágenes con transparencia en MS Internet Explorer
Sin transparencia con MS Internet Explorer

2.3. Solución

Lo ideal sería que nadie utilizara un navegador tan deficiente como MSIE, y desde aquí recomiendo fervientemente abandonarlo por siempre jamás, ya que existen alternativas muy interesantes. Entre los navegadores que he mencionado más arriba, mi opción personal es Mozilla (no te pierdas Mozilla Firefox), que encontraremos tanto para plataformas Linux como Windows; pero la mejor forma de encontrar algo que colme tus necesidades es probar varios hasta encontrar el ideal, así que dejo en tus manos la elección.

Sin embargo, cambiar de navegador no es solución para los problemas de un webmaster, ya que no puedes convencer a tod@s tus usuari@s de que cambien de navegador (al menos no a corto plazo), y pese a quien pese, MSIE sigue dominando en este ámbito (aunque está claro que no es por méritos propios). Si un usuario de MSIE entra a tu web y se encuentra con transparencias que se muestran mal, lejos de pensar que es su navegador el que funciona mal, pensará que el webmaster es un chapucero, y muy probablemente se llevará una mala impresión de tu web, a pesar del tiempo que dedicaste a conseguir un diseño vistoso. Así que nos encontramos con dos opciones: renunciar al formato PNG (jamás!! no permitas que Microsoft obstaculice el progreso!!), o buscar el modo de que MSIE muestre bien las imágenes PNG de tu web.

Es en este punto en el que encontramos la solución (de mano de Bob Osola) en los filtros visuales de MSIE, en concreto el filtro AlphaImageLoader, mediante el cual podremos usar archivos PNG sin restricciones. Para ello, copia el siguiente código en tu editor de texto favorito (mi opción es Kwrite), y guárdalo con el nombre png.js:

function PNG_loader() {
   for(var i=0; i<document.images.length; i++) {
      var img = document.images[i];
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : "";
         var imgClass = (img.className) ? "class='" + img.className + "' " : "";
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
         var imgStyle = "display:inline-block;" + img.style.cssText;
         if (img.align == "left") imgStyle += "float:left;";
         if (img.align == "right") imgStyle += "float:right;";
         if (img.parentElement.href) imgStyle += "cursor:hand;";
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
         img.outerHTML = strNewHTML;
         i--;
      }
   }
}
window.attachEvent("onload", PNG_loader);

Ahora copia lo siguiente en la cabecera de todos los archivos de tu web que vayan a mostrar imágenes PNG (entre <head> y </head>), para cargar el archivo png.js en caso de que se visualice el documento con MSIE:

<!--[if gte IE 5.5000]>
<script type="text/javascript" src="./png.js"></script>
<![endif]-->

Lo que conseguimos mediante este código es que, una vez cargada la página, se corrijan las imágenes PNG del documento a través del filtro. Como podrás comprobar, primeramente se muestran las imágenes sin transparencia, y una vez que todo el documento se ha cargado, las imágenes serán sustituidas. De esta manera conseguimos solucionar el problema provocado por el uso de un navegador deficiente, aunque lo ideal sería que no tuviéramos que recurrir a estos trucos por culpa de los desarrolladores de Microsoft (aquí se ha explicado cómo hacerlo con javascript, pero también existen soluciones mediante CSS). Comprueba qué tal se ven los archivos PNG transparentes en tu navegador, ahora que hemos aplicado ese truco en esta web:

Imagen PNG con transparencia   Imagen PNG semi-transparente

Enlaza a FreeSoftWEB, y no te pierdas estos enlaces:

Foro Legba Gimpeando Curso Photoshop Curso Swish Va-Mas LotuAbokatuak