Как улучшить качество отображения png на мобильных устройствах?

Question

[Web Lizard]

Такая вот проблемка.

Есть 100% нормальная качественная png-шка. Возьмем для примера вот эту.

Смотрим как она отображается в браузере:


А вот как она отображается через браузер мобильного телефона:

Как вы можете заметить, появляется эффект "мыла".

Вопрос - почему такое происходит и можно ли с этим что нибудь сделать?

Answer 1

[Владимир]

Если я правильно понял вопрос, нужно сделать png разрешением в два - два с половиной раза выше и задать нужный размер в css

Comments

[Владимир]

screensiz.es/phone посмотрите на столбец "Px Density"
И да, при верстке не забывайте про frontender.com.ua/mobile-web/wtf-viewport

[Web Lizard]

Владимир: viewport у меня вот такой стоит если что:

[Web Lizard]

Блин, код не прикрепился. Вот скриншотом код: joxi.ru/p275GWoU0Qy98r

[Алексей Струков]

Web Lizard: берешь картинку например 200 на 200 пикселей, а в css есть задаешь размер в два раза меньше (100 на 100)

[Web Lizard]

Алексей Струков: это я уже понял. Не проверял еще. Точно сработает?

[Владимир]

Web Lizard: Use codepen.io

[Алексей Струков]

Web Lizard: сработает