Размытые изображения с уменьшенным масштабом в Chrome

Question

Я использую гравитары, и это довольно часто, когда я уменьшаю их с помощью CSS, и я считаю, что Google Chrome делал это правильно до недавнего времени (возможно, я ошибаюсь, не уверен, когда именно возникла проблема), но теперь изображения становятся размытыми при масштабировании, и это происходит только в Chrome, FF уменьшает масштабирование. Я пробовал использовать image-rendering, но это не решает проблему. Может ли кто-нибудь дать мне подсказку, как лучше всего это сделать?

Пример можно найти here, откройте его в Chrome и затем в FF, он должен быть более размытым в Chrome, чем в FF.

Спасибо

Answer 1

я нашел точно такой же вопрос на Mac: Firefox уменьшение масштаба изображения очень хорошо, в то время как хром делает его выглядеть размытыми, что очень плохо. Меня не волновало время и скорость рендеринга, мне нужен логотип, чтобы выглядеть ХОРОШИМ!

Я нашел следующее правило CSS исправляет Chrome для Mac

image-rendering: -webkit-optimize-contrast; 

Answer 2

Я обнаружил, что лучший способ решить эту проблему, чтобы просто использовать SVG. Другой вариант - использовать запросы css media для загрузки адаптивных размеров изображений.