Otra solución para las imágenes PNG en Internet Explorer 6

La solución propuesta en varios sitios (donde lo vi) para solucionar el problema de las imágenes PNG en Internet Explorer 6 no es una buena solución porque es extremadamente lenta. Hay que darse cuenta de que, para cada imagen, ya sea <img src="..." /> en el HTML o cada elemento background-image o background que lleve el CSS , hay que ejecutar el archivo .htc con lo que hay que ir al servidor, bajarlo y ejecutarlo. Por cierto, donde está la caché cuando se la necesita…

A mi no me ha quedado otra que rendirme. Pues sí, qué queréis que os diga. Prefiero que en IE se vean peor las imágenes (ojo, siempre que no sean fondos espectaculares y tu web se base en el diseño en lugar de en la funcionalidad) pero ganar en velocidad; en mucha velocidad.

Es por eso que la otra solución que propongo es: primero, convertir todas las imágenes a formato GIF (por eso de que tengan, al menos, algo de transparencia, aunque se pueden convertir al formato que se necesite). Esto se puede hacer mediante el comando convert en Linux:

diego@dbox:~/projects/MyApp/public/images/:$ find -name ‘*.png’ | while read; do name=`basename $REPLY .png`; convert $REPLY ${name}.gif; done

Una vez hecho esto, nos creamos otro archivo CSS específico para IE donde sólo estén los selectores donde se usa background o background-image. Además, en estos selectores se debería eliminar el resto de código CSS para minimizar el ancho de banda usado por el nuevo CSS. Luego, lógicamente, cambiados todas las referencias a imágenes en PNG por las referencias a las imágenes en GIF.

Para incluir este CSS sólo en IE usamos el truco de inclusión condicional (sólo válido para IE, obviamente):

<!––[if lte IE 6]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” media=”all” />
<![endif]––>

Y para las imágenes dentro del HTML usamos un poco de javascript (yo, personalmente uso jQuery):

$(“document”).ready(function() {
$(“img”).each(function() {
var src = $(this).attr(“src”);
src = src.substring(0,src.length-4);
$(this).attr(“src”,src + “.gif”);
});
});

Esta no es ni de lejos la solución definitiva y, ni muchos menos, es una buena solución, pero es mucho más rápida que la solución del archivo .htc porque una de las cosas que hace es que sí que usa la caché para las imágenes, con lo que después de cargarlo la primera vez, las siguientes van más rápido.

Ahora sois vosotros los desarrolladores los que tenéis que decir qué os interesa más, si que vuestra página se vea perfecta en IE a costa de sacrificar la velocidad, o que vaya rápido a costa de sacrificar vuestro diseño. Yo, en este preciso caso, elegí la velocidad. La proxima vez ya se verá.

3 personas han comentado en “Otra solución para las imágenes PNG en Internet Explorer 6”

  1. Hector dice:

    Me mola tu solución, la verdad…

    Ostias, te iba a poner una libreria de javascript que lo que hacia era sacar una capa arriba a la derecha que te recordaba que actualizaras tu IE6… Lo jodido es que, ahora, la url en la que se descargaba, apunta a la pagina de Microsoft de actualizacion del IE… Putos vendidos de los cojones…

    http://icoloma.blogspot.com/2008/07/way-to-get-rid-of-ie-6.html

  2. Lek dice:

    En 86400 ya tuvo que cambiarlo porque la página iba lenta de pelotas.

    Personalmente soy de la opinión de ignorar a esos usuarios, pero claro, no me dedico a la web.

  3. Diego dice:

    Yo me dedico a la Web y mi opinión es la misma, no ignorarlos, pero sí hacer que la vean mal y poner un aviso diciendo que se ve mejor con Firefox (vamos, con cualquier navegador que cumpla estándares).

Deja tu comentario:

Puedes usar las etiquetas XHTML <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

?

Please leave these two fields as-is: