Что такое ppi или насколько важна плотность пикселей

Что не так с плотностью пикселей

Все так и есть. Но чем же это обусловлено? Android поддерживает экраны с разной плотностью пикселей. Не все они были изначально. Но к текущему моменту сложились пять стандартных значений: 160, 240, 320, 480 и 640 dpi. Стандартными они являются потому, что именно в них представляются все растровые графические ресурсы приложения (картинки). Есть еще и нестандартные плотности пикселей, но о них чуть позже.

Если же вы возьмете самые типовые устройства на сегодня — 5″ HD и 5,5″ FHD, то окажется, что у них плотность пикселей — 294 и 400 dpi соответственно. Что же в этом случае происходит? Физическая и программная плотность пикселей отличается. Когда какое-нибудь приложение опрашивает устройство:

https://www.youtube.com/watch?v=hSLiaZtowuA

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

Если физическая и программная плотность пикселей отличаются, то в какую же сторону? Давайте рассмотрим на примере. Высота стандартной кнопки в Material Design — 0,225 дюйма (5,715 мм). Если устройство с физическим dpi 400 заявит программный dpi 320, то Android отрисует кнопку высотой 320*0,225 = 72 пикселя.

И на физическом экране она займет 72/400 = 0,18 дюйма (4,572 мм). И по этой кнопке будет сложнее попасть пальцем. Поэтому производители, как правило, указывают программную плотность пикселей выше физической. Т.е. для 400 dpi физических это будет 480 программных.

Чем ppi отличается от dpi и почему не стоит путать

Dpi (сокращение от английского dots per inch — точек на дюйм) — это разрешение печатающего устройства. Dpi — говоря простым языком, это величина, показывающая, насколько маленькую точку может нарисовать печатающее устройство. Термин dpi применяется в полиграфии.

Ppi — это разрешение файла изображения, выражающееся в количестве пикселей на дюйм. Увеличив на экране картинку, можно увидеть квадратики — те самые пиксели, из которых она состоит.

Для рядового пользователя какой-либо разницы между dpi и ppi нет. И то и другое — единицы измерения, которые применяются для определения разрешения изображения, отображенного на экране или распечатанного на бумаге (dpi).

Ppi в смартфоне

Сейчас на рынке мобильных телефонов наблюдается следующая корреляция между стоимостью девайса и плотностью пикселей:

• Бюджетный смартфон — 200-300 PPI;
• Средний показатель — 300-400 пикселей на дюйм;
• Флагманские модели телефонов — свыше 400 PPI.

Несмотря на то, что заметная невооруженным взглядом зернистость дисплеев практически исчезла вместе с эпохой первых кнопочных телефонов, в бюджетном сегменте еще можно встретить матрицы с низким PPI.

Обратная ситуация наблюдается с флагманами: появление смартфонов с PPI свыше 500 — не более, чем маркетинговый ход производителей, поскольку существенной разницы человеческий глаз уже не заметит.

Если для смартфонов оптимальным значением плотности пикселей принимается диапазон от 300 до 450 PPI, это однако не универсальное значение для дисплеев всех устройств.

Quad hd в мобильном телефоне: значительное преимущество?

Разрешение Quad HD (QHD) обеспечивает более высокую плотность пикселей, чем Full HD, и уж тем более, чем обычное HD. Есть ли в этом практическая необходимость, зависит от размеров экрана. На мобильных телефонах с диагональю дисплея 5 дюймов и меньше вполне приличное качество картинки будет обеспечиваться и экраном с разрешением HD.

Если экран телефона имеет больший размер диагонали, лучше выбирать модели с Full HD. Его будет достаточно и для смартфонов категории до 5,5 дюймов — невооруженным взглядом пиксели практически неразличимы. Преимущества аппаратов с разрешением Quad HD становятся заметными лишь при самом тщательном рассмотрении, а значительными их можно назвать только в том случае, когда диагональ экрана превышает 5,5 дюймов.

Важна ли эта величина

Пи-пи-ай, исходя из всего вышесказанного, влияет на четкость изображения, которое получает пользователь на своем экране.

Чем выше величина показателя, тем более четкое изображение получит юзер.

Фактически, чем больше эта величина, тем меньше «квадратиков» будет видеть человек. То есть каждый пиксель будет маленьким, а не большим, и это даст возможность вообще не обращать на это внимание. Наглядно значение характеристики можно видеть на рисунке 2

Рис. 2. Разница при показателях меньше и больше

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

Найти показатель в характеристиках того же смартфона обычно просто. Обычно она содержится в разделе «Дисплей». Пример можно видеть на рисунке 3.

Рис. 3. Показатель в характеристиках смартфона

Восприятие масштаба

Должна ли кнопка быть одинакового размера на разных устройствах? Ответ зависит от

• точности метода ввода (сенсор или курсор);
• физических размеров экрана;
• расстояния до экрана.

Последние два фактора идут рука об руку, потому что у планшетов большие экраны по сравнению со смартфонами, и мы держим его дальше от себя. Еще есть ноутбуки, настольные компьютеры, телевизоры — расстояние между глазами и экраном увеличивается вместе с размером последнего.

Кнопка на экране телевизора должна быть размером с телефон — потому что иначе ее нельзя будет увидеть, сидя на диване.

Вот менее драматичный и очень правдивый пример: иконки приложений на планшете должны быть больше таких же иконок на телефоне. Это реализуется двумя способами: с помощью меньшей плотности пикселей или разных размеров иконок.

Дизайн в векторе

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

Второй урок: мы должны все рисовать в масштабе 1х. Другими словами, создавайте дизайн, используя точки для всех измерений, затем масштабируйте в различные более крупные пиксельные плотности при экспорте. Масштабирование 2x-графики на 150% для создания версии в 3х провоцирует появление размытых контуров, поэтому это не лучший вариант. А вот масштабирование графики 1х в 200% и 300% позволяет сохранить четкость.

Разрешение макетов приложений для iPhone должно быть не 750×1334, а 375×667 — это как раз то разрешение, в котором приложение будет отображаться. Большинство инструментов дизайнера не отличают пункты от пикселей, так что можно считать, что пункты и есть пиксели, а затем просто экспортировать исходники в двукратном и трехкратном размерах.

Как узнать программный размер своего смартфона

Прежде, чем переходить в определению размера смартфона и сравнению размеров различных аппаратов, следует уточнить единицы измерения. Никто не применяет для работы с размерами дюймы — при работе с ними получаются дробные числа и надо постоянно применять правильное округление.

• 1 пикселю при плотности 160 dpi;
• 1,5 пикселям при плотности 240 dpi;
• 2 пикселям при плотности 320 dpi;
• 3 пикселям при плотности 480 dpi;
• 4 пикселям при плотности 640 dpi

Для значений 420 и 560 получаются числа 2,625 и 3,5 соответственно.

Наиболее популярный программный размер смартфонов в 4,6″ составляет 360х640 dp. 5,25″ — это уже 411х731 dp. Для того, чтобы узнать размер своего смартфона, достаточно запустить утилиту Screen Info или подобную. Ниже представлены примеры скриншотов этой утилиты для Xiaomi Mi2s, Samsung Galaxy Note 3, а также LG Nexus 5x со всеми возможными значениями dpi, устанавливаемыми в настройках экрана.

Какие могут быть экраны

Поскольку в Android практически не применяются нестандартные разрешения (а если и применяются, то они основаны на стандартных, просто одна сторона чуть длиннее), то мы можем заранее вычислить все возможные программные размеры экранов смартфонов:

Как можно заметить, почти для всего многообразия смартфонов с разным разрешением и разными диагоналями мы чаще всего упираемся в один и тот же программный размер — 4,6″.

Коротко, о чем пойдет речь

