Como hacer imágenes transparentes para la web, con formatos GIF y PNG, para eliminar los molestos halos.
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...