Existe la creencia de que Internet Explorer no soporta el formato PNG con transparencia, cuando lo cierto es que sí lo soporta pero muy mal, es decir: lo que no representa correctamente es el canal alfa.

Como todos sabemos PNG es un formato gráfico libre y parece ser que a IE, le escuece 🙂

Un PNG puede de ser de dos tipos: con paleta (8 bits o menos) o true color (24 bits). En el primer caso el comportamiento es el de un GIF, es decir, para la transparencia se usa un color de la paleta. En el segundo se utiliza otra técnica más avanzada llamada canal alfa con la que se obtienen mejores resultados.

Si utilizamos un PNG con paleta y transparencia se mostrará como se espera en IE. Sin embargo si es true color el canal alfa lo representa con un color gris o azulado, en vez de transparente.

Una característica propia del IE son los filtros visuales, y gracias a uno de esos filtros, AlphaImageLoader, podremos utilizar imágenes PNG sin restricciones. Veamos el siguiente código cortesía de Bob Osola:

Código:

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);

Enlace directo a png.js

Con este código, una vez cargada la página, se recorren todas las imágenes del documento, y si son PNG se sustituye la etiqueta img por otra span, donde se carga la imágen a través del filtro. Además la etiqueta span "heredará" los atributos id, class y title de la etiqueta img.

Si guardamos este código en un fichero llamado por ejemplo png.js podremos incluirlo en nuestras páginas de la siguiente forma (en la sección head):

De esta forma sólo se cargará y ejecutará en IE 5.5 o superior. Por último, apuntar algunas cosas:

• Como he dicho antes, este proceso se ejecuta una vez cargada la página, mientras se estén cargando las imágenes se mostrarán incorrectamente.
• No es recomendable abusar de este tipo de imágenes, o la carga se ralentizará en exceso.
• Existe una técnica similar desarrollada por Lloyd Dalton desarrollada en CSS, para los curiosos (yo recomiendo la aquí explicada, dejará las hojas de estilo libres de hacks).

Por supuesto lo ideal sería que IE tratase correctamente los PNGs y no tener que recurrir a este tipo de técnicas, pero mientras tanto ya tenemos una forma sencilla de incluir este tipo de imágenes en nuestra web. Y es que casi todo tiene arreglo...

Fuente principal: tomatoma.ws