El escalado de la imagen causa mala calidad en Firefox / Internet Explorer pero no en Chrome

Verhttp: //jsfiddle.net/aJ333/1 en Chrome y luego en Firefox o Internet Explorer. La imagen es originalmente de 120 px, y la estoy reduciendo a 28 px, pero se ve bastante mal sin importar a qué escala.

La imagen es PNG y tiene un canal alfa (transparencia).

Aquí está el código relevante:

HTML:

<a href="http://tinypic.com?ref=2z5jbtg" target="_blank">
    <img src="http://i44.tinypic.com/2z5jbtg.png" border="0" alt="Image and video hosting by TinyPic">
</a>​

CSS:

a {
    width: 28px;
    height: 28px;
    display: block;
}

img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: -moz-crisp-edges;
    -ms-interpolation-mode: bicubic;
}

Losimage-rendering y-ms-interpolation-mode líneas de CSS no parecían hacer nada, pero las encontré en línea mientras investigaba el problema.

Respuestas a la pregunta(20)

Su respuesta a la pregunta