Un formato de amplias posibilidades

PNG. Portable Network Graphic

PNG es el nuevo formato de compresión de imágenes para la Web que entre sus más destacadas ventajas están la gran calidad y la alta compresión.

P NG es uno de los últimos formatos de compresión que aparecen en la escena Web, exactamente en 1994. Conjuga lo mejor de los formatos que habitualmente se han venido utilizado, que son .GIF (Graphics Interchange Format) y .JPG (Joint Photographer's Experts Group).

Es de uso libre, es decir, no es necesario pagar ningún tipo de licencia para usarlo. De hecho crece con más fuerza desde esta idea al plantear los creadores del formato .GIF (R&D junto a CompuServe Information Service) el pago de royalties. Incluso se ve en él a su lógico sucesor. El mismo Web Consortium (W3) lo incluye en su servidor (www.cdrom .com/ pub/png/spec), con fecha de uno de octubre de 1996, observando las recomendaciones convenientes que aconsejan su uso en la Web.

No sólo tiene como ventaja el obviar el pago de ningún tipo de royalties. Es un formato que permite un mejor almacenamiento de imágenes y que, entre otras ventajas, observa un formato de compresión optimizado con respecto a los usados por los formatos .GIF y .JPG. El proceso a seguir para convertir una imagen a formato .PNG es muy simple y su entorno de programación está abierto a los desarrolladores. Además no sólo se usa para la World Wide Web. Entre otras cuestiones a destacar, se puede señalar que es el formato oficial de la suite Microsoft Office 97.

Novedades

Acepta miles de colores, frente a los 256 máximos admitidos por .GIF y ante los miles soportados por .JPG, que también dan problemas de compresión y descompresión, además de contar con un mayor peso en kilobytes. Los colores que acepta son conseguidos una vez indexada la imagen. En el caso de .GIF, una vez indexada la imagen se pierde mucha información. Aquí no sucede así, pues .PNG soporta todos los modelos básicos de color que son usados para crear imágenes por ordenador.

12.000 pesetas es el precio por dar de alta un dominio del tipo .es. En él se incluye el mantenimiento de la dirección hasta el 31 de diciembre del año en el que se produce el alta. A partir del siguiente año, hay que abonar 8.000 pesetas anualmente para el mantenimiento del dominio existente.

El formato de compresión que utiliza es de alta calidad, lo que nos permite lograr la reducción en los tiempos de bajada (downloading). Esta calidad afecta tanto al poco tamaño que llegan a pesar en kilobytes como al resultado visual de la imagen una vez comprimida. Ésta es una característica que destaca frente al formato .GIF y .JPG.

El sistema de entrelazado (interlacing) que utiliza es más óptimo que con .GIF. De hecho en cuatro pasadas tenemos la imagen completa frente a las ocho del formato antes mencionado. Este sistema permite reconocer antes la imagen que se está bajando.

El efecto de transparencia fondo/figura es mejor, ya que no se basa en un color de fondo (caso del .GIF) sino en la máscara creada por alguno de los canales alfa que hayamos seleccionado desde Photoshop. Con ello evitamos problemas en caso de querer cambiar el color de fondo de la página, ya que no tendremos que cambiarlo también en la imagen. Además de que también elude los horribles dientes de sierra.

Destaca como novedad el que permite la corrección de la gama de brillo y contraste de forma automática, ya que reconoce el tipo de monitor donde se está desplegando la imagen. Esto, para los diseñadores, es algo perfecto ya que presenta la imagen de una manera muy parecida, sino igual, a la que ha sido creada originariamente.

Aparte de todo esto, permite incluir notas de texto en la imagen, como por ejemplo los datos de Copyright del autor. Se prevé que estas notas sean recogidas en un futuro por los buscadores de la Web.

Antes de convertir la imagen

Para convertir una imagen a formato .PNG, ésta ha de estar previamente en los siguientes modos (esto se puede controlar con Photoshop 4.0 y superiores): Bitmap; Grayscale (o escala de grises); Indexed Color (o indexada) y en color RGB. Por el contrario, no podrá ser usado si la imagen se encuentra en cualquiera de los siguientes modos: Duetone; CMYK; Lab Color o Multichannel (el formato .PNG soporta grabar un solo canal dentro de nuestra imagen, que observará para el efecto de transparencia, en el caso de que así se lo indiquemos). Sin embargo no aguanta que la imagen contenga más de una capa (layer), por lo que si tiene alguna, la imagen a tratar ha de unirlas todas en una sola (flatten image).

Cuándo usarlo

.PNG es ideal en dos casos: cuando trabajamos con imágenes transparentes y en los casos de que queramos introducir capas en el documento Web que presentamos.

Además de estas razones, su uso contempla las siguientes condiciones, a su favor y en su contra:

• Si se indica una imagen sustituta del formato .PNG, en previsión de que el navegador no lo reconozca, hay que destinarle siempre una imagen Gif. Nunca una Jpg. El tag que se ha de usar es el mismo que el de cualquier otro formato.

<img scr="nombre_imagen.png">

Actualmente se puede utilizar usando un plug-in adecuado que se puede encontrar en www.wco.com/~png . En este caso el tag queda de la siguiente manera:

<embed scr="nombre_imagen.png">

Existe la posibilidad de incluir una pequeña fórmula realizada en JavaScript que discrimina el navegador usado en función de las posibilidades de que pueda, o no, reconocer este formato. En caso de no autorizar su uso despliega una imagen Gif previamente realizada.

• El formato .PNG admite mejor las imágenes realizadas a base de líneas limpias que el formato .JPG, que le da un efecto de sombreado a su alrededor para conseguir el efecto de antialiasing. En el caso de no poder usar .PNG, hay que sustituirlo por .GIF. No es igual, pero es mejor que .JPG.
• El uso del formato .PNG para áreas amplias de color plano (fondos, por ejemplo) es mejor que .GIF. En el caso de querer plantear grandes áreas texturadas use .JPG. Lo contrario sucede con fondos degradados: .PNG es mejor, .GIF va en segundo lugar y .JPG en tercero, ya que en este orden se va notando más la unión de los dos colores difuminados al encontrarse entre sí.
• En el caso de imágenes fotográficas no se recomienda usar .PNG si vemos que, como es habitual, el formato .JPG da un peso menor en Kb.
• En el caso de trabajar con imágenes animadas, el formato .PNG no tiene nada que hacer. Es mejor trabajar con el formato GIF89a. Sin embargo .PNG tiene una derivación en otro formato, el MNG, aún bajo desarrollo y, por tanto, no en el entorno comercial de hoy en día, que sí admite este proceso.
• Si actualmente deseamos estar muy seguros de la correcta visión de nuestro documento, no es conveniente usar el formato .PNG. No todos los navegadores lo soportan.
• Es muy importante usar la extensión .PNG en las imágenes que sean grabadas en este formato. En caso contrario los navegadores no reconocerán como tales estas imágenes.

Efectos de transparencia

El formato .PNG mejora todos los efectos de transparencia vistos hasta el momento. Nosotros, para conseguirlo, necesitaremos instalar una copia del programa Photoshop 4.0, o superior, y otra de Internet Explorer 4.0 o Netscape Communicator que tengan activado el live plug-in. En el caso de trbajar con otro navegador, o con otra versión diferente, es aconsejable consultar la tabla que aparece en la parte superior de la página.

.PNG se basa, para lograr el efecto de transparencia, en unos de los canales alfa (alpha channel) que pueda tener la imagen. Es importante destacar que tan sólo admitirá grabar la imagen con un único canal alfa, por lo que habremos de seleccionar el más adecuado frente a los que pueda tener.

Un canal alfa constituye una información extra sobre la imagen. Es conveniente que este canal se presente en versión Escala de grises, de esta forma conseguiremos una mejor transición figura/ fondo con píxeles transparentes y semitransparentes. Los que son completamente blancos serán opacos, los grises semitransparentes y los negros transparentes en su totalidad. La gradación ofrecida por los semitransparentes facilitará que el probable cambio de fondo de nuestra página, una vez ya hayamos dado transparencia a la imagen, no nos haga repetir todo el proceso de nuevo, tal y como pasa con las imágenes Gifs que observan transparencia.

El uso de estos canales alfa ofrece dos posibilidades: que la transparencia rodee la imagen justo por su borde (tomando en cuenta píxeles semitransparentes) y que podamos jugar con máscaras que cambien la frontera de sus bordes.

Como nota referencial, anotar que la versión 4.0 de Photoshop muestra mejores resultados, una vez vayamos a grabar en formato .PNG y trasparencia basada en un solo canal, si la imagen tratada no viene dada en modo indexado.

Óptimos tamaño y calidad

.PNG ofrece particularidades que permiten optimizar la imagen en tres aspectos:

• Optimización del peso (kilobytes).
• Optimización de la calidad, haciendo que la imagen aparezca lo mejor posible (regulación automática de brillo/contraste).
• Optimización del modo de la correcta aparición de la imagen sea en el navegador que sea, manteniéndose en todos tal y como la hemos diseñado. Para conseguir mejor estas propiedades se aconseja usar los software Photoshop y DeBabelizer para convertir la imagen a formato .PNG.

Es preferible usar el menor número de bits posible en nuestra imagen para facilitar su bajada de la Red de redes.

Un modelo de relación número de colores/bits sería el siguiente: Con DeBabelizer se controla la relación color/bit, desde su opción Select palette > reduce colors.

Por supuesto que si lo que deseamos es optimizar la calidad de nuestro documento, hemos de tener muy claro qué imágenes nos interesan más en el formato .PNG y cuales en el .JPG. No es aconsejable apuntarse a la moda .PNG si la imagen no lo requiere.

En el apartado Cuándo utilizar PNG y cuándo no, deberemos indicar las pautas que se deben de seguir sobre ello. También es conveniente testear los resultados tanto en equipos Macintosh como en PC con el fin de asegurar que los resultados son tan óptimos como esperamos.