Как именно размеры изображений и разрешения работают для мобильной разработки?

Question

Я очень озадачен тем, как изображения работают в мобильной разработке для ios и Android. Я использую Xamarin для моего, но я считаю, что изображения должны работать так же, как и при нативной разработке. Я посмотрел некоторые документы по работе с изображениями на обеих платформах, и они не очень помогают. Я надеялся, что смогу получить здесь более полезную информацию для конкретного c вопроса ниже и любое дополнительное объяснение, которое, по вашему мнению, необходимо.

Как спецификации размера изображения работают точно на ios? Я прочитал документацию Apple для разработчиков по размеру и разрешению изображения , но он не дает достаточного объяснения.

Пример: У меня есть изображение (.png) указанного размера c (W520pixels by H257pixels) и разрешения (300ppi), и я хочу, чтобы это изображение было в моем приложении (не как изображение кнопки или значок, а просто обычное изображение). Нужно ли изменить размер до указанного c размера для @3x? а затем уменьшите его до указанных c размеров для @2x и @1x? Нужно ли также уменьшать разрешение?

Кроме того, в этой статье говорится о том, как использование неправильных размеров для изображений может привести к уменьшению или уменьшению масштабов изображений ОС, которые потребляют ресурсы обработки ( и я предполагаю, может увеличить потребление батареи). Правильно ли мое предположение? и если это так, каковы оптимальные размеры для изображений, чтобы избежать этого?

Answer 1

На iOS в настоящее время есть две плотности экрана: 2x, 3x. Исторически существовал также размер 1x, но такие устройства больше не поддерживаются, и вам не нужно обращаться к ним.

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

Также iOS поддерживает PDF-файлы в каталогах активов, и они не зависят от разрешения.

Answer 2

Разрешение устройства и оптимизация изображения - сложная задача c. Лучше всего сделать больше поиска и прочитать различные статьи, обсуждающие это.

Но, в двух словах - для iOS устройств ...

При разработке пользовательского интерфейса вы работаете в Очки , а не Пиксели . Итак, рассмотрите возможность размещения 320 x 240 изображения в центре экрана.

На старом устройстве с масштабом экрана 1x этот прямоугольник 320 x 240 будет отображаться с 320 x 480 пикселей экрана.

На устройстве с 2-кратным масштабированием экрана, например, iPhone 11, оно будет отображаться с 640 x 480 пикселей экрана.

На 3-кратном устройстве с масштабированием экрана, например, iPhone 11 Pro - он будет рендерить на 960 x 720 пикселей экрана.

Физически , все они будут примерно того же размера - примерно 2,5 дюйма x 1,75 дюйма ( Я оцениваю ... Я не взял линейку, чтобы измерить их).

Если у вас есть 3 размера одного изображения - 320 x 240, 640 x 480 и 960 x 720 - UIKit загрузит тот, который соответствует экранной шкале.

---

На практике, хотя (я собираюсь игнорировать устройства 1x, так как в наши дни это будет редко встречаться) ...

Предположим, у вас есть фотография с оригинальным размером 640 x 480.

На устройстве 2x , которое будет отображать соотношение пикселей 1: 1. На устройстве 3x оно будет масштабировано до до 960 x 720 пикселей. Невооруженным глазом и устройствами рядом друг с другом вам будет трудно увидеть разницу.

Аналогично, если исходный размер, если 960 x 720.

На 3x устройство, которое будет отображать соотношение пикселей 1: 1. На устройстве 2x оно будет масштабировано вниз до 640 x 480 пикселей. Невооруженным взглядом и устройствами рядом друг с другом вам будет сложно увидеть разницу.

Если исходное изображение имеет размер 960 x 720 пикселей, и вы используете редактор изображений для масштабирования это 640 x 480, так что у вас есть как 3x, так и 2x версии, вы почти не получаете никакой выгоды, потому что редактор изображений делает то же самое, что и устройство ... масштабирование изображение .

Когда вы будете уведомлять о рисовании линий или текстовых изображениях, и вы сможете воспользоваться версиями @ 1x, @ 2x и @ 3x. Тем не менее, эти изображения почти наверняка начинаются как векторные рисунки, и вы экспортируете 3 разных разрешения из вашей программы векторного рисования. Вы не экспортируете растровое изображение 960 x 720, а затем уменьшаете его в Photoshop.