Почему ухудшается качество изображений?

Question

[xonar]

Добрый вечер.

Первый раз столкнулся с тем, что изображения отображаются ужасно на сайте.

Например, если изображение 60 на 60 пикселей выглядит нормально. Но, если блоку задаёшь ширину 50 пикселей, а изображению width: 100% и изображение получается уже 50 на 50 пикселей, то качество падает.

Хотя (может я ошибаюсь) масштабируется пропорционально и должно выглядеть так же, как при исходных значениях.

Сайт (там все изображения так масштабируются криво) - Подробнее

Comments

[Артур]

Лучше бы об адаптации на смартфоны подумали)

[Lynn «Кофеман»]

Вы 6 пикселей запихиваете в пять. Подумайте почему потеря качества неизбежна

[xonar]

Артур, Её после, так как моб.варианта ещё нет. И речь разве об этом шла?

[xonar]

Алексей Тен, Пожалуйста, можно чуть подробнее? Что касается графики, то тут вообще тёмный лес у меня. Дизайнер скинул такие изображения и я первый раз с таким столкнулся. Как решить проблему, что ему передать?

Спасибо)

[Арсений Матыцин]

Топчик, конечно)

[xonar]

Арсений Матыцин, Да, что вы пристали с этим?) Ещё ток всё на начальной стадии, ничего не адаптировалось, не правилось и т.д.

[Арсений Матыцин]

xonar, у меня есть клавиатура, скринилка, возможность поугорать благодаря тому, что ты задал вопрос)

[xonar]

Арсений Матыцин, ну ок))

Answer 1

[Арсений Матыцин]

1. У изображения есть физический размер. Любая манипуляция по «впихиваю» его в размер больше или меньше отразится на прорисовке. Плюс огромный фактор играет ретинизация. Если ты работаешь с растровой картинкой 50 на 50 и запихиваешь его в размер 50 на 50 и смотришь на это с экрана повышенной плотности, жди сюрпризов. Тем не менее все это лучше, чем попытка растянуть пикчу, там вообще все плохо.
2. У тебя в верстке куча иконок, а не пикч, используй SVG, это формату по барабану (почти), в какой размер ты его вписываешь, главное в параметрах не обкекаться.