Solución al problema de los PNGs transparentes en Internet Explorer 6

nullAunque por fin algunos de los grandes portales (entre los que destaca Youtube) han optado por dejar de dar soporte al nefasto y odiado por igual IExplorer 6 (sobre todo si eres diseñador gráfico y estás cansado de que Microsoft se pase por el forro los estándares definidos haciendo valer el predominio de su navegador) los que no tenemos la suerte de tener webs tan influyentes nos vemos resignados a seguir dando soporte a dicha versión del navegador (es verdad que tiende a desaparecer pero las estadísticas muestran que siguen siendo demasiados los que utilizan la versión 6 cuando ya está en la calle la 8).

Si estás cansado de probar cosas y quieres una solución sencilla al problema de la transparencia de imágenes PNG sin tener que complicarte la vida con hojas de estilos, scripts exotéricos o soluciones en función del navegador que use el cliente te recomiendo que sigas el siguiente truco.

Objetivo perseguido

La finalidad del presente artículo es conseguir que una imagen como ésta

null

pueda verse como lo haría en cualquier navegador decente; o lo que es lo mismo…así

null

Cómo conseguirlo

  1. Abre en  GIMP la imagen a procesar (en nuestro caso, y a modo de ejemplo, utilizaremos la siguiente).
  2. Elige un color de fondo (si utilizas la herramienta cuentagotas utiliza la flecha curvada para pasar el color seleccionado al fondo como el tono de verde que puede verse en la captura) lo más parecido posible al lugar en el que va a ser colocada la imagen
  3. null

  4. Aplana la imagen
  5. null

  6. Añade canal alfa a la capa del logotipo
    null
  7. Con la herramienta selección de color elige el fondo de la imagen
    null
  8. Limpia el color de fondo (tecla Supr)
    null
  9. Convierte la imagen a modo de color indexado
    null
  10. Guarda la imagen como png (ten la precaución de activar la opción de guardar los valores de los píxeles transparentes que puedes observar en la imagen)
    null

Conclusión

Una solución bastante aceptable que nos permitirá utilizar imágenes transparentes (incluso en IE6) sin tener que preocuparnos por el navegador que utilicen nuestros visitantes.

Si tienes que utilizar el truco para una gran cantidad de imágenes es posible que te interese automatizar el proceso creando un filtro o plugin para Gimp (instrucciones de cómo hacerlo en el enlace).

NOTA: Rafa, espero que te sea de utilidad (y que hayas llegado leyendo hasta aquí 😉 )

11 comentarios en “Solución al problema de los PNGs transparentes en Internet Explorer 6

  1. uno dijo:

    Bien y mal. Bien porque es una solución a un problema (y como siempre muy bien explicado), y mal por seguir alimentando a gente floja que no quieren avanzar y se niegan a mover un dedo por solucionar nada; será por tanto que no les importa ni la seguridad, ni la navegabilidad, con lo cual tampoco les importará demasiado si las imágenes se ven bien o no (y no digamos nada de si es software privativo o libre). Luego se extrañan si pillan más virus que un bebé en una guardería…

  2. Que no quieran aprender o hacer uso del conocimiento compartido es una elección que cada cual debe tomar libremente.

    Que por nosotros no quede compartir esos pequeños trucos que aprendemos/utilizamos en el día a día si pueder servir a alguien con ganas de aprender y/o mejorar

    Un saludo @Uno

  3. maria dijo:

    Siento hasta verguenza al escribir esto pero resulta que yo soy de la generacion del cassette como gran avance tecnologico donde el mayor descubrimiento era girar la cinta con un lapiz, por lo que me cuesta muchisimo esto de la compu y como resultado ya casi no tengo ningun dominio de mi pc y mi vida privada.No tengo tiempo ni recursos como para aprender informàtica y es a travès de esta pàgina que he logrado algunos avances pero me es muy dificil entender algunos tèrminos, sobre todo en eso de la seguridad en la red.Me encantaria que si se puede explicar de una manera màs sencilla ,algo asì como con ·manzanitas” para esta generacion que se quedò en el pasado.Gracias por ayudar.

    • Pues no sientas vergüenza por preguntar no te vayas a parecer a los alumnos que por sus inseguridades no se atreven a hacerlo por miedo a parecer “tontos”.

      Me alegra que sientas curiosidad por todo lo relacionado con la informática y que me hayas tomado como una de las distintas fuentes para adquirir nuevos conocimientos y destrezas (gracias)

      Que conste que yo también he rebobinado cintas con un lápiz pero básicamente porque era el medio en el que se almacenaban los juegos y programas en mi primer ordenador (un MSX Spectravideo) 😉

      La seguridad en la red es un tema muy amplio y no tan sencillo como cabría esperar pero dependiendo de tus necesidades seguro que conseguimos algunos logros, ¿en qué andas metida o qué te preocupa?

      Si quieres hablamos a través del soporte para no llenar este artículo de comentarios OFF_TOPIC (o no relacionados con el tema principal)

      Gracias y un saludo.

  4. Pingback: BlogESfera.com
        • Aunque no es exactamente de lo que andamos hablando, aquí puedes ver cómo crear un proxy inverso utilizando vnc; últimamente ando bastante más corto de tiempo de lo habitual y no sé si podré “dedicarte” un artículo sobre el tema.

          Como siempre, prometerte intentarlo en cuanto encuentre una oportunidad porque podría ser interesante para muchos de los lectores, ¿alguien más está interesado en esta información?

          No obstante en Internet debe haber información al respecto: si alguien encuentra un buen tutorial del tema que haga el favor de publicarlo (ni para buscarlo cuento con tiempo…¡qué pena!)

  5. guillem dijo:

    Hola,

    pero el problema de ie6 con los png transparentes no era que convierte todo lo que hay en la imagen en un una imagen? es decir, que si usamos un png para fondo y encima de eso hay enlaces o botones estos dejan de ser útiles ya que han sido convertidos en una imagen?

    saludos!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s