• Дисплей любого современного смартфона построен на матрице IPS или OLED. Несмотря на несколько ключевых различий, для пользователя нет принципиальной разницы между двумя типами панелей. Многое зависит от качества конкретной матрицы и ее настройки. И OLED, и IPS в равной степени могут быть как крутыми, так и не очень.
• Восприятие изображения во многом зависит от разрешения, точнее от разрешающей способности дисплея. Чем она выше, тем четче картинка. Но работает это до определенного показателя, после которого все переходит в сферу чистого маркетинга.
• Чем выше частота обновления дисплея, тем приятнее смотреть на текст при скроллинге браузера. За это придется поплатиться повышенным энергопотреблением и очень высокой ценой. Готовы к такому?
• Стандартные плоские дисплеи в обиходе практичнее изогнутых. А вот гибкие экраны в смартфонах-раскладушках нового поколения смотрятся интересно, хотя их перспективы пока непонятны.

Материалы по теме

Мы только что обсудили массу сложностей, с которыми сталкиваются дизайнеры. К счастью, в разработке интерфейсов используются единицы, которые не зависят от плотности (как pt или dp).

Список ресурсов по данной теме:

• Google Device Metrics — список спецификаций для устройств всех типов (Android, iOS, macOS, Windows). Размеры экранов, плотность пикселей и даже примерное расстояние, на котором экран расположен от глаз пользователя.
• Шаблоны иконок приложений Bjango. Эти шаблоны (доступные всем главным дизайн-редакторам) полезны как в практическом смысле, так и для справок по последним спецификациям для Android, iOS, macOS, tvOS, watchOS, Windows, Windows Phone.
• Руководство по DPI и PPI. Подробное руководство дизайнера Себастиана Габриеля, которое покрывает еще больше деталей и практических приемов для дизайнеров Android и iOS.

Есть еще некоторые ресурсы по пиксельной плотности для дизайнеров.

Новые герои

Ситуация могла бы выглядеть совершенно удручающей. Особенно на фоне появления iPhone 6 Plus — настоящего фаблета с большой не только физической, но и программной диагональю. Но, оказывается, не так все плохо. В последние годы появляются смартфоны с нестандартной плотностью пикселей. Возьмем, например, семейство Nexus:

• Nexus 5x — 420 dpi;
• Nexus 6 и 6p — 560 dpi.

Samsung начинает применять новые плотности с Galaxy Note 5 (в Note 4 и S6 была программная плотность 640 dpi).

Более того, в Android 7 появилась открытая (в Adroid 6 была скрытая) возможность смены плотности пикселей. Например, на Nexus 5x при изменении настройки получаются следующие значения dpi: 356, 420 (по умолчанию), 460, 500 и 540.

Если же у вас смартфон на старой версии Android, то можно попробовать изменить файл /system/build.prop. Внимание! Это может привести к «окирпичиванию» аппарата!!! Особенно, если выставлять нестандартную плотность пикселей. Параметр в файле называется «ro.sf.lcd_density».

Попробуем рассчитать возможные программные размеры смартфонов для нестандартных плотностей пикселей (при установках по умолчанию):

Как видим, новая популярная программная диагональ экрана — 5,25″.

Чревата ли чем-то нестандартная плотность пикселей в новых аппаратах? Некоторые приложения могут быть не приспособлены к ней и некорректно отрисовывать свой интерфейс. Также есть нюанс, что растровая графика будет взята из «чужого» разрешения и отмасштабированна для нужного.

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

Пиксель на экране дисплея представляет собой минимальный элемент графики, который характеризуется своим цветом. Поскольку он может быть разной величины, количество элизов по вертикали и горизонтали не определяет площадь картинки в метрических единицах, а показывает размер растрового изображения только в пикселях.

Например, запись 1170х1410 означает, что по ширине картинка состоит из 1170 точек. А по высоте — из 1410. Всего изображение содержит 1 649 700 элементов, то есть 1.6 мегапикселя.

