Transparencias PNG en Internet Explorer (IE) 5.5 y 6

Del GIF al PNG, ¿porqué?

En los 90´s con el boom de las páginas web, se hizo muy común utilizar el formato GIF, para el uso de imágenes y animaciones cortas. Este formato, hace que un archivo de imagen sea pequeño, y tenga la posibilidad de añadir la propiedad de transparencia. Pese a su mala calidad y no ser libre de uso (Unisys, dueños de la patente del algoritmo de comprensión LZW), fue muy aceptado en esa época.

A finales de los 90`s, se publica oficialmente por el WWC (World Wide Web Consortium) la especificación de un nuevo formato, el PNG. Bautizado con licencia libre de uso. Adopta características muy sobresalientes encontra del GIF, el cual quedaría rezagado en los últimos años.

Algunas ventajas del PNG contra el GIF

• Comprensión sin pérdida de calidad.
• Transparencia inferior, soporta hasta 16,7 millones de colores.
• Posee 2 modos de conversión (estándar y progresivo)
• Inclusión de metadatos

Desventajas del PNG

• No permite crear animaciones
• Por motivos de calidad, el archivo puede llegar hacer demasiado grande para una web

Problema de transparencia con los PNG`s en el IE 5.5 y 6

Para algunos de nosotros que nos gusta el diseño y desarrollo web, tenemos que estar pensando en todo. Tanto si el usuario tiene los requerimientos básicos del sistema, validaciones, navegadores, etc. Pues bien, si utilizas solo IE 7 o Mozilla Firefox o Opera o cualquier otro navegador moderno, no te abras dado cuenta de que las transparencias de las imágenes con PNG, no sirven en Internet Explorer 5.5 y 6, y a los usuarios con estos navegadores viejos, no pueden ver dichas transparencias, si no todo lo contrario, la imagen aparece con un odioso contorno/cuadro gris.

La solución….

Hay diversos metodos, pero les presento el que se me hizo más facil a mi parecer:

1. Descarga el archivo IEPNGFIX, que TwinHelix desarrollo.
2. Copia los archivos iepngfix.htc y blank.gif dentro de la carpeta de tu sitio web.
3. En tu Hoja de estilo (CSS), pega el siguiente codigo:

img, div, a, input { behavior: url(/AquíValaDirección/iepngfix.htc) }

4. Abre el archivo iepngfix.htc, y en la línea de BlankImg, pon correctamente la dirección al archivo blank.gif:

var blankImg = '/AquíValaDireccionalaImagen/blank.gif';

5. Listo!, ya tienes arreglado el problema de transparencia con PNG para IE 5.5 y 6