Почему при уменьшении картинки с помощью css её качество теряется?
Если вы просто заставляете browser показать картинку меньшего размера, в действие вступают методы быстрой интерполяции, которые использует browser. Любое уменьшение не в целое число раз (например, в два или три) вызывает ситуацию, когда, например, три пикселя превращаются в два (когда вы картинку шириной в 600 пикселей показываете шириной 400). Цвета смешиваются, границы размываются.
Предварительная генерация изображений для разных разрешений или использование векторных изображений решают эту проблему так или иначе. (Это не означает, что вы можете вставить растр в SVG и сказать, что теперь эта картинка - векторная.)
В этом виноваты браузеры и алгоритмы рендеринга, ну как виноваты, просто вот так вот, это не то что бы прям вина или баги)))
При уменьшении картинки, она уменьшается не попиксельно, а часто на доли пикселей, от чего получается размытость. Т.е. 1381px, уменьшаем и в какой-то момент картинка будет 801.1231231px что даст такой эффект.
Так же работают и трансформации в браузере, такие как transform, когда вы при помощи translate захотите сделать блок, динамических размеров по центру например. То велик шанс, что иногда он будет размыт, т.к. смещение будет не в округлённых пикселях, а в дробный. 
Надеюсь понятно описал)))