Необходимо учитывать соотношение между количеством точек в изображении и параметрами устройства вывода. Например, количеством пикселей. Это нужно для того чтобы растровый рисунок был правильно воспроизведен. И, в результате, хорошо воспринимался глазом при выводе на бумагу или экран. Оптимально, когда эти величины относятся как один к одному.

Плюсы и минусы

Количество пикс. на дюйм позитивно влияет на четкость картинки, а соответственно, и на ее качество.

Пользователю будет в разы приятнее смотреть на изображение с большим показателем.

На рисунке №2 фото слева имеет 30 ppi, а фотография справа – 300. Ниже еще один подобный пример.

Рис. 4. Еще один показатель разницы

Но есть у данного понятия и минусы. В частности, речь идет об автономности устройства. Все достаточно просто – если картинка четкая, смартфон, планшет или другое устройство с экраном не смогут работать долго без подзарядки. Можно даже составить простое правило: чем больше пи-пи-ай, тем меньше время автономной работы.

Конечно, для ПК это не проблема, так как там монитор все равно постоянно включен в розетку, а вот для некоторых телефонов это может стать большой проблемой. Поэтому при выборе устройства обязательно обращайте внимание не только на число пикс. на дюйм, а еще и на вместимость батареи!

Таким образом мы плавно перешли к теме выбора.

Повышенная гибкость, высокая изогнутость

Когда-то компания Samsung выпустила первый массовый смартфон с загнутым по бокам дисплеем. Такой фокус, к слову, возможен только с матрицами OLED — плюс им в копилку.

Несколько лет назад казалось, что это прорыв и перед нами будущее смартфонов. Модель с загнутыми торцами выглядит стильно, необычно, футуристично, и вообще. Однако прошло немного времени, и восторги поутихли. Производители так и не придумали, что делать с этими изогнутыми краями, какой полезный функционал к ним прикрутить.

Неудивительно, что законодатель моды — Samsung — потихоньку выпрямляет свои изогнутости — из года в год изгибы экранов флагманских смартфонов компании становятся все менее заметными.

Что надо помнить: смартфоны с «бесконечными» дисплеями или экранами-«водопадами» могут выглядеть эффектно, однако в повседневности такие аппараты все же менее удобны, чем их коллеги с классическими ровными матрицами.

На смену изогнутости пришел новый тренд — раскладные дисплеи. Пока в более-менее широкой продаже их предлагают компании Samsung, Huawei и Motorola. Возможно, это и есть будущее. А может, такой же эксперимент, как изогнутые телефоны. Итог подведет лишь время. Сейчас же можно сказать, что подобные устройства носят имиджевый характер и стоят крайне дорого.

Притворяйся, пока это не станет правдой

Стоит упомянуть, что иногда устройства лгут. Они делают вид, что их коэффициент преобразования пикселей в пункты, например, 3х, а на самом деле, он 2,61х, а сам исходник масштабируется в 3х для удобства. Так поступает, например, iPhone Plus. Он сжимает интерфейс, сделанный в 1242×2208 до разрешения экрана в 1080×1920.

Так как графика лишь немного уменьшается (87%), результат по-прежнему выглядит достойно — линия толщиной в 1px на экране почти в 3x выглядит все равно невероятно четкой. И есть шанс, что в будущем Apple представит настоящий 3x iPhone Plus, так как нужные аппаратные возможности вполне могут быть доступны для продукта, выпускаемого в таких огромных количествах.

Приемлем ли такой подход нецелочисленного масштабирования? Все проверяется на практике. Достаточно ли незаметен результат от такого масштабирования? Многие устройства на Android также прибегают к масштабированию для подгонки под более стандартный коэффициент пиксель-в-точку, но, к сожалению, некоторые из них делают это не слишком качественно.

