Как предотвратить размытие при изменении размера изображения в Chrome?

Изображения действительно размыты, если вы изменяете размер изображения, например, показываете небольшое изображение с измененными размерами, например;Как предотвратить размытие при изменении размера изображения в Chrome?

<img src="largeimage.jpg" width=30 height=30 \>

Его не размыто в других браузерах, но в Chrome его настолько размыто. Я смотрел на www.twitter.com, их новый дизайн имеет множество изображений с измененной размерностью, и каким-то образом им удалось очистить размытие изображений. Я пробовал это;

image-rendering: crisp-edges; 
image-rendering: pixelated;

К сожалению, это не решит проблему.

Ниже приведено сравнение. Слева видно, что он довольно размытый по сравнению с тем, что справа:

Каков правильный способ сделать это?

источник

2016-09-06 user3304007

Не могли бы вы опубликовать сравнение размытости и исходного изображения или предоставить plnker/codepen и т. Д.? –

Добавлено изображение на вопрос. – user3304007

Я действительно посмотрел на измененные изображения на twitter.com с помощью firebug и инструментов для веб-разработчиков, но не смог узнать, как им удалось устранить проблему. – user3304007

Вы пробовали это? :)

filter: blur(0); 
-webkit-filter: blur(0); 
transform: translateZ(0); 
-webkit-transform: translateZ(0);

источник

2016-09-06 13:10:27 Quist

Я нахожу, что это 'transform: translateZ (0);', что влияет на это, не так сильно фильтр – rwcorbett

Я заметил, что Chrome делает лучшую работу при изменении размера изображения с определенным процентом. Например, если вы измените размер изображения на 375 пикселей до 100, он будет размытым, но если вы измените размер от 200 до 100, он сделает лучшую работу, потому что это приятная даже 50-процентная шкала.

Без редактируемой среды тестирования я не уверен, что это исправит это для вас, но это стоит того.

источник

2016-09-06 13:27:43 kthornbloom

Как предотвратить размытие при изменении размера изображения в Chrome?

ответ

Смежные вопросы