Transparencia en formatos gráficos para web GIF y PNG

18/12/07 - 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ía, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez* Director de DesarrolloWeb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo. Versión imprimible del artículo Enviar artículo por e-mail Publicar un comentario del artículo

Añadir un comentario del artículo Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.

Se muestra un comentario revisado

Añadir un comentario del artículo

Comentarios sin revisar

Añadir un comentario del artículo Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.

Ver los comentarios no revisados

Añadir un comentario del artículo

Enlaces:

Maestrosdelweb

  Ir arriba