Плотность пикселей ppi что это
Нужно ли при выборе смартфона ориентироваться на разрешение экрана? Есть ли смысл в покупке 4K или 8K телевизора? Является ли Retina-дисплей iPhone (с плотностью пикселей ~300 ppi) оптимальным выбором, если это уже предел человеческого зрения, как утверждает компания Apple?
На все эти вопросы вы получите исчерпывающие ответы в этой статье!
Однако следует помнить, что разрешение (как и ppi или плотность пикселей) — это далеко не единственный параметр, на который нужно обращать внимание при выборе любого экрана. Цветопередача, яркость, контрастность, цветовой охват, энергоэффективность — всё это не менее важно.
Кроме того, чем выше разрешение экрана, тем больше требуется вычислительных ресурсов, что, в свою очередь, влияет на время автономной работы устройства.
Но все эти нюансы не относятся к теме нашего разговора. Моя цель — дать однозначный и исчерпывающий ответ на вопрос о том, есть ли ощутимая разница в четкости картинки и до какого предела можно увеличивать количество пикселей, повышая воспринимаемую детализацию.
Минуты, секунды, углы…
Перед тем, как говорить о гаджетах, вначале нужно определиться в понятиях, чтобы не возникало никаких недоразумений. И для этого рассмотрим простой пример.
Представьте, что вы смотрите на две точки определенного размера с какого-то расстояния:
Сможете ли вы с точностью сказать, что перед вами две точки, а не одна? Судя по картинке, ответ очевиден. Мы можем в этом легко убедиться и проследить за тем, как свет от этих точек попадает на сетчатку — «матрицу» нашего глаза:
Каждая точка оставила четкий «след» на сетчатке и мы их легко различаем. Но когда эти точки начнут сближаться, в какой-то момент их «следы» на сетчатке начнут сливаться в одно пятно:
Если мы приблизим картинку, то увидим примерно следующее:
Так происходит по той причине, что свет имеет двойную природу. Это и маленькие «шарики» энергии, которые сталкиваются с предметами и отлетают от них в разные стороны, словно шары для бильярда. И в то же время это волны — как те, что мы привыкли видеть на воде.
Когда свет проходит через маленькое круглое отверстие (зрачок глаза или диафрагму объектива), он проявляет свойства волны и оставляет на сетчатке размытые следы от этих волн. Чем меньше отверстие, тем более размытыми будут точки. Это явление называется дифракцией.
Если расстояние между точками будет небольшим, в какой-то момент их образы просто сольются в одно пятно и глаз уже не будет их различать. Наступление этого момента хорошо описал британский физик Рэлей еще в 1879 году (так называемый критерий Рэлея).
А теперь давайте еще раз посмотрим на два предыдущих рисунка и обратим внимание на углы, под которыми сходятся лучи света в каждом случае:
Мы видим простую закономерность — чем ближе точки друг к другу, тем меньше угол между лучами, исходящими от них. На картинке слева лучи от двух точек сходятся под бóльшим углом (a), чем на примере справа (угол b).
Логично предположить, что существует такой угол между лучами, при котором на сетчатке уже не будет двух отдельных точек — они сольются в одно пятно. Другими словами, если угол между точками будет слишком маленьким, мы уже не сможем их различать.
Соответственно, сколько бы еще точек или объектов ни находилось между этими двумя точками — для нашего глаза они будут незаметными или неразличимыми.
Получается, мы можем оценивать расстояние между точками не только миллиметрами, но и углами, под которыми пересекаются лучи света. Таким же образом можно определять даже размеры самих объектов, а не только расстояние между ними.
Собственно, именно это мы и делаем постоянно в астрономии — измеряем углами размеры небесных тел. И здесь принцип точно такой же — лучи света, исходящие от краев наблюдаемого объекта будут пересекаться под разными углами в зависимости от размера объекта:
А если мы знаем расстояние до этого объекта, то можем легко высчитать и его реальный размер. Ведь это простой треугольник с одним известным углом (под которым пересекаются лучи света) и одной известной стороной (расстояние до объекта), а другая сторона (она и будет размером объекта) высчитывается по элементарной школьной формуле.
Это и есть основные понятия, которые нужны нам для дальнейшего разговора!
Давайте еще раз подытожим:
- Наш глаз видит какой-то объект или расстояние между объектами только в том случае, если от них исходят лучи света и попадают к нам на сетчатку;
- Чем ближе объекты друг к другу или чем меньше сам объект, тем меньше будет угол, под которым пересекаются лучи света в нашем глазу;
- Существует минимальный угол (угловой размер), при котором наш глаз еще способен увидеть объект или различить два объекта на небольшом расстоянии друг от друга. Все, что меньше этого угла — либо неразличимо (если мы говорим о расстоянии между двумя объектами), либо вообще невидимо без приборов (если речь идет просто о маленьком объекте).
Теперь нужно разобраться с тем, какой же этот минимальный угол, определяющий границы наших физических возможностей.
Нормальное зрение
Помните школьную проверку зрения? Когда врач просил закрыть один глаз и назвать букву, которую он показывает на вот такой табличке:
Это так называемая таблица Сивцева для проверки зрения. Сами буквы и их размер здесь подобраны неслучайно.
К примеру, обратите внимание на букву Ш. Главное в этой букве — 3 вертикальных палочки определенной толщины. Если взять 10-й ряд сверху (очень мелкий шрифт), то ширина каждой палочки этой буквы и расстояние между палочками равняются 1.45 мм:
Если вы правильно назовете букву в 10-м ряду с 5 метров, тогда у вас нормальное зрение. Не лучшее, не идеальное, а просто нормальное. Получается, любой человек с обычным зрением способен увидеть с пяти метров две контрастные палочки толщиной 1.45 мм, которые находятся на расстоянии 1.45 мм друг от друга.
Если бы мы провели лучи света от двух палочек буквы Ш из 10-го ряда, то угол пересечения этих лучей с расстояния 5 метров был бы настолько маленьким, что изобразить его на экране просто не представляется возможным. Но для наглядности приведу грубый пример:
И теперь возникает вопрос — под каким же углом пересекаются эти лучи? Думаете это 1°? На самом деле — в 60 раз меньше!
То есть, мы способны различить два объекта, лучи от которых пересекаются под углом всего 0.0166° (1/60). И это не идеальное зрение и даже не выше среднего. Это просто нормальный показатель.
Конечно, пользоваться числом 1/60 градуса не очень удобно, поэтому для него придумали название — 1 угловая минута или просто 1′. Хотите нарисовать угловую минуту — нарисуйте транспортиром 1°, а затем разделите его на 60 ровных отрезков и вы получите нужный угол. В свою очередь, 1 угловая минута также состоит из 60 отрезков — угловых секунд.
Так вот, идеальное зрение — это способность различать две точки, если угловое расстояние между ними всего 28 угловых секунд или 0.47 угловых минут! Возвращаясь к примеру с буквой Ш, можно посчитать, что с 5 метров такой «идеальный глаз» способен различить 2 черточки, толщиной 0.68 мм каждая, на расстоянии 0.68 мм друг от друга!
Это и есть предел человеческого зрения. А дальше в игру вступают законы физики (дифракция света, критерий Рэлея) и наша физиология (диаметр одной колбочки на сетчатке и плотность их расположения).
Но в среднем, конечно, таким зрением могут похвастаться единицы. Для остальных людей более реальная граница — это что-то ближе к 0.8 угловым минутам.
И здесь важно упомянуть еще одну деталь. Думаю, вы обратили внимание на то, что я постоянно указываю расстояние до объекта. Делаю я это неспроста.
С какого расстояния будем разглядывать пиксели?
Очевидно, что различить 2 точки на расстоянии 1 мм друг от друга гораздо проще с двадцати сантиметров, чем с пяти метров. Почему тогда зрение проверяется с пяти метров? И почему 1 угловая минута равна толщине или расстоянию в 1.45 мм? Как интерпретировать угловые размеры, если мы смотрим в экран смартфона с 25 сантиметров?
На самом деле, все эти вопросы — бессмысленны. В этом и заключается прелесть угловых размеров — они учитывают расстояние до предмета.
Если острота зрения человека составляет 1 угловую минуту, то с 25 см он сможет разглядеть точку диаметром 0.07 мм, с 5 метров — точку 1.5 мм, а со 100 метров — точку 3 см:
Получается, нет никакой разницы, будет ли человек с пяти метров разглядывать картину, состоящую из точек диаметром 1.5 мм, или со ста метров — картину из точек диаметром 3 см, никакой разницы в детализации он физически не способен заметить.
Из этого следует один очень важный вывод: с определенного расстояния плотность пикселей (и разрешение экрана) не играют никакой роли. То есть, человек с хорошим зрением не сможет отличить 8K экран от FullHD или даже HD (720p), если смотреть на такие экраны с разного расстояния.
Связано это именно с угловым разрешением глаз. Если брать пример выше, то вместо одной точки диаметром 3 см на расстоянии в 100 метров может быть 3 точки диаметром 1 см каждая, но для нашего глаза это не будет играть никакой роли:
Мы все равно увидим одно зеленое пятно без каких-либо деталей. Так как всё, что не выходит за пределы минимального угла, не различимо для глаза.
Теперь, когда мы разобрались со всем этим, давайте перейдем к экранам.
Что такое ретина-дисплеи?
Ретиной называют дисплеи Apple с повышенной плотностью пикселей на квадратный дюйм. Впервые о них заговорили в 2010 году, когда Стив Джобс презентовал iPhone 4. Новый на тот момент смартфон получил экран с плотностью 326 PPI — в два раза выше, чем у его предшественника iPhone 3GS.
Ретина-дисплеи вывели смартфоны на новый уровень. По словам самого Стива Джобса, на ретина-дисплеях удалось достичь такого PPI, на котором человеческий глаз перестаёт различать отдельные пиксели. Текст стал выглядеть так, словно он выведен не на экран мобильного устройства, а напечатан в хорошей книге. Изображения стали более чёткими и плавными. Появились полутона и исчезла «зернистость» картинок.
Сейчас экраны с повышенной плотностью пикселей выпускают, пожалуй, все крупные бренды. Их нельзя называть ретиной — это название принадлежит исключительно компании Apple. Но принцип отображения аналогичен.
Слева изображение для ретина-экрана, справа — для стандартного дисплея.
Подведём итоги
Используйте тексты и градиенты — их не нужно дополнительно оптимизировать.
Используйте изображения минимум в двух форматах: для обычных экранов и для ретины.
По возможности отдавайте приоритет SVG.
При добавлении контентных изображений используйте тег и атрибут srcset.
Для фоновых картинок применяйте медиавыражение @media(min-resolution: 2dppx) <. >или используйте CSS-функцию image-set.
Не забывайте проверять, как выглядит вёрстка на экранах с различной плотностью пикселей.
Если вы хотите более подробно погрузиться в ретиновую графику и научиться готовить вёрстку для ретина-экранов, попробуйте наш профессиональный курс «HTML и CSS. Адаптивная вёрстка и автоматизация».
PPI (произносится как пи-пи-ай ) или плотность пикселей (сокращение от английского pixels per inch — пикселей на дюйм) — это количество пикселей, вмещающееся в одном дюйме экрана устройства: смартфона, планшета, ноутбука. Чем больше пикселей может разместиться в одном дюйме, тем меньший размер имеет один пиксель и тем менее они видимы невооруженным глазом. Чем больше пикселей умещается на одном дюйме экрана (чем больше цифра ppi ) — тем, соответственно, выше четкость и реалистичность изображения.
Экран первого компьютера обладал плотностью пикселей 72 ppi. Число кажется большим, но пиксели на самом деле были огромными, а качество картинки — низким. Все из-за того, что сам экран был большим.
Современные смартфоны ушли далеко вперед и оснащаются дисплеями с плотностью пикселей куда более большей. Даже простенькие бюджетные аппараты обладают экранами с 220 ppi и выше, а у флагманских моделей этот показатель достигает 403, 458 , 522 ppi и 642 точек на дюйм . Смартфон c рекордным показателем плотности пикселей — 806 ppi при разрешении экрана 3840×2160 пикселей.
300-PPI.jpg (161.13 KB, Downloads: 82)
2020-04-15 17:16:07 Upload
bILkz2Af0XXr6HsHS8Tj1z2PyypAKP.jpg (336.16 KB, Downloads: 78)
2020-04-15 17:38:40 Upload
PPI – один из важнейших показателей качества экрана! Если вы покупаете смартфон с размером экрана, скажем, 6 дюймов, а разрешение у него всего 720×1280… то экран такого телефона будет зернистым из-за того, что в одном дюйме (2,54 см) будет меньше точек и они будут более крупными. Качество картинки из-за этого будет отличаться в худшую сторону. Производитель в гонке за размером экрана, не позаботился сделать его качественным.
Для чего экран смартфона должен иметь плотность пикселей больше 300 точек на дюйм
s1200.jpg (471.18 KB, Downloads: 85)
2020-04-15 17:18:51 Upload
Человеческий глаз в состоянии различить отдельные пиксели при значении 300-350 ppi. Считается, если плотность пикселей выше, среднестатистический человек невооруженным глазом их уже не сможет разглядеть. Некоторые люди с идеальным зрением могут различать пиксели вплоть до уровня плотности 600 ppi. Но это редкость.
Кажется, слишком большое количество пикселей не всегда идет в плюс. Во-первых, потому что растет энергопотребление. Так как процессору смартфона приходится обрабатывать больше информации. Во-вторых, зачем вам много пикселей, если вы вы все равно не отличите экран с 350 точек на дюйм от экрана с 500 точек в дюйме? Это чисто маркетинговый ход, за который вы переплачиваете.
DPI (сокращение от английского dots per inch — точек на дюйм) — это разрешение печатающего устройства. Dpi — говоря простым языком, это величина, показывающая, насколько маленькую точку может нарисовать печатающее устройство. Термин dpi применяется в полиграфии.
PPI — это разрешение файла изображения, выражающееся в количестве пикселей на дюйм. Увеличив на экране картинку, можно увидеть квадратики — те самые пиксели, из которых она состоит.
Для рядового пользователя какой-либо разницы между dpi и ppi нет. И то и другое — единицы измерения, которые применяются для определения разрешения изображения, отображенного на экране (ppi) или распечатанного на бумаге (dpi).
Для этого нужно знать величину диагонали экрана в дюймах и его разрешение в пикселях по ширине и высоте. Далее нужно извлечь квадратный корень от суммы квадратов количества пикселей по ширине и высоте и затем разделить полученный результат на диагональ экрана в дюймах.
Разрешение экрана и плотность пикселей (ppi)
Разрешение экрана — это количество светящихся точек (пикселей) по горизонтали и вертикали. К примеру, разрешение экрана iPhone 8 составляет 750 x 1334 пикселя:
Зная это число, а также зная физический размер экрана в дюймах, мы можем легко посчитать плотность пикселей или ppi (количество пикселей на один дюйм). Для этого делим количество пикселей по горизонтали на ширину экрана в дюймах: 750/2.3 (ширина экрана — 2.3 дюйма). Получаем 326 ppi или 326 пикселей на дюйм.
Можно поступить еще проще, ведь обычно мы знаем только разрешение экрана и его диагональ в дюймах, а не ширину и высоту. Поэтому для определения ppi нужно диагональ экрана в пикселях разделить на диагональ в дюймах. А чтобы узнать диагональ в пикселях достаточно представить вот такой треугольник:
Длины катетов мы знаем (это разрешение по горизонтали и вертикали), а гипотенузу находим по теореме Пифагора (квадрат гипотенузы равен сумме квадратов катетов). Для нашего iPhone 8 диагональ 2 =750 2 +1334 2 , отсюда диагональ = 1530 пикселей. Теперь делим это число на диагональ экрана в дюймах (4.7) и получаем 326 ppi.
Если бы мы взяли тонкую полосочку толщиной в 1 пиксель и длиной в 1 дюйм (2.54 см), то эта полоска состояла бы ровно из 326 светящихся точек. Это и есть ppi.
Из этого следует, что размер одной точки (одного пикселя) составляет примерно 0.078 мм или 78 мкм (25.4 мм делим на 326 точек). Можем ли мы заметить на таком экране отдельные точки? Способен ли наш глаз различить пиксели размером примерно 0.08 мм?
Как вы уже понимаете, вопрос поставлен не совсем корректно. Ведь угловое разрешение глаза учитывает расстояние до предмета. Если мы берем нормальное зрение (1 угловую минуту), тогда с расстояния 50 см глаз способен различить точку диаметром 145 мкм (0.145 мм), что почти вдвое превышает размер пикселя iPhone.
Даже если брать человека с очень хорошим зрением (0.8 угловых минут), то его глаз способен различить на таком расстоянии точку в 116 мкм (0.116 мм), что снова гораздо больше точки на экране iPhone (78 мкм).
Однако многие люди смотрят в экран с расстояния 20-25 см (например, когда мы читаем книгу на смартфоне). И вот здесь всё становится гораздо интереснее.
Знаменитые 300 ppi
На презентации первого смартфона с экраном высокой четкости, Стив Джобс дословно сказал, что 300 точек на дюйм (300 ppi) — это предел сетчатки человека, если смотреть в экран с расстояния 25-30 см.
Давайте проверим это заявление. К слову, если кому-то интересно, как именно я определяю угловые размеры, то в двух словах объясню. Вначале нужно на калькуляторе посчитать тангенс нужного угла, а затем умножить его на расстояние до объекта.
Если мы берем среднестатистическое зрение, то это 1 угловая минута или 1/60° (0.0166). Смотрим на калькуляторе, чему равняется tg(0.0166). Это будет 2.9*10 -4 . Теперь умножаем это число на 30 см и получаем 0.0087 см или 0.087 мм, или 87 мкм.
Действительно, человек с обычным зрением с расстояния 30 см тоже не сможет различить отдельные точки на экране с плотностью пикселей 326 ppi, где каждая точка имеет размер 78 мкм.
Но уже с 25 см глаз среднестатистического человека различает предметы 72 мкм. А если брать хорошее зрение (0.8 угловых минут), то такой человек способен с 25 см увидеть отдельные точки размером 58 мкм, что значительно меньше точек iPhone.
Говорить об идеальном зрении (0.47 угловых минут) и вовсе неуместно. Такой «эталонный глаз» теоретически способен различить точку 34 мкм с расстояния в 25 см! Естественно, для обладателя такого глаза пикселизация Retina-экрана будет ужасающей.
Минуты, секунды, углы…
Перед тем, как говорить о гаджетах, вначале нужно определиться в понятиях, чтобы не возникало никаких недоразумений. И для этого рассмотрим простой пример.
Представьте, что вы смотрите на две точки определенного размера с какого-то расстояния:
Сможете ли вы с точностью сказать, что перед вами две точки, а не одна? Судя по картинке, ответ очевиден. Мы можем в этом легко убедиться и проследить за тем, как свет от этих точек попадает на сетчатку — «матрицу» нашего глаза:
Каждая точка оставила четкий «след» на сетчатке и мы их легко различаем. Но когда эти точки начнут сближаться, в какой-то момент их «следы» на сетчатке начнут сливаться в одно пятно:
Если мы приблизим картинку, то увидим примерно следующее:
Так происходит по той причине, что свет имеет двойную природу. Это и маленькие «шарики» энергии, которые сталкиваются с предметами и отлетают от них в разные стороны, словно шары для бильярда. И в то же время это волны — как те, что мы привыкли видеть на воде.
Когда свет проходит через маленькое круглое отверстие (зрачок глаза или диафрагму объектива), он проявляет свойства волны и оставляет на сетчатке размытые следы от этих волн. Чем меньше отверстие, тем более размытыми будут точки. Это явление называется дифракцией.
Если расстояние между точками будет небольшим, в какой-то момент их образы просто сольются в одно пятно и глаз уже не будет их различать. Наступление этого момента хорошо описал британский физик Рэлей еще в 1879 году (так называемый критерий Рэлея).
А теперь давайте еще раз посмотрим на два предыдущих рисунка и обратим внимание на углы, под которыми сходятся лучи света в каждом случае:
Мы видим простую закономерность — чем ближе точки друг к другу, тем меньше угол между лучами, исходящими от них. На картинке слева лучи от двух точек сходятся под бóльшим углом (a), чем на примере справа (угол b).
Логично предположить, что существует такой угол между лучами, при котором на сетчатке уже не будет двух отдельных точек — они сольются в одно пятно. Другими словами, если угол между точками будет слишком маленьким, мы уже не сможем их различать.
Соответственно, сколько бы еще точек или объектов ни находилось между этими двумя точками — для нашего глаза они будут незаметными или неразличимыми.
Получается, мы можем оценивать расстояние между точками не только миллиметрами, но и углами, под которыми пересекаются лучи света. Таким же образом можно определять даже размеры самих объектов, а не только расстояние между ними.
Собственно, именно это мы и делаем постоянно в астрономии — измеряем углами размеры небесных тел. И здесь принцип точно такой же — лучи света, исходящие от краев наблюдаемого объекта будут пересекаться под разными углами в зависимости от размера объекта:
А если мы знаем расстояние до этого объекта, то можем легко высчитать и его реальный размер. Ведь это простой треугольник с одним известным углом (под которым пересекаются лучи света) и одной известной стороной (расстояние до объекта), а другая сторона (она и будет размером объекта) высчитывается по элементарной школьной формуле.
Это и есть основные понятия, которые нужны нам для дальнейшего разговора!
Давайте еще раз подытожим:
- Наш глаз видит какой-то объект или расстояние между объектами только в том случае, если от них исходят лучи света и попадают к нам на сетчатку;
- Чем ближе объекты друг к другу или чем меньше сам объект, тем меньше будет угол, под которым пересекаются лучи света в нашем глазу;
- Существует минимальный угол (угловой размер), при котором наш глаз еще способен увидеть объект или различить два объекта на небольшом расстоянии друг от друга. Все, что меньше этого угла — либо неразличимо (если мы говорим о расстоянии между двумя объектами), либо вообще невидимо без приборов (если речь идет просто о маленьком объекте).
Теперь нужно разобраться с тем, какой же этот минимальный угол, определяющий границы наших физических возможностей.
Нормальное зрение
Помните школьную проверку зрения? Когда врач просил закрыть один глаз и назвать букву, которую он показывает на вот такой табличке:
Это так называемая таблица Сивцева для проверки зрения. Сами буквы и их размер здесь подобраны неслучайно.
К примеру, обратите внимание на букву Ш. Главное в этой букве — 3 вертикальных палочки определенной толщины. Если взять 10-й ряд сверху (очень мелкий шрифт), то ширина каждой палочки этой буквы и расстояние между палочками равняются 1.45 мм:
Если вы правильно назовете букву в 10-м ряду с 5 метров, тогда у вас нормальное зрение. Не лучшее, не идеальное, а просто нормальное. Получается, любой человек с обычным зрением способен увидеть с пяти метров две контрастные палочки толщиной 1.45 мм, которые находятся на расстоянии 1.45 мм друг от друга.
Если бы мы провели лучи света от двух палочек буквы Ш из 10-го ряда, то угол пересечения этих лучей с расстояния 5 метров был бы настолько маленьким, что изобразить его на экране просто не представляется возможным. Но для наглядности приведу грубый пример:
И теперь возникает вопрос — под каким же углом пересекаются эти лучи? Думаете это 1°? На самом деле — в 60 раз меньше!
То есть, мы способны различить два объекта, лучи от которых пересекаются под углом всего 0.0166° (1/60). И это не идеальное зрение и даже не выше среднего. Это просто нормальный показатель.
Конечно, пользоваться числом 1/60 градуса не очень удобно, поэтому для него придумали название — 1 угловая минута или просто 1′. Хотите нарисовать угловую минуту — нарисуйте транспортиром 1°, а затем разделите его на 60 ровных отрезков и вы получите нужный угол. В свою очередь, 1 угловая минута также состоит из 60 отрезков — угловых секунд.
Так вот, идеальное зрение — это способность различать две точки, если угловое расстояние между ними всего 28 угловых секунд или 0.47 угловых минут! Возвращаясь к примеру с буквой Ш, можно посчитать, что с 5 метров такой «идеальный глаз» способен различить 2 черточки, толщиной 0.68 мм каждая, на расстоянии 0.68 мм друг от друга!
Это и есть предел человеческого зрения. А дальше в игру вступают законы физики (дифракция света, критерий Рэлея) и наша физиология (диаметр одной колбочки на сетчатке и плотность их расположения).
Но в среднем, конечно, таким зрением могут похвастаться единицы. Для остальных людей более реальная граница — это что-то ближе к 0.8 угловым минутам.
И здесь важно упомянуть еще одну деталь. Думаю, вы обратили внимание на то, что я постоянно указываю расстояние до объекта. Делаю я это неспроста.
С какого расстояния будем разглядывать пиксели?
Очевидно, что различить 2 точки на расстоянии 1 мм друг от друга гораздо проще с двадцати сантиметров, чем с пяти метров. Почему тогда зрение проверяется с пяти метров? И почему 1 угловая минута равна толщине или расстоянию в 1.45 мм? Как интерпретировать угловые размеры, если мы смотрим в экран смартфона с 25 сантиметров?
На самом деле, все эти вопросы — бессмысленны. В этом и заключается прелесть угловых размеров — они учитывают расстояние до предмета.
Если острота зрения человека составляет 1 угловую минуту, то с 25 см он сможет разглядеть точку диаметром 0.07 мм, с 5 метров — точку 1.5 мм, а со 100 метров — точку 3 см:
Получается, нет никакой разницы, будет ли человек с пяти метров разглядывать картину, состоящую из точек диаметром 1.5 мм, или со ста метров — картину из точек диаметром 3 см, никакой разницы в детализации он физически не способен заметить.
Из этого следует один очень важный вывод: с определенного расстояния плотность пикселей (и разрешение экрана) не играют никакой роли. То есть, человек с хорошим зрением не сможет отличить 8K экран от FullHD или даже HD (720p), если смотреть на такие экраны с разного расстояния.
Связано это именно с угловым разрешением глаз. Если брать пример выше, то вместо одной точки диаметром 3 см на расстоянии в 100 метров может быть 3 точки диаметром 1 см каждая, но для нашего глаза это не будет играть никакой роли:
Мы все равно увидим одно зеленое пятно без каких-либо деталей. Так как всё, что не выходит за пределы минимального угла, не различимо для глаза.
Теперь, когда мы разобрались со всем этим, давайте перейдем к экранам.
Зачем экран хорошего смартфона должен иметь плотность пикселей больше 300 точек на дюйм
Человеческий глаз в состоянии различить отдельные пиксели при значении 300-350 ppi. Считается, если плотность пикселей выше, среднестатистический человек невооруженным глазом их уже не сможет разглядеть. Некоторые люди с идеальным зрением могут различать пиксели вплоть до уровня плотности 600 ppi. Но это редкость.
Кажется, слишком большое количество пикселей не всегда идет в плюс. Во-первых, потому что растет энергопотребление. Так как процессору смартфона приходится обрабатывать больше информации. Во-вторых, зачем вам много пикселей, если вы вы все равно не отличите экран с 350 точек на дюйм от экрана с 500 точек в дюйме? Это чисто маркетинговый ход, за который вы переплачиваете производителям.
Хотите смартфон с качественным экраном и максимально четкой картинкой — выбирайте модели с плотностью пикселей около и немного выше 300-350 ppi.
DPI/PPI экранов
Здесь мы подошли к вопросу разрешения и плотности пикселей экранов. Корректно эта плотность обозначается как PPI (pixels per inch) и показывает, сколько пикселей может быть отображено на одном дюйме экрана.
Здесь часто возникают мифические 72 и 96 PPI, которые должны показывать «стандартную» плотность пикселей для экранов. Для задач отображения графики в вебе они бесполезны. При этом реальная плотность пикселей экрана может быть совсем другой: типично что-то около 120 PPI (можете измерить и посчитать для своего экрана).
Но мы помним, что растровые картинки измеряются только в пикселях и никак иначе. Зачем мы вообще говорим о PPI экранов? Потому что есть «Retina» или «HiDPI» экраны.
Retina и HiDPI экраны
Такие дисплеи широко распространены в мобильных устройствах и дорогих ноутбуках. По сути это количественное увеличение пикселей при сохранении физических размеров экрана (например, 5 дюймов по диагонали и 330 PPI).
Для нас, как веб-разработчиков это значит появление разных пикселей в браузере: CSS-пикселей (которые мы обычно указываем в размерах элементов) и физических пикселей (реальных пикселей на экране). Формула такая: Физические пиксели = CSS-пиксели * DPR.
DPR это device pixel ratio — коэффициент перевода CSS-пикселей в физические.
При размещении картинки мы можем написать тег img с размерами 20px, а картинка будет 40 пикселей. При этом на экране с DPR=2,0 мы увидим все пиксели картинки. Но в этой ситуации нас абсолютно не волнуют реальные значения PPI экрана.
При этом мы можем использовать картинки с высокой плотностью пикселей и для обычных экранов, браузер сам отмасштабирует изображение. И опять, DPI и PPI здесь ни при чем, а картинки измеряются в пикселях. Как их показать будет решать браузер, у которого уже есть два вида пикселей.
Вот и вся история, хотя я конечно ничего не говорил об адаптивных картинках, способах оптимизации их отдачи и client hints. Но это другая история.
При создании сайтов и веб-приложений важно помнить, что пользователи будут их открывать на устройствах с разными экранами. Поэтому нужно делать всё возможное, чтобы вёрстка выглядела хорошо на любом девайсе.
Есть множество способов подготовить вёрстку, начиная от использования медиавыражений и заканчивая написанием скриптов. Мы не будем углубляться в эту тему и разберём только основные моменты, которые полезно знать начинающим веб-разработчикам.
Дисклеймер: в статье мы называем ретиной все экраны с повышенной плотностью пикселей, но знаем, что это не так. Считайте это литературным допущением.
Как рассчитать плотность пикселей экрана самостоятельно
Для этого нужно знать величину диагонали экрана в дюймах и его разрешение в пикселях по ширине и высоте. Далее нужно извлечь квадратный корень от суммы квадратов количества пикселей по ширине и высоте и затем разделить полученный результат на диагональ экрана в дюймах. Формула будет такой:
Приветствую уважаемое сообщество Хабра! Пишу эту небольшую заметку как важный ликбез для всех, кто работает с растровыми картинками. Обычно, вопрос в чём измерять изображения встаёт у новичков, но путают термины и опытные специалисты.
Начнём с главного: растровые изображения состоят из пикселей. На этом можно было закончить данную статью, но не всем этого достаточно, поэтому поговорим о заблуждениях и мифах, которые я встречал на практике.
Почему плотность пикселей важна?
PPI – один из важнейших показателей качества экрана! Если вы покупаете смартфон с размером экрана, скажем, 6 дюймов. А разрешение у него всего 720×1280… То экран такого телефона будет зернистым из-за того, что в одном дюйме (2,54 см) будет меньше точек и они будут более крупными. Качество картинки из-за этого будет отличаться в худшую сторону. Производитель в гонке за размером экрана, не позаботился сделать его качественным.
Поэтому при выборе смартфона, смотрите не только на его диагональ, но обязательно посмотрите на PPI.
Рассчитываем лучшее разрешение
Итак, мы убедились, что с расстояния в 25 см даже самый обычный глаз с разрешением в 1 угловую минуту способен различить пиксели на экране с плотностью 326 ppi. А человек с хорошим зрением (0.8′) — и подавно!
Но здесь важен не только сам факт того, заметите ли вы сознательно отдельные пиксели или нет. Я прекрасно помню, с каким удовольствием в начале нулевых читал книги на своем КПК iPAQ 1940. Четкость его экрана с разрешением 240 на 320 точек казалась мне исключительной, хотя объективно размер этих точек был просто огромным.
И только переходя на новые устройства с более качественными экранами, я осознавал, насколько плохими и нечеткими были экраны предыдущих гаджетов.
Конечно, нельзя сравнивать старые 240p-экраны с новыми дисплеями даже бюджетных аппаратов. Но когда вы переходите с того же iPhone 8 (с экраном 326 ppi) на устройство с экраном 400 ppi, вы вполне можете ощутить разницу в четкости изображения (например при чтении текста), даже не обращая внимания на отдельные пиксели.
Если же брать верхнюю границу, за которой уже нет смысла повышать количество точек на дюйм (ppi), то мы можем составить такую таблицу (в первой колонке До экрана указано расстояние, с которого мы смотрим в экран):
Если мы говорим, что плотность пикселей IPS-экрана составляет 326 ppi, это значит, в 1 дюйме помещается 326 синих, 326 зеленых и 326 красных субпикселей.
Но когда речь идет об AMOLED-экранах, здесь ситуация сильно отличается, так как практически в любом AMOLED-экране количество красных и синих субпикселей в 2 раза меньше количества зеленых субпикселей:
Поэтому, когда вы видите, что экран iPhone 12 Pro имеет плотность пикселей 458 ppi, не обольщайтесь. Это значит, что в этом экране 458 зеленых субпикселей на 1 дюйм. Но когда мы посчитаем количество красных или синих субпикселей, то их окажется заметно меньше — 324 ppi.
Повторюсь, это касается практически любого AMOLED-экрана. И по этой причине приведенная выше таблица будет выглядеть несколько иначе для AMOLED-экранов. Так как иногда на контрастных границах изображения человек даже с обычным зрением (1′) сможет с 25 сантиметров заметить неровность шрифтов на AMOLED-экране с плотностью пикселей 450 ppi.
Что же касается телевизоров, то здесь работает тот же принцип. При выборе оптимального разрешения нужно учитывать физический размер экрана и расстояние, с которого вы будете на него смотреть.
Вместо выводов
Я еще раз хочу подчеркнуть основную мысль, которую пытался донести в этой статье. Вы можете выбирать любой экран, игнорируя его разрешение.
Многие люди предпочтут автономность небольшой разнице в четкости. Кому-то вообще безразлично, видны ли пиксели, если очень вглядываться и выискивать недостатки.
Эта статья отвечает лишь на один конкретный вопрос — есть ли смысл в увеличении разрешения экрана и до каких пределов можно увеличивать плотность пикселей, замечая (при желании) разницу в четкости картинки.
Как мы разобрались, для того, чтобы глаз спутал изображение на экране с реальностью, нужна достаточно высокая плотность пикселей, которая пока не встречается повсеместно даже на флагманских смартфонах.
Конечно, детализация — это лишь часть общей картины, но для многих она важна. И 300 ppi — это далеко не предел человеческого зрения.
Алексей, глав. редактор Deep-Review
P.S. Не забудьте подписаться в Telegram на наш научно-популярный сайт о мобильных технологиях, чтобы не пропустить самое интересное!
PPI, или плотность пикселей (сокращение от английского pixels per inch — пикселей на дюйм) — это количество пикселей, вмещающееся в одном дюйме экрана устройства: смартфона, планшета, ноутбука. Чем больше пикселей может разместиться в одном дюйме, тем меньший размер имеет один пиксель и тем менее они видимы невооруженным глазом. Чем больше пикселей умещается на одном дюйме экрана (чем больше цифра ppi) — тем, соответственно, выше четкость и реалистичность изображения.
Сам пиксель — это единица измерения высоты и ширины изображения. Один пиксель можно представить в виде крохотного квадрата, окрашенного одним цветом.
Экран первого компьютера Mac обладал плотностью пикселей 72 ppi. Число кажется большим, но пиксели на самом деле были огромными, а качество картинки — низким. Все из-за того, что сам экран был большим.
Современные смартфоны ушли далеко вперед и оснащаются дисплеями с плотностью пикселей куда более большей. Даже простенькие бюджетные аппараты обладают экранами с 220 ppi и выше, а у флагманских моделей этот показатель достигает 458 ppi (Apple iPhone 11 Pro Max), 522 ppi (Samsung Galaxy S10+) и 642 точек на дюйм (Sony Xperia 1). Смартфон Sony Xperia XZ Premium DS отличается рекордным показателем плотности пикселей — 806 ppi при разрешении экрана 3840×2160 пикселей.
DPI, PPI и изменение размеров
Самое частое заблуждение — использование единиц DPI (dots per inch — точек на дюйм) и PPI (pixels per inch — пикселей на дюйм). На самом деле эти единицы относятся к принтерам и сканерам соответственно. Также их можно применять в характеристиках экранов. По сути это коэффициенты для перевода между физическими размерами в аналоге (в сантиметрах или дюймах) и размерами в пикселях для цифрового изображения.
Например, изображение в 100 пикселей, распечатанное с разрешением 100 DPI будет иметь размер 1 дюйм. Всё просто и понятно.
Однако, при изменении размеров в графических редакторах нам предлагают указать размеры в удобных нам измерениях, в том числе в DPI. Здесь и начинается путаница.
На самом деле физические размеры изображения (в сантиметрах, дюймах и т.д.) и значение DPI это всего лишь мета-информация в свойствах файла. Но редактор может использовать эти значения как средство указания требуемых размеров в пикселях.
Допустим, у нас изображение размером 3000 пикселей (квадратное), у которого стоит значение 300 DPI. Получаем: 3000 пикселей / 300 DPI = 10 дюймов. А теперь заходим в редактор (Photoshop) и изменяем значение DPI на 600. Что мы получим? А это зависит от галки «Resample». Если она стоит, мы получим upsampling (увеличение) изображения до 6000 пикселей. Если не стоит, то размер в дюймах станет 5 вместо 10.
Таким образом, для веб-разработки все значения физических размеров (DPI, сантиметры, дюймы и т.д.) можно смело игнорировать и смотреть исключительно на размеры в пикселях.
Особенности вёрстки под ретина-экраны
Ретинизация изображений — стандарт на рынке веб-разработки. Уже сейчас многие устройства (и не только от Apple) используют экраны с повышенной плотностью пикселей. Поэтому, чтобы вёрстка выглядела хорошо, нужно научиться ретинизировать контент. Давайте разберём, какой тип контента нужно оптимизировать под экраны с высокой плотностью, а какой не нуждается в дополнительной подготовке.
Текст
С текстом ничего не нужно делать, ведь современные шрифты выполнены в векторном формате. Векторный текст сам подстраивается под параметры экрана и одинаково выглядит на всех устройствах. Поэтому все тексты на сайте нужно добавлять не изображениями, а с помощью
, , и других тегов.
Исключение — логотипы: даже если они выглядят как текст, их лучше вставлять изображением. Причина в том, что если по каким-то причинам основной шрифт не загрузится, браузер заменит его на стандартный. В таком случае логотип уже не будет соответствовать фирменному стилю компании. Например, представьте себе лого Coca-Cola, написанное не узнаваемым курсивом, а стандартным Arial.
Так мог бы выглядеть логотип Coca-Cola, если бы шрифт не подгрузился.
Даже в таком, казалось бы, простом случае логотип «Техномарта» лучше сделать картинкой в формате SVG, а не написать простым текстом.
Иконки и декоративные изображения
Лучшее решение для иконок и декоративных элементов — использование формата SVG. SVG — векторный формат графики, и он, как и в случае со шрифтами, отлично выглядит на экранах с разным разрешением и плотностью пикселей и не нуждается в дополнительной оптимизации при вёрстке под ретину. Главное не забывать указывать размеры таких элементов.
Иконки категорий лучше использовать в SVG-формате. А вот главный баннер, кажется, забыли оптимизировать под ретина-экраны.
Есть и другие векторные форматы, например, AI — как на этом изображении. Такое изображение хорошо подойдет для широкоформатной печати в типографии, но не для сайта.
Контентные и фоновые изображения
Для контентных и фоновых изображений обычно используют PNG, JPG, WebP и другие растровые форматы. Почему не SVG? Потому что отрисовывать фотореалистичную графику в векторе — очень трудоемкий и технически сложный процесс.
Вся растровая графика состоит из пикселей, количество которых определяется при создании изображения и остается неизменным. Поэтому при увеличении или уменьшении такой картинки её качество ухудшается: она становится «зернистой». Из-за таких особенностей основной упор при оптимизации вёрстки под ретина-дисплеи делается именно на подготовку и добавление растровой графики: контентных и фоновых изображений.
Графика должна быть подготовлена как минимум для двух вариантов экранов. Один для обычных дисплеев, второй, с увеличенным количеством пикселей — для ретины.
Обычно дизайнеры знают про экраны с повышенной плотностью и сами готовят дополнительные изображения. Так, если вы работаете с Figma, то можете легко выгрузить изображения с индексом @1x для обычных дисплеев и @2x — для дисплеев, плотность пикселей которых в два раза выше. Обычно этих индексов достаточно. Но в некоторых проектах идут дальше и используют отдельную графику с индексом @3x и выше.
Пример: как экспортировать изображения в Figma.
При ретинизации изображений учитывается плотность пикселей экрана устройства и в зависимости от нее показываются разные изображения. Чтобы браузер понимал, какую из картинок показать пользователю, используют медиазапросы или специальные атрибуты.
Фоновые изображения вставляют с помощью медиавыражения @media(min-resolution: 2dppx) <. >.
Вариант с префиксами:
При добавлении фона обязательно указывайте ширину и свойство background-size . Если есть возможность заменить фон на градиент, то лучше поступить именно так. Он будет выглядеть хорошо на любых экранах.
Еще один способ ретинизации фоновых изображений — использование CSS-функции image-set() . Эта функция позволяет указать несколько вариантов изображения и предоставляет браузеру возможность самостоятельно выбирать, какое из них показать пользователю. Выбор браузера будет зависеть от качества интернет-соединения. Например, при медленном интернете браузер покажет картинку, отмеченную в функции как 1x.
У функции image-set() есть несколько особенностей:
Браузеры на webkit требуют наличия префикса -webkit-image-set()
В Safari префикс указывать не нужно, но синтаксис функции немного другой, с использованием функции url (): background-image: (url("platypus.jpg" 1x));
Для контентных изображений следует использовать тег и атрибут srcset . Например:
После добавления нескольких вариантов графики полезно проверять, как отображаются изображения на экранах с разной плотностью пикселей. Это можно сделать с помощью инструментов разработчика. Например, в Chrome DevTools на верхней панели можно изменить плотность экрана на DPR: 1.0, 2.0 или 3.0. А во вкладке «Сеть» или Network можно посмотреть, какие картинки загружаются на экранах с разной плотностью. Главное — при изменении DPR не забывайте перезагружать страницу.
Что такое пиксель?
Чтобы понять, чем ретина-экраны отличаются от остальных и как с ними работать, нужно для начала разобрать понятие пикселя. Пиксели бывает двух видов:
Физический пиксель — пиксель устройства — это пиксель на матрице девайса. Например, когда мы говорим, что ширина экрана устройства 480px, то подразумеваем, что по всей ширине находится 480 неделимых ячеек. Именно они с помощью цветовой схемы RGB формируют изображение на экране.
Чем больше физических пикселей на экране, тем выше его плотность и тем детальнее выводимое на него изображение. Для измерения плотности экранов используют специальную единицу PPI — Pixels per Inch. Она показывает количество физических пикселей на квадратном дюйме экрана. То есть чем выше PPI, тем лучше графика.
CSS-пиксель — относительный пиксель. Размер физических пикселей может отличаться у разных устройств и производителей. Поэтому они подстраивают выводимую на экране своих девайсов информацию под CSS-пиксель. Если этого не сделать, то изображения и тексты, размеры которых заданы в CSS, будут выглядеть по-разному даже на внешне похожих устройствах.
В свою очередь, разработчики никогда не работают с физическими пикселями устройств, только с CSS-пикселями. Чему равен один CSS-пиксель? Изначально стандарт W3C приравнивал его к значению 1/96 дюйма, то есть около 0,26 мм., а браузеры для упрощения расчетов принимали его 1:1 к физическому пикселю при масштабе 100%. Но позже многое изменилось: настало время экранов с повышенной плотностью пикселей.
Как узнать плотность пикселей на дюйм?
С устройствами Apple всё просто. Можно зайти на официальный сайт, выбрать интересующий девайс и нажать на кнопку «Спецификация». Вы попадёте на страницу с подробными техническими характеристиками, в том числе с информацией о диагонали дисплея, разрешении и PPI:
С другими устройствами может быть чуть сложнее: не все производители указывают плотность пикселей на дюйм. Например, некоторые бренды в технических характеристиках описывает только диагональ и разрешение экрана. Поэтому если вам нужно узнать PPI на конкретном девайсе, можете вычислить его сами по формуле:
Чем pp i отличается от dpi и почему не стоит путать
D pi (сокращение от английского dots per inch — точек на дюйм) — это разрешение печатающего устройства. Dpi — говоря простым языком, это величина, показывающая, насколько маленькую точку может нарисовать печатающее устройство. Термин d pi применяется в полиграфии.
Ppi — это разрешение файла изображения, выражающееся в количестве пикселей на дюйм. Увеличив на экране картинку, можно увидеть квадратики — те самые пиксели, из которых она состоит.
Для рядового пользователя какой-либо разницы между dpi и ppi нет. И то и другое — единицы измерения, которые применяются для определения разрешения изображения, отображенного на экране или распечатанного на бумаге (dpi).
Читайте также: