Transparencia en formatos gráficos para web GIF y PNG

  • Por
Como hacer imágenes transparentes para la web, con formatos GIF y PNG, para eliminar los molestos halos.
Este taller de HTML vamos a mostrar un ejemplo de transparencia en formatos gráficos GIF y PNG, comprobando sus diferencias y las ventajas que nos aporta PNG de 24 bits para eliminar los halos. El que vamos a ver es un ejemplo muy simple, pero muy interesante para ilustrar un modo de hacer transparencias que siempre quedan bien, sobre cualquier fondo.

Los halos son los bordes que a veces salen en las imágenes que tienen transparencias, que resultan como un borde de color que rodea las siluetas de los dibujos de la imagen. Aunque no sepas lo que es un halo, seguro que has visto diversas páginas web que tienen halos en sus imágenes, efectos que quedan muy mal y dan mala imagen del desarrollador de la página.

Los dos formatos que soportan transparencia, que podemos utilizar para el desarrollo de una página web, son el GIF y PNG. El formato PNG es muchas veces desconocido por los desarrolladores, o simplemente ignorado, porque anteriormente no era compatible con todos los navegadores. En el momento actual, ningún navegador tiene problemas para mostrar los archivos PNG, pero como este formato no se empezó a utilizar desde el principio muchos de los desarrolladores no lo usan habitualmente.

En este taller vamos a utilizar un par de imágenes, que son estas:

GIF
PNG-24 bits

Como hemos podido comprobar, tenemos dos imágenes, en los dos formatos mencionados: GIF y PNG. Podemos ver que en este caso muestran pocas diferencias, o más bien ninguna a simple vista. Las dos se ven igual de bien, aunque realmente no se nota que sea una imagen transparente porque realmente las hemos colocado sobre fondo blanco.

Veamos estas dos imágenes sobre un fondo de otro color:

GIF
PNG-24 bits

En este otro caso todo va bastante bien, las diferencias son casi inapreciables. El fondo de color rosa es bastante claro y no permite ver realmente lo que queremos mostrar en el ejemplo. Así que vamos a mostrar estas dos imágenes sobre un fondo más oscuro, que sí nos va a servir para ver el efecto desagradable que empieza a acusar el formato GIF.

GIF
PNG-24 bits

En esta muestra podemos ver los famosos halos, en el formato GIF. Son esa silueta blanca que aparece alrededor de los dibujos de la imagen.

¿Por qué ocurre eso?

El borde de la figura está suavizado, por lo que los píxel alrededor de esta tienen tonalidades que no son directamente el color de la figura ni el transparente del fondo. Cuando hacemos esta imagen con Photoshop, o cualquier otro programa de diseño gráfico, nos va ocurrir esto con el suavizado, porque el siempre tiende hacia un color de fondo, en este caso el blanco. A no ser que quitásemos el suavizado no quitaríamos los halos, así la forma tendría un color y luego directamente aparecería el transparente, pero eso os puedo asegurar que hará que la imagen pierda bastante calidad.

En GIF, con un poco de trabajo lo podemos arreglar, simplemente con nuestro programa de diseño gráfico hacemos la figura sobre otro fondo, del color que necesitemos. Es decir, dibujamos la forma directamente sobre un fondo del mismo color que el de donde la pensamos colocar. Luego marcamos como transparente el color de fondo. El suavizado permanecerá, tendiendo a ese color en lugar del blanco. Pero claro, siempre tenemos el problema que la imagen sólo nos servirá para fondos de la tonalidad para la que la hemos preparado, o una muy similar.

Con el formato PNG-24 bit no tenemos ese problema, la imagen continúa transparente. Esto resulta una ventaja bastante interesante, porque nos servirá siempre, independientemente del fondo sobre el que la pongamos.

Ahora vamos a ver el ejemplo sobre un fondo negro:

GIF
PNG-24 bits

Este es el peor de los casos, donde el halo resulta más patente. Es porque habíamos creado la imagen sobre fondo blanco y el suavizado blanco alrededor de la figura contrasta exageradamente sobre el negro de fondo.

Mientras tanto, el formato PNG sigue comportándose igual de bien con la transparencia. Incluso si ponemos la imagen sobre un fondo que tenga una textura o cualquier otro dibujo, el PNG sigue viéndose perfecto.

GIF
PNG-24 bits

Conclusión sobre transparencia GIF y PNG

