html - quality - ms-interpolation-mode

Imágenes reducidas borrosas en Chrome

Question

Estoy usando gravatares y es bastante frecuente cuando los reduzco con css, y creo que Google Chrome solía hacerlo correctamente hasta hace poco (puedo estar equivocado, no estoy seguro de cuándo comenzó exactamente el problema) pero ahora, las imágenes se vuelven borrosas cuando reducido, y eso solo ocurre en Chrome, las escalas de FF son bastante buenas. Intenté usar image-rendering pero no resuelve el problema. ¿Alguien puede darme una pista de cuál es la mejor manera de hacerlo?

El ejemplo se puede encontrar here , abrirlo en Chrome y luego en FF, debería estar mucho más borroso en Chrome que en FF.

Gracias

Answer 1

Descubrí que la mejor manera de resolver este problema es usar un svg. Otra opción es utilizar consultas de medios css para cargar tamaños de imágenes adaptables.

Answer 2

Encontré exactamente el mismo problema en Mac: Firefox reduce la escala de la imagen muy bien, mientras que Chrome hace que se vea borrosa, lo cual es muy malo. No me importa el tiempo o la velocidad de renderizado, ¡necesito que el logotipo se vea bien!

Encontré la siguiente corrección de regla CSS Chrome para Mac

image-rendering: -webkit-optimize-contrast;