Такое масштабирование нежелательно, так как все, что вы хотите сделать четким, станет размытым из-за интерполяции. К сожалению, по мере того, как плотность пикселей доходит до 4x и выше, размытость, вызванная нецелочисленным масштабированием, становится гораздо менее уловимой, так что я прогнозирую, что производители устройств со временем будут все больше использовать этот подход. Мы можем только надеяться на то, что недостатки в производительности их сдержат.

Список стандартных типов разрешений

Теоретическая страничка и расчеты

Рассматриваемое понятие расшифровывается как pixels per inch, то есть количество пикселей на дюйм. Произносится также как пи-пи-ай.

Она буквально означает то, сколько пикселей помещается в одном дюйме изображения, которое мы видим на экране монитора, смартфона, планшета или другой техники.

Также это понятие называют единицей измерения разрешающей способности. Расчет этой величины производится с помощью двух простых формул:где:

• dp – диагональное разрешение;
• di – размер диагонали, дюймов;
• Wp – ширина;
• Hp – высота.

Вторая формула предназначена для расчета диагонального разрешения и основана на использовании знаменитой теоремы Пифагора.

Рис. 1. Ширина, высота и размер диагонали на мониторе

Чтобы показать, как используются все эти формулы, возьмем для примера монитор с диагональю 20 дюймов и разрешением 1280х720 (HD).

Таким образом Wp будет равным 1280, Hp – 720, а Di – 20. Благодаря наличию этих данных мы можем рассчитать пи-пи-ай. Сначала используем формулу (2).

А теперь применим эти данные для формулы (2).

Примечание: На самом деле у нас получилось 73,4 пикс., но нецелого числа пикселей быть не может, используются только целые значения величины.Точно таким же образом можно рассчитать реальные значения количества пикселей на дюйм в любом устройстве.

Чтобы понять, сколько это в сантиметрах, более привычной величине для нашей местности, нужно поделить получившееся число на 2,54 (в одном дюйме именно столько сантиметров). Таким образом, в нашем примере это 73/2,54=28 пикс. в сантиметре.

Также мы можем рассчитать величину каждого отдельного пикселя с учетом пи-пи-ай. Чтобы это сделать, необходимо 25,4 поделить на получившееся число пикс. в дюйме.

В нашем примере это 73, а 25,4/73=0,3. То есть размер каждого пикселя равен 0,3х0,3 мм.

Это хорошо или плохо?

Разберемся вместе.

Частота обновления

До недавнего времени большинство смартфонов довольствовались частотой обновления экрана на уровне 60 Гц. Здесь тоже все просто: это означает лишь то, что в течение секунды изображение на дисплее перерисовывается 60 раз. Однако вслед за настольными мониторами этот показатель начал расти и в смартфонах.

Сначала появились модели с частотой обновления экрана 90 Гц, а с недавнего времени расширяется модельный ряд с 120 Гц. Что это дает в реальности? В первую очередь — более плавную анимацию различных эффектов. Плавно скроллится текст в браузере, плавно перемещаются менюшки. В общем и целом глазам становится приятнее. Но опять же не без нюансов.

Во-первых, высокая частота обновления экрана даст о себе знать далеко не во всех играх — в большинстве из них разницы по сравнению с 60 Гц вы не заметите. Во-вторых, повышенная частота заметно активнее высаживает батарею телефона — во время нашего теста Galaxy S20 Ultra аккумулятор садился на 15—20% быстрее.

В-третьих, восприятие «уплавнялки» сильно зависит от индивидуальных особенностей конкретного человека. Вы в любом случае ее заметите, однако кто-то придет в восторг от сверхплавного пролистывания страниц, а кто-то хмыкнет и не поймет, в чем тут кайф.

В целом высокая частота обновления экрана — это круто. Но не для всех и не так чтобы «вау!». Лучше всего здесь самому вживую посмотреть на высокогигагерцевый экран, чтобы определиться, насколько этот параметр окажется важным именно для вас.