Shlop
@Shlop
Программист

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

Здравствуйте подскажите пожалуйста, ширина картинки - 1381px, и на этом разрешении она нормально выглядит, при уменьшении её, т.к. на некоторых экранах она не помещается, качество картинки теряется, становиться размытым немного, возможно ли вообще исправить такую проблему ? Заранее благодарю за ответ!
  • Вопрос задан
  • 1292 просмотра
Решения вопроса 2
Moskus
@Moskus
Если вы просто заставляете browser показать картинку меньшего размера, в действие вступают методы быстрой интерполяции, которые использует browser. Любое уменьшение не в целое число раз (например, в два или три) вызывает ситуацию, когда, например, три пикселя превращаются в два (когда вы картинку шириной в 600 пикселей показываете шириной 400). Цвета смешиваются, границы размываются.
Предварительная генерация изображений для разных разрешений или использование векторных изображений решают эту проблему так или иначе. (Это не означает, что вы можете вставить растр в SVG и сказать, что теперь эта картинка - векторная.)
Ответ написан
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
В этом виноваты браузеры и алгоритмы рендеринга, ну как виноваты, просто вот так вот, это не то что бы прям вина или баги)))
При уменьшении картинки, она уменьшается не попиксельно, а часто на доли пикселей, от чего получается размытость. Т.е. 1381px, уменьшаем и в какой-то момент картинка будет 801.1231231px что даст такой эффект.

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

Надеюсь понятно описал)))
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы