Imágenes con puntos blancos en Internet Explorer

¿La imagen que has colocado en tu sitio web no posee una correcta visualización? Pues seguramente se debe a ciertas irregularidades con el navegador Internet Explorer, y para ello verás a continuación algunos consejos para solucionar el problema.

El conflicto con las capturas puede presentarse cuando posees imágenes que tienen ciertos efectos de fundido (por ejemplo, con fadeIn() y fadeOut() de jQuery). Pues bien, si verificas en otro browser no hallarás problemas, pero en Internet Explorer algunas de las fotos se ven con puntos blancos en el fondo.

En este caso, el inconveniente que tiene el software en versiones anteriores a la 9, es que no posee activo el filtro propietario filter:alpha(opacity=X) (X será un valor entre 0 y 100), que te marca la opacidad de la imagen. Este estilo es el equivalente a la propiedad CSS3 opacity: X (X será un valor entre 0.0 y 1.0). Esta es la forma que tiene jQuery y otros frameworks javascript de hacer el efecto "fundido".

Por lo general, dicho efecto funciona correctamente, pero suele poseer dificultades visuales con el color #02050a (gris), por lo cual tratará los píxeles de ese tono como transparentes. En este sentido, aparecerán algunas fotografías con "puntos blancos" que se traducen en marcas en la gama de fondo.

Para que puedas observar realmente la complicación, a continuación se mostrará un ejemplo respectivo al filtro filter:alpha(opacity=100):

Captura: lobo aullando a la luna. Foto que podrás contemplar desde cualquier navegador a menos que estés utilizando series previas a Internet Explorer 9.

Ahora bien, si realizas una comparación entre navegadores, te enfrentarás a otro ejemplo más específico:

Soluciones al problema

Las soluciones a este problema pueden ser dos:

• 1. Una alternativa es colocar el fondo del contenedor de la imagen con color #02050a. Así, aunque los píxeles sean transparentes, en el resultado final tendrán su color real. Esta solución puede hacer que las transiciones entre fotos (en el caso de fundidos) sean más oscuras.

• 2. Otra opción, es modificar el tono de los píxeles de la imagen por otro similar. Esto podrás hacerlo de forma sencilla en, por ejemplo, Photoshop mediante la ruta: Imagen > Ajustes > Reemplazar color. Luego, deberás seleccionar la gama #02050a por #02050b (u otro parecido). El cambio será imperceptible e Internet Explorer mostrará la imagen correctamente.