No se debe desestimar PNG. Al contrario, hemos querido resaltar sus ventajas, a la hora de tratar la transparencia, con respecto al formato GIF. Las transparencias que conseguimos con PNG son mucho más versátiles porque las podemos utilizar sobre cualquier fondo que necesitemos.

Pero el formato GIF también es interesante como formato y también para hacer transparencias, por ello no conviene rechazarlo de entrada igual que posiblemente nos había ocurrido con el PNG. Tenemos un artículo en DesarrolloWeb.com que tal vez te interese leer sobre Cómo hacer una transparencia con GIF sin halo.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Antonio Santana

03/1/2008
Bien, esto está muy bien.
Pero no debemos obviar que esta solución no es 100% visible en IE 6 y anteriores.
Casualmente, me encuentro peleando con una maquetación con PNGs y el IE 6 me tiene muy retrasado por el dichoso bug que tiene con los PNGs.
También quiero citar, que los filtros de que disponen en su core para tratar los PNGs las versiones anteriores al IE 7, producen comportamientos inesperados en la interpretación de las CSS.

Moises Lopez

03/1/2008
Estoy de acuerdo con antonio .. debemos de recordar que mucha gente todavia utiliza el IE 6 y los pngs causan muchos problemas en esta version y las anteriores de este navegador, los filtros que existen no son funcionales en su totalidad ..

Juan Miguel

03/1/2008
Las versiones de Internet Explorer 6.0.2900.21800 hacia atrás muestran todos los archivos PNG sin ser transparencias... esto se supera con un archivo Javascript que hace que estos se vean siempre transparentes. En casi cualquier navegador.. Sólo deberán colocar un código sencillo en el html que los contenga y un archivo de código que lo habilite y ya estaria listo.

Tadeo Guerra

03/1/2008
Saludos,

con este articulo que deja muy claras las diferencias entre los formatos gif y png los felicito! en especial al autor,

Solo quería sugerirles que coloquen entre la info, que el png 24 no funciona correctamente sobre MSIE, del 6 para abajo si no me equivoco, y hay que utilizar unos truquillos con JS y tener unos scripts adicionales para producir el efecto,

no basta solamente con elaborar la img en PNG-24, firefox por ej. no tiene este problema ni opera ni todos los apegados a los estandares,

pero como el MSIE sigue siendo muy utilizado en especial en sus vers anteriores al 7, bueno, es bueno acotar la necesidad de estas "librerias" adicionales para lograr producir el efecto...

Ricardo Ernesto Elías

04/1/2008
Me parece excelente la explicación detallada en el artículo. Sólo tengo una observación. No se si el autor ya notó que en el Internet Explorer versión 6.0 no hay buen soporte para imágenes transparentes de formato PNG.
Se que el Internet Explorer es muy odiado por no apegarse a estándares, pero es una realidad que una buena parte, por no decir la mayoría de usuarios es el navegador que más utiliza.
Al cargar la página con el artículo el fondo de las imágenes PNG se ve gris siempre en el Internet Explorer 6.0.

Ricardo Ernesto Elías G.

04/1/2008
Creo que Juan Miguel ha resuelto el problema de todos los comentarios. Gracias por el script, lo pienso utilizar, muchas gracias realmente me ha sido util este artículo y los comentarios que se han publicado. Muy finos todos.

Julio

05/6/2009
GIF Vs PNG
Primero que nada, veo que la mayoría de lo que publicaron comentarios, no leen los comentarios anteriores porque todos dicen lo mismo.

En segundo lugar, es cierto que el uso de javascript puede ayudar a la visualización de los PNG's en internet explorer 6, pero esto tiene algunos inconvenientes en la validación de web en XHTML 1.0 Transitional, por lo que preferí no usarlo y usar GIF's sin bordes atenuados y con la menor cantidad de curvas, por ejemplo hacer un gif en forma de rectángulo o cuadrado, con bordes no atenuados se ven bien, si en cambio la forma es irregular, se ve un escalonamiento de pixeles que produce un efecto desagradable.

Francisco Hernández

09/6/2009
asesoría
Mi idea es que el visitante pueda trasnparentar una imagen por niveles, es decir, al 5%, al 10%, etc., para combinarla con otras imágenes de fondo. Si se deben precargar todos los niveles de transparecia que requiero necesitaría precargar 210 imágenes previamente tratadas como transparencia ?demasiada espera para el cibernauta?, mientras que si existe algún script html o java que permita transparentar la imagen, de forma que no se tenga que precargar una imagen por cada nivel de transparencia, tendría que precargar sólo 14 imágenes. ¿Existe ese script html o java?