Почему на сайте размыто фото, через панель разработчика становится чётким?

Question

[GenryLettem]

Изображение в карточке товара, сайт на Wordpress.
Открываю через панель разработки в Chrome c небольшим изменением размера экрана - фото становится чётким. Возвращаюсь к полной версии - становится размыто. Изменение размера на адаптив не влияет.
В чём может быть причина и как можно исправить?

https://oblako-sharov36.ru/product-category/shary-...

Comments

[La1serg]

Ссылку в студию

[Stalker_RED]

Вангую, что размер на сайте не совпадает с оригинальным.

[xmoonlight]

Stalker_RED, или CSS-фильтр наложен в стилях.

[tyzberd]

у картинки трансформ с дробным значением, или 50% и при вычислении получается дробное. Или тоже самое с шириной

[GenryLettem]

La1serg, https://oblako-sharov36.ru/product-category/shary-...

Answer 1

[Vladislav Vlastovskiy]

Возможно, и это более всего вероятно, физический размер картинки меньше, чем размер картинки для отображения, что приводит к программному увеличению изображения. Проверьте размер тега изображения в HTML, и реальный размер изображения отображаемого в этом теге.

Comments

[GenryLettem]

https://oblako-sharov36.ru/product-category/shary-...

Размер блока 296px, а размер картинки 300*300px

[Stalker_RED]

GenryLettem, таки я угадал, ресайзится браузером.

[GenryLettem]

Stalker_RED, Сменил на 300 размер блока, стало нормально. Получается, что при уменьшении картинки тоже теряется качество?

[Stalker_RED]

GenryLettem, а как иначе? Это может быть не очень заметно, смотря какая картинка и какие алгоритмы сжатия, но вообще при любом ресайзе качество теряется.

В некоторых случаях, когда картинка изначально "убитая" можно получить "типа улучшение" при уменьшении.

[GenryLettem]

Stalker_RED, Спасибо