image - screenshots - ¿Por qué Firefox es tan malo al cambiar el tamaño de las imágenes?

imagenes en html5

Question

A la izquierda está el PNG original y, a la derecha, se reducen las versiones a aproximadamente la mitad del tamaño de la señal con <img width y height . Ver [Enlace eliminado].

¿Por qué la imagen redimensionada se ve tan borrosa en Firefox? ¿Hay algo que pueda hacer al respecto sin cambiar el archivo de imagen? La falta de claridad es particularmente molesta si la imagen contiene grandes cantidades de matemáticas o texto.

Answer 1

Ahora (2017) el error está cerrado hace 2 años. Una prueba corta:

FF, 50%:

FF, 25%:

Answer 2

Creo que su respuesta está en el enlace de arriba https://developer.mozilla.org/En/CSS/Image-rendering : ''Actualmente auto y optimizeQuality son iguales por defecto, ambos dan como resultado un remuestreo bilineal''. ''valor predeterminado IE8 +: bicúbico (alta calidad)''

A continuación, vea: http://www.codinghorror.com/blog/2007/07/better-image-resizing.html ''Al hacer una imagen más pequeña, utilice bicúbica, que tiene un efecto de nitidez natural. Desea enfatizar los datos que permanecen en la nueva imagen más pequeña después de descartar todos los detalles adicionales de la imagen original. ''

Puedo pensar en un par de soluciones posibles, pero tampoco son simples:

1. Cambiar el tamaño de la imagen en el servidor. Puede servirlo a la mitad de su tamaño y permitir que Firefox lo amplíe al máximo (lo que presumiblemente estará bien en) o tener diferentes URL para los diferentes tamaños de imagen.
2. Es posible que pueda hacer que esto funcione en el navegador con complementos (pero el ejemplo que encontré en realidad no hace lo que necesita, así que lo eliminé).

Answer 3

Hay un ticket de error de larga data archivado en Bugzilla relacionado con la reducción de imagen de Firefox. Puede que desee controlar el ticket para rastrear su resolución final o contribuir con un parche si se siente capaz de hacerlo.

La mejor solución es usar la propiedad de transform CSS para aplicar una pequeña rotación a la imagen del problema y forzar la representación de subpíxeles, como se detalla en la respuesta de Ryan Wheale .

Answer 4

La documentación de renderización de imágenes vinculada desde Firefox desdibuja una imagen cuando se escala a través de css o la respuesta de estilo en línea a la que Su ''hace referencia incluye instrucciones para usar image-rendering:optimizeQuality (que corrigió el problema en mis pruebas en FF4) - ejemplo:

Answer 5

Sé que es tarde, pero puedes engañar a Firefox para que mejore la imagen aplicando una rotación muy pequeña. Traté de translate() la imagen para obtener el mismo efecto ... en vano.

CSS

.image-scale-hack {
    transform: rotate( .0001deg );
}

Javascript

if( "MozAppearance" in document.documentElement.style ) {
    $(''.logo img'').addClass(''image-scale-hack'');
}

Evito olfatear el navegador a toda costa. Pedí este sniff de yepnope.js y no me siento mal por eso.

También cabe destacar que este mismo truco se puede utilizar para forzar la representación de imágenes subpíxel tanto en webkit como en firefox. Esto es útil para animaciones muy lentas, mejor explicado por ejemplo:

http://jsfiddle.net/ryanwheale/xkxwN/

Answer 6

TL; DR: no es probable que la escala de la imagen se solucione pronto. Acerca de cualquier lugar.

Versión más larga:

Eris Brasseur tiene una página que trata muy bien con la pregunta más amplia "¿Por qué es tan malo cualquier software de escalado de imágenes?"

http://www.4p8.com/eric.brasseur/gamma.html

Dado que la posición del W3C sobre este tema es más o menos que es mejor tener una implementación incorrecta pero igualmente incorrecta en todas partes, rechazan cualquier tratamiento adecuado con Gamma (lo que complicaría las cosas un poco). Por lo tanto, cualquiera que esté acostumbrado a los estándares web es probable que continúe ignorando Gamma, dando lugar a los efectos descritos por Eric y en este hilo. Esto asegura que incluso el downscaling está lejos de estar bien definido, como lo expresa Jeff Atwood en un artículo vinculado en otra respuesta.

En un entorno como este, los métodos como Lanczos prosperan, cuya fama se debe principalmente a que funcionan bastante bien, incluso si se implementan incorrectamente.

En otras palabras, los navegadores son el software equivalente a las hamburguesas de McDonald''s, y ese hecho se mantendrá. Sus implicaciones no necesitan, pero las probabilidades están sesgadas.

Answer 7

Una solución para este problema es simplemente cambiar el tamaño de la imagen original con un editor de imágenes al tamaño deseado y usar la imagen como está, sin definir su ancho y alto en la hoja de estilos.