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.