Почему при уменьшении картинки с помощью css её качество теряется?

Question

[Сергей Хлопов]

Здравствуйте подскажите пожалуйста, ширина картинки - 1381px, и на этом разрешении она нормально выглядит, при уменьшении её, т.к. на некоторых экранах она не помещается, качество картинки теряется, становиться размытым немного, возможно ли вообще исправить такую проблему ? Заранее благодарю за ответ!

Comments

[Rustam Bainazarov]

Рендеринг. Субпиксели. Растеризация.

Это нормально, словом. В идеальном мире картинка должна быть пиксель в пиксель с разрешением экрана.

Если, к примеру, на transform уменьшать, то можно и не то увидеть.

[Евгений Вольф]

Почему при уменьшении картинки с помощью css её качество теряется?

А при уменьшении её каким-то другим способом (не CSS) - её качество не теряется?

Answer 1

[Moskus]

Если вы просто заставляете browser показать картинку меньшего размера, в действие вступают методы быстрой интерполяции, которые использует browser. Любое уменьшение не в целое число раз (например, в два или три) вызывает ситуацию, когда, например, три пикселя превращаются в два (когда вы картинку шириной в 600 пикселей показываете шириной 400). Цвета смешиваются, границы размываются.
Предварительная генерация изображений для разных разрешений или использование векторных изображений решают эту проблему так или иначе. (Это не означает, что вы можете вставить растр в SVG и сказать, что теперь эта картинка - векторная.)

Comments

[Сергей Хлопов]

Благодарю за ответ!

Answer 2

[Дима Паутов]

В этом виноваты браузеры и алгоритмы рендеринга, ну как виноваты, просто вот так вот, это не то что бы прям вина или баги)))
При уменьшении картинки, она уменьшается не попиксельно, а часто на доли пикселей, от чего получается размытость. Т.е. 1381px, уменьшаем и в какой-то момент картинка будет 801.1231231px что даст такой эффект.

Так же работают и трансформации в браузере, такие как transform, когда вы при помощи translate захотите сделать блок, динамических размеров по центру например. То велик шанс, что иногда он будет размыт, т.к. смещение будет не в округлённых пикселях, а в дробный.

Надеюсь понятно описал)))

Comments

[Сергей Хлопов]

Благодарю за ответ!)