PNGs transparentes en Internet Explorer 6 (segunda parte)
22.7.08. Por ooscarr (ooscarr)
Ya vimos los métodos mediante scripts para mostrar el canal alpha de los archivos PNG en Internet Explorer 6, ahora toca el turno de hacerlo desde el archivo mismo. Internet Explorer, desde la versión 4, soporta imágenes en formato PNG; pero el formato implementado no está completo. Sin embargo, hasta donde lo soporta, todavía podemos hacer algo.
Transparencia binaria
Primero hay que decir que es mentira que Internet Explorer antes de la versión 7 no soportaba transparencia en los PNG. IE sí podía mostrar pixeles 100% transparentes de forma nativa como lo hace con las imágenes GIF (y los PNG se comprimen más que sus equivalentes GIF), ya que para hacer transparente este color no se necesita un canal alpha, sino definir en la paleta cuál color no mostrar.
La imagen de la izquierda es semi-transparente por lo que IE6 no lo interpreta bien (el fondo no se ve). En cambio la imagen de la derecha sólo tiene 1 color 100% transparente que no necesita el canal alpha así que IE lo muestra transparente sin necesidad de scripts raros.
¿Cómo lo creamos?
Este formato, al igual que el GIF, consta de un índice de colores de los cuales podemos elegir por lo menos 1 como transparente para que Internet Explorer lo interprete correctamente.
En Windows (con Irfanview)
Para crear estos archivos PNG en Windows, yo utilizo un pequeño (pero poderoso) software gratuito (mi favorito de Windows) llamado Irfanview, que al momento de guardar el archivo como PNG y seleccionar la opción Save Transparent Color
, aparece un diálogo que permite elegir el solo y único color que Internet Explorer interpretará como transparente (antiguamente había que ingresar el número en la paleta de este color).
Al presionar guardar, aparecerá una miniatura de la imagen donde se debe seleccionar el color que será transparente.
En los demás sistemas operativos (con GIMP)
En el caso del software GIMP (no estamos en condiciones de comprar Photoshop),
- Una vez abierta la imagen, anda a
Imagen
>Modo
>Indexado...
- En el siguiente diálogo, cualquier combinación de configuraciones es buena (manteniéndose debajo de los 256 colores; mientras menos, mejor)
- Luego, después de
Guardar como...
, aparecerá un panel donde es importante marcarGuardar los valores de los colores de los pixeles transparentes
y no marcarGuardar el color de fondo
.
Alternativamente, se puede hacer más fácil con un plug-in llamado Save for web. Y si tienes Fireworks esto es mucho más fácil (seguir leyendo).
Este tipo de archivo resulta igual que un GIF (excepto que no lo abrirán versiones anteriores a Internet Explorer 4), y como el archivo es más pequeño, para este tipo de imágenes ya todos se deberían olvidar de los GIF.
Es cierto que la gracia del formato PNG está en las semi-transparencias, y el método anterior sólo sirve para demostrar que PNG es una mejor alternativa para los GIF estáticos. Pero también se puede lograr semitransparencias compatibles con IE6 si llegamos al límite de lo que IE6 puede ofrecer con respecto al soporte de este formato.
Presentando el PNG 8
Otra manera de incluir imágenes PNG con alpha en versiones anteriores a IE7, es guardarlas en PNG 8, es decir, con una paleta de colores inferior a los 256 colores. De esta forma, el canal alpha se degradará más aceptablemente ignorando todos los colores semi-transparentes.
Este fantasma no se ve en IE6 e inferiores porque todos los pixeles tienen algún nivel de transparencia (esta vez sí se ve el fondo).
Y esa es la restricción. Al ignorar completamente cualquier color con canal alpha, este método sólo es recomendable para sombras o partes semi-transparentes que sean presindibles.
La sombra y sólo la sombra semi-transparente no se ve en IE6 e inferiores pero sí se ve en IE7.
¿Cómo lo creamos?
Con Fireworks
MacromediaAdobe Fireworks es la mejor aplicación para crear este tipo de archivos. Lamentablemente no es gratis, pero se puede descargar una versión de prueba para Mac o Windows por 30 días desde la página de Adobe.
Para guardar en PNG 8 hay que ir a Archivo
> Vista previa
y seleccionar PNG 8
. Después de seleccionar Transparencia alfa
, Exportar
.
Nótese que con Fireworks también se puede guardar en el modo indexado mencionado anteriormente.
PNGNQ
Yo busqué cómo hacerlo en GIMP pero no encontré nada. Así que por ahora con comandos no más
Para instalar pngnq sólo tirándolo al path (o al /usr/bin), se necesita tener la librería libpng, que para mac se puede bajar desde Mac OS X Ports.
Cuando lo ejecutamos, tipeamos:
pngnq filename.pngO si queremos elegir el número de colores:
pngnq -n 256 filename.pngY se creará el archivo resultante en la misma carpeta terminado en -nq8.png.
Da buenos resultados la mayoría de las veces en cuanto a colores, pero nunca se sabe lo que va a salir hasta que se ejecuta y se prueba en el maldito Internet Explorer 6.
0 comentarios (RSS
) :
Referencias a este artículo:
Página principal