Uninstallme

Cuando forzamos el tamaño de una imagen mediante CSS reduciendo su ancho o alto original, nos encontramos con que Internet Explorer hace cosas feas. A falta de palabras para describirlo, nada mejor que una captura:

Imágenes redimensionadas en Explorer 7

En el blog de ZURB, que por cierto, me encanta, nos muestran un pequeño truco para suavizar las imágenes en Internet Explorer entre otras técnicas para mejorar la presentación visual en varios navegadores

img{-ms-interpolation-mode: bicubic;}

Este método no funciona en Internet Explorer 6, para el que proponen usar algo un poco más sucio que lo anterior:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/path/to/image.jpg', sizingMethod='scale');

Afortunadamente, Internet Explorer 8 no tiene este problema.

Demo suavizado de imágenes (sólo para IE 7)

Actualización: script para aplicar el filtro a las imágenes redimensionadas

En este comentario proponen el uso de un pequeño script en jQuery para detectar si una imagen está redimensionada y en ese caso aplicarle el estilo correspondiente para IE 7 y el filtro para IE 6. De esta forma evitamos tener código no válido en la CSS y aplicamos estos estilos sólo a las imágenes que lo requieran. Ya que el código no aparece muy bien formateado en los comentarios, lo pego aquí.

Gracias por la aportación!

jQuery.each($('img'), function() {
   ancho_forzado = $(this).width();

   img = new Image();
   img.src = $(this).attr('src');
   ancho_real = img.width;

   if (ancho_forzado != ancho_real) {
      if ($.browser.version.substr(0,1) == '7') {
         this.style.msInterpolationMode = "bicubic";
      } else if ($.browser.version.substr(0,1) == '6') {
         $(this).attr('width', ancho_forzado);
         this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img.src + "', sizingMethod='scale')",
         this.runtimeStyle.paddingTop = this.height,
         this.runtimeStyle.height = 0;
      }
   }
});