2015-12-12 6 views
0

Я разрабатываю приложение, в котором я использую изображения при @ 1x на всех устройствах (это фотографии, и я не могу получить их в 2 раза). Когда изображение 300х225 точек отображается на дисплее Retina на отметке 300x225 точек (то есть 600x450 пикселей), я ожидаю, что он будет выглядеть так же, как в устройстве с сеткой сетчатки. Но это не то, что я получаю. Изображения выглядят хуже в сетчатых устройствах.Пиксельные изображения в дисплеях Retina

Вот как это выглядит в не-сетчатка устройства:

enter image description here

И вот как это выглядит в устройстве Retina:

enter image description here

ОК, а теперь давайте посмотрите, как он выглядит в устройстве Retina, когда я слегка меняю рамку, например до 301x225 или 299x225 px. Изображение выглядит намного лучше, это не сетчатка качества (конечно), но это, безусловно, выглядит менее некачественно:

enter image description here

Похоже, что Apple, использует различные алгоритмы масштабирования в зависимости от того, сколько он должен масштабировать изображение. Если он должен использовать коэффициент масштабирования 2, используется другая масштабирующая интерполяция, чем когда это 1.99, 2.01 или любое другое значение. Но почему? В реальном устройстве сетчатки изображение, масштабируемое на 2,01, выглядит лучше, чем масштабировано на 2. Может быть, это вынуждает разработчиков включать изображения сетчатки?

Знаете ли вы способ заставить изображение использовать «более плавный» метод масштабирования интерполяции? Я мог бы просто установить немного другой фрейм, чтобы он не был в два раза больше размера исходного изображения, но ... есть ли лучший способ? Я также попытался изменить CALayermagnificationFilter и minificationFilter, но изображение все еще выглядит хуже на устройствах Retina.


EDIT: Я играл с Photoshop, и я могу сказать, что, когда коэффициент масштабирования 2,0, Apple использует ближайший сосед, и когда коэффициент масштабирования отличается от 2.0, Бикубическая Вместо этого используются алгоритмы. Я мог бы просто создать @ 2x версии изображений с помощью Photoshop (используя Bicubic) и добавить их в свое приложение, но это резко увеличит размер моего приложения.

ответ

0

Вы можете использовать самое большое изображение и конкретно его половину его размера. Так загрузить изображение (600x450) и использовать его как <img src="blabla.jpg" style="width:300px;height:225px;" alt="" />

Это хорошая статья, описывающая сетчатку дисплеев и веб-дизайн: http://designmodo.com/design-retina-displays/

Смежные вопросы