Firefox difumina una imagen cuando se escala a través de CSS externo o estilo en línea.

Question

Cuando escalamos visualmente una imagen, Firefox 3 la desenfoca. Firefox 2 y otros navegadores no, que es el comportamiento que espero. Esto es especialmente cojo para crear un juego basado en web usando png o gif sprites.

Por ejemplo, cuando se muestra una imagen de 100x100 en Firefox 3 como esto:

<img src="sprite.gif" width="200" /> 

o

<img src="sprite.gif" style="width:200px; height:200px;" /> 

se ve borrosa en FF3, no en IE.

¿Alguna idea sobre cómo prevenir esto?

Answer 1

descubrí esta nueva característica de Firefox:

http://developer.mozilla.org/En/CSS/Image-rendering

Así que poner esto en tu CSS lo arreglará:

image-rendering: -moz-crisp-edges; 

pensé en compartir esta información. Perdón por responder mi propia pregunta;)

Answer 2

Está escalando la imagen desde su tamaño original - el efecto deseado es normalmente para tener una escala suave, y parece que FFX3 ha comenzado a hacer esto (supongo que es un filtro bilineal). Creo que si miras Safari y Opera, verás que también filtran la imagen.

Answer 3

En realidad, prefiero la forma en que FF lo hace, ya que utiliza la interpolación al escalar las imágenes, en la mayoría de los casos esto hace que las imágenes se vean mucho mejor que en IE. Sin embargo, creo que puede haber casos en los que no es bueno, como cuando se usan sprites.

No creo que haya una manera de evitarlo.

Answer 4

Debe evitar escalar la imagen en el lado del cliente. Escalar una imagen hacia arriba es como hacer zoom, el navegador no tiene la información para que la imagen lo muestre en una resolución más alta de lo que realmente es, por lo que no puede hacer eso sin difuminar la imagen, tal vez no se note en IE, intente cambiando 200px a 400px.

Answer 5

Me preguntaba a mí mismo acerca de esta, pero parece que está codificado en ff3 :( http://forums.mozillazine.org/viewtopic.php?f=7&t=752735&p=5008845

FF2 No hacer ninguna interpolación

es decir, no por defecto, pero puede convertirlo en: http://www.joelonsoftware.com/items/2008/12/22.html

Answer 6

Desafortunadamente no tengo una solución para esto, pero esto es un motivo de ruptura completa para un gran número de usuarios (por ejemplo, artistas de píxeles) Si se ve afectado por esto, por favor envíe sus comentarios a http://hendrix.mozilla.org/ y voto. para el corresponding bug.

Es decepcionante que Mozilla esté ignorando este problema. Para los muchos usuarios afectados, significa que no hay más remedio que cambiar de navegador. IE tiene un CSS property para seleccionar el filtro de cambio de tamaño, por lo que esta parece ser la mejor opción.

Aquí está el bug report para Google Chrome, que tiene el mismo problema que Firefox. No sé nada de Opera, pero escuché que usan algunas heurísticas para una escala automática más sana.

Answer 7

http://developer.mozilla.org/En/CSS/Image-rendering solo se aplica a las compilaciones de troncales actuales de Firefox (Minefield/3.6a1pre/Gecko 1.9.2). Esta característica no está en Firefox 3.0 y no estará en la próxima versión 3.5. El primer lanzamiento con esa opción será el próximo lanzamiento importante después de 3.5 que actualmente se encuentra en las primeras etapas de planificación, con un lanzamiento estimado en 2010.

Answer 8

Me pregunto si obtendrías mejores resultados si creas los sprites al tamaño más grande que esperas para ser vistos, y luego escalarlos según sea necesario?

Answer 9

Internet Explorer 8 también "desenfoca" las imágenes de forma predeterminada al escalarlas. Esto es realmente algo bueno. La mayoría de las imágenes se ven mejor cuando se escalan utilizando un muestreo bicúbico en lugar del muestreo del vecino más cercano.

Si desea que Internet Explorer 8 para reducir las imágenes como las versiones precedentes, así, poner esto en tu CSS:

-ms-interpolation-mode: nearest-neighbor; 

Si desea que Internet Explorer 7 para reducir las imágenes como el IE 8, utilice esto:

-ms-interpolation-mode: bicubic; 

Aparte del aspecto de la imagen, también debe tener en cuenta el rendimiento. Descubrí que IE 7 e IE 8 necesitan mucha más potencia de CPU para escalar imágenes cuando se utiliza muestreo bicúbico que Firefox 3.6.