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á.
).
