Онлайн расчет ppi: PPI калькулятор. Рассчитать плотность пикселей на дюйм

пиксели, DPI, PPI, сантиметры — вы ничего не путаете? / Хабр Приветствую уважаемое сообщество Хабра! Пишу эту небольшую заметку как важный ликбез для всех, кто работает с растровыми картинками. Обычно, вопрос в чём измерять изображения встаёт у новичков, но путают термины и опытные специалисты.

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

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, сантиметры, дюймы и т.д.) можно смело игнорировать и смотреть исключительно на размеры в пикселях.

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. Но это другая история.

Как устроены экраны устройств — Техника на vc.ru

DPI или Dots Per Inch (точек на дюйм) — это величина измерения плотности точек, изначально используемая в печати. Это количество чернильных точек, которое принтер может поместить в одном дюйме.

Чем меньше DPI, тем менее детализированная печать. Это понятие применяется также и для компьютерных экранов под названием PPI или Pixels Per Inch (пикселей на дюйм). Тут такой же принцип: величина подсчитывает количество пикселей, которое ваш экран способен отобразить на 1 дюйме. Термин DPI также используется и для описания характеристик экрана.

Компьютеры Windows по умолчанию имеют PPI = 96. В Mac используется PPI = 72. Эти значения были обусловлены тем, что производимые тогда экраны отображали 72 «точки» или пикселя на дюйм. Так было в 80-х, а сейчас устройства на Windows, Mac и прочих платформах имеют множество вариаций PPI-разрешения экранов.

Разрешение, пиксель и физический размер

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

Обычные декстопные экраны не-Retina (включая Mac) будут иметь PPI от 72 до 120. Дизайн с PPI между 72 и 120 дает уверенность в том, что ваша работа будет иметь примерно одинаковые пропорции в размере везде.

Вот пример. Экран Mac Cinema Display 27″ располагает PPI = 109, что означает, что он отображает 109 пикселей на дюйме экранной площади. Ширина с фасками составляет 25,7 дюймов (65 см). Ширина самого экрана примерно 23,5 дюймов, так что 23,5 * 109 ~ 2560, что и формирует родное разрешение экрана в 2560 * 1440 px.

23,5 * 109 на самом деле не равно 2560 — это будет 23,486238532 дюймов. Более точный результат получится при подсчете пикселей на каждый сантиметр, но, надеюсь, вы уловили суть.

Влияние на дизайн

Скажем, вы нарисовали синий квадрат размером 109 * 109 px на экране, о котором

Плотность пикселей — Pixel density

Пикселей на дюйм ( пикселей на дюйм ) и пикселей на сантиметр ( PPCM или пиксели / см ) являются измерения пикселя плотности (разрешение) электронного устройства изображения, такие как монитор компьютера или телевизионном экране, или изображение оцифровка устройства , такие как камеры или сканер изображений . Горизонтальные и вертикальные плотности, как правило , такой же, как и большинство устройств имеют квадратные пиксели , но отличаются от устройств , которые имеют не-квадратные пиксели.

Пикселей на дюйм (или пикселей на сантиметр) , также можно описать разрешение в пикселях файла изображения. A 100 × 100 пикселей изображения печатаются в 1 квадратный дюйм в имеет разрешение 100 пикселей на дюйм. Используя этот способ, измерение имеет смысл при печати изображения. Это стало обычным явлением для обозначения PPI в ДПИ , несмотря на то, PPI относится к входному разрешению. Промышленный стандарт, хорошие фотографии качества обычно требуют 300 пикселей на дюйм, при размере 100%, при печати на мелованной бумаги на складе, используя трафаретную 150 линий на дюйм (LPI). Это обеспечивает коэффициент качества 2, который является оптимальным. Низкий коэффициент качества приемлемым считается 1,5, что соответствует печати 225 PPI изображение , используя экран 150 на бумагу на дюйм с покрытием.

Частота экрана определяется типом бумаги изображение печатается на. Впитывающая бумага поверхность, без покрытия бумажных отходов, например, позволяет капель чернил распространения (растискивание) -SO требует экрана более открытой печати. Таким образом, разрешение входного сигнала может быть уменьшено, чтобы минимизировать размер файла без потери качества, при условии, что коэффициент качества 2 поддерживается. Это легко определяется путем удвоения частоты линии. Например, печати на немелованной бумаге часто ограничивает частоту печати экрана не более 120 линий на дюйм, следовательно, коэффициент качества 2 достигается с изображениями 240 точек на дюйм.

За пределами площади, показанной выше, составляет 200 пикселей на 200 пикселей. Для того, чтобы определить, PPI монитор, установите параметр масштабирования OS DPI на 100% и масштаб браузера на 100%, а затем измерить ширину и высоту, в дюймах, квадрата, как показано на данном мониторе. Разделив 200 от измеренной ширины или высоты дает горизонтальный или вертикальный PPI монитора, соответственно, в текущем разрешении экрана.

Компьютерные дисплеи

ИЦП / PPCM из дисплея компьютера связан с размером дисплея в дюймах / см и общего количества пикселей в горизонтальном и вертикальном направлениях. Это измерение часто упоминаются как точки на дюйм , хотя это измерение более точно относится к разрешению на компьютерном принтере .

Например, в 15-дюймовый (38 см) дисплей, размеры которой проработать до 12 дюймов (30,48 см) в ширину и 9 дюймов (22,86 см) высотой, способных не более 1024 × 768 (или XGA ) пикселей, может отображать вокруг 85 ИЦП, или 33,46  PPCM, как в горизонтальном и вертикальном направлениях. Этот показатель определяется путем деления ширины (или высоты) область отображения в пикселях по ширине (или высоте) области отображения в дюймах. Вполне возможно , для отображения , чтобы иметь различные измерения горизонтального и вертикального PPI (например, типичный формат 4: 3 ЭЛТ — монитор , показывающий режим дисплея компьютера на максимальный размер 1280 × 1024, который является 5 а: 4 соотношение, не совсем такой же , как 4: 3). Очевидная ИЦП монитора зависит от разрешения экрана (то есть, количество пикселей) и размер экрана в использовании; монитор в режиме 800 × 600 имеет более низкий , чем PPI делает то же монитор в режиме 1024 × 768 или 1280 × 960.

Шаг точки компьютерного дисплея определяет абсолютный предел возможной плотности пикселей. Типичные примерно-2000 с электронно — лучевой трубки или ЖК компьютерные дисплеи в диапазоне от 67 до 130 PPI, хотя настольные мониторы превысил 200 PPI и современные маленьким экраном мобильных устройств часто превышают 300 PPI, иногда с большим запасом.

В январе 2008 года Копин корпорация объявила 0,44 дюйма (1,12 см) SVGA ЖК — дисплей с плотностью пикселей 2272 PPI (каждый пиксель только 11,25  мкм). В 2011 году они следовали за этим с 3760-DPI 0,21-дюймовый VGA цветной дисплей. Производитель говорит , что они разработаны на ЖК — дисплее , чтобы быть оптически увеличено, как и в устройствах очки высокого разрешения.

Голография приложение требует еще большую плотности пикселей, так как более высокая плотность пикселей производит больший размер изображения и широкий угол обзора. Пространственные модуляторы света может уменьшить шаг пикселя до 2,5  мкм , что дает плотность пикселей PPI 10,160.

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

Высокие пиксельные дисплейные технологии плотность будет сделать supersampled сглаживания устаревшим, позволяет истинную WYSIWYG графики и, потенциально позволяет практичную « безбумажный офис » эпоха. Для точки зрения, такое устройство на 15 дюймов (38 см) , размере экрана будет иметь для отображения более четырех Full HD экранов (или WQUXGA разрешения).

Разработка дисплея с ≈900 PPI позволяет в течение трех пикселей с 16-битного цвета , чтобы выступать в качестве суб-пикселей для формирования пикселя кластера . Эти кластеры пикселов действуют как обычные пикселей при ≈300 PPI для получения 48-битного цветного дисплея.

ИЦП спецификация плотности пикселей дисплея также полезна для калибровки монитора с принтером. Программное обеспечение может использовать измерение PPI для отображения документа на «фактический размере» на экране.

Расчет монитора PPI

Теоретически, ИЦП может быть вычислена по зная размер диагонали экрана в дюймах и разрешение в пикселях (ширина и высота). Это может быть сделано в два этапа:

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

   dпзнак равновесп2+часп2{\ Displaystyle D_ {р} = {\ SQRT {w_ {р} ^ {2} + H_ {р} ^ {2}}}}

2. Рассчитать PPI:

   ппязнак равноdпdя{\ Displaystyle ИЦП = {\ гидроразрыва {D_ {р}} {D_ {я}}}}

где

• dп{\ Displaystyle D_ {р}} диагонально разрешение в пикселях
• весп{\ Displaystyle w_ {р}} это ширина разрешение в пикселях
• часп{\ Displaystyle h_ {р}} это разрешение высоты в пикселях
• dя{\ Displaystyle D_ {я}} это размер диагонали в дюймах (это число рекламировали как размер дисплея).

Например:

Следует отметить, что эти расчеты не могут быть очень точным. Часто экраны рекламируемые как «дюймовый экран X» могут иметь свои реальные физические размеры видимой области отличается, например:

• Корпорация Apple рекламировала их в середине 2011 ИМАКА как «21,5 дюйма (видимая область) […] дисплей» , но его фактическая Видимая область составляет 545,22 мм или 21.465 дюйма. Более точная цифра увеличивается расчетная PPI от 102.46 (21.5) , используя для 102.63.
• HP монитор LP2065 20 дюймов (50,8 см) имеет фактическую видимую область 20,1 дюйма (51 см).
• В более значительном случае, некоторые мониторы , такие как Dell UltraSharp UP3216Q (3840 × 2160 пикселей) рекламируются как 32 — дюймовый «класса» монитор (137,68 PPI), но фактическая площадь обзора по диагонали составляет 31,5 дюйма, что делает истинный PPI 139,87 ,

Расчет PPI ​​экранов зрения камеры

Производители камер часто цитируют просматривать экраны в «количестве точек». Это не то же самое, как количество пикселей, потому что есть 3 «» точек на пиксель — красный, зеленый и синий. Например, Canon 50D котируется как имеющий 920,000 точек. Это переводится как 307,200 пикселей (× 3 = 921600 точек). Таким образом, экран 640 × 480 пикселей.

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

Сканеры и камеры

«ИКО» или «плотность пикселей» может также описывать сканер изображений разрешения. В этом контексте, ИЦП является синонимом образцов на дюйм . В цифровой фотографии, плотность пикселей является количеством пикселей , разделенных на области датчика. Типичный DSLR , около 2013, имеет 1-6.2 МП / см ² ; типичный компактный имеет 20-70 MP / см ² .

Например, Sony Alpha SLT-A58 имеет 20,1 мегапикселя на качестве APS-C датчик , имеющий 6,2 МП / см ² , так как компактной камеры , как Sony Cyber-Shot DSC-HX50V имеет 20,4 мегапикселей на 1 / 2.3″ датчик , имеющий 70 MP / см ² . профессиональная камера имеет более низкий , чем PPI компактной камера, потому что она имеет большие фотодиоды из — за значительно более высокие датчиками.

Смартфоны

Смартфоны используют небольшие дисплеи, но современные экраны смартфонов имеют больший рейтинг PPI, такие как Samsung Galaxy S7 с дисплеем четырехъядерного HD на 577 PPI, Fujitsu F-02G с дисплеем четырехъядерного HD на 564 PPI, то LG G6 с четырехъядерным HD дисплей на 564 PPI или — XHDPI или Oppo Найти 7 с 534 PPI на 5,5″ дисплей — XXHDPI (смотри раздел ниже). Sony «S Xperia XZ Премиум имеет 4K дисплей с плотностью пикселей 807 PPI, самый высокий из любого смартфона , как из 2017.

Названные плотности пикселов

В Google Android документации разработчика групп отображается по их приблизительным плотности пикселей в следующих категориях:

Сокращенное название	Названная плотность пикселей	точек на дюйм
TVDPI	Средняя Высокая плотность	≈160-213 точек на дюйм
ИПЧР или HiDPI	Высокая плотность	≈213-240 точек на дюйм
XHDPI	сверхвысокая плотность	≈240-320 точек на дюйм
XXHDPI	доплнительная сверхвысокая плотность	≈320-480 точек на дюйм
XXXHDPI	Экстренно экстренно сверхвысокая плотность	≈480-640 точек на дюйм

переход на метрическую систему

Цифровой издательской индустрии в основном использует пикселей на дюйм, но иногда пикселей на сантиметр используется, или коэффициент преобразования дается.

PNG формат файла изображения позволяет только метр в качестве единицы для плотности пикселей.

Поддержка формата файла изображения

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

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

Формат	Меры измерения	Raster / вектор	Тема на нескольких страницах	Per-страницы размера	Размер в длину для изображения или страницы	плотность
искусственный интеллект	Длина или пиксель	И то и другое	нет		Явная для длины. Нет на пиксель	Неявные для растровых изображений, включенных
прибыль на акцию	длина	И то и другое	да	да	Явный	Явная DPI (PPI) для растровых изображений, шрифтов и эффектов
GIF	пиксель	растр	да	нет	нет	нет
ICO	пиксель	растр	да	да	нет	нет
JPEG	пиксель	растр	нет		Неявные, когда плотность множества	Дополнительный ИЦП или PPCM, 2 байта каждый для горизонтальных и вертикальных направлений
PDF	длина	И то и другое	да	да	Явный	Явная DPI (PPI) для растровых изображений, шрифтов и эффектов
PNG	пиксель	растр	нет		Неявные, когда плотность множества	Дополнительный РРМ, 4 байта каждый горизонтальном и вертикальном направлениях
PPM	пиксель	растр	да	нет	нет	нет
PSD и PSB	Длина или пиксель	И то и другое	нет		Явная для длины. Нет на пиксель	Необязательный
SVG	Длина или пиксель	И то и другое	да	нет	Явная для длины. Нет на пиксель	Неявные для растровых изображений, включенных
TIFF	пиксель	И то и другое	да	да	Неявные, когда плотность множества	Дополнительный ИЦП или PPCM, два 32-битных целых чисел без знака каждый для горизонтального и вертикального направлений
WebP	пиксель	растр	да	неизвестный	неизвестный	неизвестный
XCF	пиксель	И то и другое	нет		нет	нет
Формат	Меры измерения	Raster / вектор	Тема на нескольких страницах	Per-страницы размера	Размер в длину для изображения или страницы	плотность

Смотрите также

Ссылки

Внешние ссылки

О размере экрана, пикселя и элемента / Хабр

Привет, username. Свой первый пост я хочу посвятить актуальной проблеме, связанной с появлением большого количества новых форматов дисплеев и непрекращающейся гонкой за плотностью пикселей. В свете появления таких устройств, как очки дополненной реальности, смартчасов, 4к-мониторов и еще более широкого спектра планшетов и ноутбуков, возникает вопрос: какой размер графического элемента/текста следует считать оптимальным и в чем его измерять. Android-разработчики, несомненно, тут же воскликнут: «Да, конечно, в dp!». Но практика показывает, что дела обстоят несколько сложнее.

Проблема

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

1. Размер
2. Цвет и тон
3. Границы (особый метод, связанный со свойством зрительного центра оформлять отдельные объекты по касанию светотеневой плоскости и фона)
4. Фактурная и графическая насыщенность

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

Синопсис

Подобие стандарта на ppi (pixels per inch) появилось в середине 1980-х, когда Apple выпустила свои первые компьютеры серии Macintosh. У этих компьютеров была 9-дюймовая диагональ экрана с 72 пикселями на каждый квадратный дюйм. Уже тогда Apple заняла позицию создания собственной экосистемы, поэтому в диапазоне технологических возможностей того времени было выбрано ppi ровно в два раза меньше dpi (dots per inch) эппловского принтера ImageWriter, что давало гарантию, что размер элементов на экране будет точно соответствовать размеру на бумаге. Однако это касалось только компьютеров фирмы Apple, так как другие производители использовали самые разные ppi, следуя своим возможностям и законам рынка. Этот рудимент видения компьютера как приставки к принтеру привел к появлению в Photoshop галочки Resample Image, при снятии которой разрешение изображения не влияет на его размер, но влияет на качество печати.

Тем временем разрешение и диагональ мониторов начали расти как на дрожжах. Если Mac 128k имел разрешение 512×342 пикселя, то к 1996 году эта же компания выпустила Apple Multiple Scan 15 Display с диагональю 13.3 дюйма и потрясающим для тех времен разрешением 1024х768px. Это значение, вне зависимости от диагонали, оставалось самым популярным разрешением экранов еще 12 лет.

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

В 2008 году я купил ноутбук Lenovo Y710-200, имевший диагональ 17 дюймов и разрешение 1920х1200px. К сожалению, на тот момент ни у меня, ни, видимо, у Lenovo не было представления о том, какое это было сильное преимущество для ноутбука: 132ppi! Даже у профессиональных мониторов ppi было ниже, а выше можно было наблюдать уже в совсем специфической технике, вроде медицинских мониторов или мониторов космических устройств, хотя именно в этом году Kopin Corporation представила продукт пика технологических исследований — устройство с 2272ppi. Для меня лично дело кончилось тем, что я приучился смотреть видео только HD качества (1920х1080), поскольку на этом экране видео 720p или 480p было очень маленьким. Эта же ситуация подтолкнула меня, как начинающего дизайнера, к самостоятельному осознанию независимости размера элемента от устройства. Кстати, удивительно, но Windows Vista справлялась с масштабированием вполне неплохо.

В 2010 году Стив Джобс представил дисплей повышенной четкости, названный Retina (“сетчатка”, англ.). При этом в своей презентации он заявил, что ppi ретины превышает таковой у человеческого глаза и, следовательно, считается идеальным.
Как опытный презентатор, Джобс произвел впечателение на общественность, однако по мнению специалистов cultofmac.com слукавил приблизительно в 2-3 раза, так как ряд исследователей считает, что разрешающая способность хорошего зрения несколько выше.

Эта картинка (открывать на устройстве с Retina) позволит понять, насколько утверждение Джобса соответствует истине. Человек с нормальным зрением без труда найдет на этом изображении как белые и черные полосы шириной в один пиксель, так и цикл (черная и белая полоса рядом) шириной в 2 пикселя по центру.
Следует также понимать, что, ввиду ограниченного углового разрешения глаза, ppi для экранов разного размера и находящихся от пользователя на разном расстоянии будет отличаться. Например, для iPhone это значение должно быть около 952ppi, а для iPad — 769ppi.

Ситуация

На нынешний день мы имеем целый ряд проблем, связанных с историей пикселя. Совершенно очевидно, что размеры, задаваемые в пикселях, потеряли всякий смысл — только на википедии количество различных значений ppi для мониторов превышает две сотни, а это значит, что размер элемента всегда будет разный. Компания Google описывает в своем девелоперском центре несколько единиц измерений, что по идее должно являться решением:

• px — Pixels (пиксели), соответствующие реальным физическим пикселям экрана
• in и mm — Inches и millimiters (дюймы и миллиметры), физические единицы измерения
• pt — Points (пойнты), 1/72 физического дюйма экрана
• dp — Density-independent Pixels (пиксели, независимые от плотности), абстрактная единица, основанная на плотности физических пикселей и соответствующая 160 dpi экрану (на котором 1dp приблизительно равен 1px)
• sp — Scale-independent Pixels (пиксели, независимые от масштаба), аналог em в web-верстке

Кстати, Microsoft по умолчанию считает, что dp = 1/96 логического дюйма, dpi которого можно настроить в панели управления. Хочется заметить, что, используя физические значения, лучшей практикой было бы использование миллиметров, как производную от основной единицы СИ.

Наиболее близкой к титулу «универсальной» была бы единица sp/em, если бы мы каким-то образом знали базовое оптимальное значение размера кегля. Собственно интуитивное представление дизайнера об оптимуме породило следующий хак в веб-верстке:

• Тэгу html присваивается font-size: Nxx, N = значение, а xx = пиксели/миллиметры/дюймы (для планшетов я обычно использую 3mm).
• Во всех дальнейших размерах элементов используется так называемый rem (root em), всегда равный значению, указанному в font-size тэга html (но не его детей).
• В тэге body указывается font-size непосредственно текста.

html {
    font-size: 22px;
}

body {
    font-size: 14px;
    line-height: 1rem;
}

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

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

Бионика

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

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

В среднем по вертикали поле зрения человека составляет около 135 градусов, а по горизонтали — 155. При этом бинокулярные и хроматические возможности глаза неоднородны по его площади.

Источник

Для того, чтобы определить остроту зрения (аналог разрешения камеры), используются таблицы Снеллена — ряды букв разного кегля, где размер и ширина знака подбраны так, чтобы стянуть угол в 1 минуту дуги на определенном расстоянии. При этом нормой считается зрение, при котором человек различает буквы в шестой строке с расстояния 6 метров, что равняется 5 минутам дуги. В научных исследованиях принято применять кольца Ландольта, так как это позволяет более объективно оценивать данные, без погрешности на узнаваемость типографических знаков и шрифт. В России кольца Ландольта адаптированы С. Головиным, а таблица Снеллена учеником Головина Д. Сивцевым.

Психооптик Гарольд Блэквел выразил понятие о разрешении глаза как углового параметра функции светлости и контраста. Его исследования показали, что этот угол равен приблизительно 0.7 минут дуги для определения пятна неточечного объекта (чтобы сказать, что пятно не является точкой, наблюдателю необходимо минимум 2 пикселя), что результирует минимальную разрешающую способность в 0.35 минут дуги.

Современные исследования ясности зрения оперируют понятием цикл на градус (под циклом понимается черно-белая пара линий) и предлагают значение 77 циклов на градус, что приблизительно равно 78 циклам на градус дуги. Опять же, ввиду минимальной ширины цикла в 2 пикселя, мы видим схожие 0.39 минут дуги.

Учитывая угловое пространство глаза, путем простого вычисления 100 * 100 * 60 * 60 / (0.3 * 0.3) = 400 мегапикселей мы получаем значение, весьма близкое к общему количеству фоторецепторов в сетчатке.

Следует понимать, что в то время, как область ясного видения дает довольно четкое представление о минимально допустимом размере объектов и их разрешении, механика восприятия в периферической области несколько отличается, так как оно в большей степени отвечает за бессознательное сканирование и приоритезацию. Особенность человеческого глаза иметь максимальное разрешение и когнитивный фокус в области фовеа (так называемое желтое пятно), например, позволяет таким сервисам как Spritz увеличить скорость восприятия текста (помимо сокращения «лага» за счет отсутствия движений глаз), умещая слово в область ясного видения.

Помимо этого, приведенная схема дает нам четкое представление о рекомендуемых размерах элементов. Ясно, что для комфортного ориентирования по интерфейсу интерактивный элемент, на котором в текущем сценарии сфокусировано внимание, не должен превышать область макулы (7°х5.5°), а блок/группа/список, в котором он находится, — область ясного видения (16-20°x12-15°). Именно этот факт косвенно поддерживает предлагаемую в Google гипотезу, что маленький экран не значит меньше информации, так как область когнитивного анализа в принципе довольно мала.

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

Оптимум

Дальнейшие исследования выявили наиболее объективные рекоммендации:

• Ключевые элементы должны занимать не меньше 20 минут дуги
• Рекомендуемый размер 20-22 минуты дуги
• Следует избегать символьных элементов размером меньше 16 минут дуги,
• Разрешение хорошего человеческого зрения = 0.4 минут дуги
• Среднее разрешение (с учетом всех возрастов) = ~1 минута дуги

Формула для расчета размера элемента в зависимости от расстояния:

h = 2 *d * Tan(x/2)

где
h = искомая высота элемента
d = расстояние в миллиметрах
x = размер элемента выраженный в радианах (минуты дуги в радианы)

Примеры округленных расчетов рекомендуемого размера шрифта (21 минута дуги) в миллиметрах

Расстояние	Кегль
400	2.4
500	3.1
600	3.7
700	4.3

Следует отдельно заметить, что устройства вроде Oculus Rift, находящиеся в непосредственной близости от глаза, следуя этой формуле, в идеале должны обладать огромным ppi со значением больше 2000.

Выводы

Исходя из приведенных выше рассуждений, можно прийти к следующим выводам касательно решения проблемы верстки на разных устройствах:

• Производителям мониторов необходимо всегда через драйвера сообщать ОС свой физический размер для приблизительного определения расстояния от экрана.
• ОС должна не просто масштабировать элементы в процентах, но и уметь рассчитывать размер dp исходя из данных от монитора, чтобы элементы занимали необходимое место в угловом пространстве, видимом глазом
• Для дополнительной калибровки можно использовать данные с камеры, чтобы оценить среднее расстояние от глаз до монитора.
• Очевидно, что наиболее универсальной единицей явились бы сами am — arc minutes (градусы дуги). Помимо всего прочего 1am неплохо описывает толщину оптимальной для глаза линии в соответствующей классическому 1px линии на среднестатистическом мониторе.

На данный момент времени единственный способ решить эту проблему существующими методами — это узнавать параметры устройства через user-agent и подгонять под него переменную rem модульной сетки. Однако такое решение, вероятно, подходит только для больших компаний, которые могут позволить себе анализ и тестирование верстки на десятках видов устройств.

PS В некоторых абзацах, описывающих точные данные, источники были переведены без изменений.

пикселей на дюйм PPI калькулятор

Использование калькулятора

Калькулятор PPI находит пиксели на дюйм (PPI) и пиксели на сантиметр (PPcm). Он рассчитывает PPI ​​при вводе дюймов и рассчитывает PPI ​​и PPcm при вводе сантиметров.

PPI — это показатель плотности пикселей или разрешения экрана компьютера, телевизионного экрана или другого устройства отображения. Пикселей на дюйм или PPcm указывает, сколько пикселей находится на линии 1 дюйм или 1 см на дисплее.2} \)

Используйте формулу для расчета PPI, разделив длину диагонали в пикселях на длину диагонали в дюймах.

\ (\ text {PPI} = \ dfrac {\ text {диагональ в пикселях}} {\ text {диагональ в дюймах}} \)

Число пикселей на дюйм или PPI показывает количество пикселей в 1-дюймовой строке на экране дисплея.PPI будет одинаковым, будь то горизонтальный, вертикальный или диагональный дюйм, поскольку пиксели квадратные и, следовательно, симметричные. Если дисплей не имеет квадратных пикселей, этот калькулятор не применяется.

Вы можете использовать ту же формулу PPI выше, чтобы рассчитать количество пикселей на сантиметр, PPcm. Просто замените сантиметры на дюймы, чтобы найти PPcm.

Как рассчитать PPI ² или пикселей на квадратный дюйм

Умножьте PPI × PPI, чтобы получить количество пикселей на квадратный дюйм.Количество пикселей на квадратный дюйм представляет собой разрешение или плотность пикселей на площади в один квадратный дюйм. Замените 1 см на 1 дюйм, чтобы найти пиксели на квадратный сантиметр или PPcm ² .

Пример: Рассчитать количество пикселей на дюйм PPI

У вас есть экран компьютера шириной 1920 пикселей и высотой 1080 пикселей. Диагональ составляет 10 дюймов. Вы хотите найти плотность пикселей в одном линейном дюйме дисплея.

Рассчитайте длину диагонали в пикселях с помощью теоремы Пифагора:

диагональ _{пикселей} = √ (1920 ² + 1080 ² )

диагональ _{пикселей} = √ (3686400 + 1166400)

диагональ _{пикселей} = √4852800

диагональ _{пикселей} = 2202.91 пиксель

Теперь разделите:

PPI = диагональ _{пикселей} / диагональ _дюймов

PPI = 2202,91 / 10

PPI = 220,29 пикселей

Итак, на 1 дюймовой линии 220,29 пикселей.

Пример: Расчет пикселей на квадратный дюйм, ИЦП ²

При использовании этого же экрана компьютера PPI ² будет:

220.29 ² = 48528 пикселей на квадратный дюйм

Итак, в области экрана 48528 пикселей шириной 1 дюйм и высотой один дюйм.

Как рассчитать шаг диагональной точки

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

\ (\ text {точка шага} = \ dfrac {\ text {диагональ в дюймах}} {\ text {диагональ в пикселях}} \ times \ dfrac {25.4 \; \ text {mm}} {\ text {inch} } \)

Если диагональ экрана составляет 15,4 дюйма и имеет 3396 пикселей. Шаг точек = (15,4 / 3396) × 25,4 & ок; 0,1152 мм.

,

PPI Calculator & DPI Calculator

Имеет ли значение (PPI) размер?

О, старый вопрос! Чем больше, тем лучше? Такой общий вопрос требует такого же старого и использованного ответа: АД ДА! это зависит . Помимо шуток, в целом лучше иметь более высокий PPI или DPI, поскольку это означает, что изображение будет более четким и в нем будет больше деталей. Тем не менее, всегда есть компромисс, и есть определенные сценарии, в которых более высокий показатель PPI может быть вредным .

Если у нас маленький экран, такой как в наших смартфонах, или если мы смотрим на изображение издалека (например, телевизор или кинопроектор), есть точка , в которой наши глаза не могут обнаружить каждый отдельный пиксель , и увеличение ИЦП оказывает все меньшее и меньшее влияние. Это принцип так называемого «дисплея Retina», который Apple использует в своих устройствах.

Этот порог зависит от расстояния , на котором мы обычно смотрим на экран, а также от размера экрана.Например, для iPhone XR PPI — 326, а для iMac с 5K-дисплеем — 218 ppi. Показатель PPI для iPhone XR явно выше, поскольку мы склонны смотреть на наши смартфоны ближе к , чем к монитору компьютера.

Вторая ситуация, в которой большее не может быть лучше, — это когда мы смешиваем разрешения между источником и дисплеем / принтером. Мы уже упоминали о проблеме печати, но мы можем столкнуться с аналогичной проблемой при работе с фотографиями или видео в Интернете.В лучшем случае это максимально возможное разрешение, соответствующее 1: 1 между источником и монитором, на котором мы его наблюдаем.

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

Итак, хотя больший PPI обычно лучше, действительно зависит от , как мы видели при сравнении PPI iPhone XR с iMac.

.Калькулятор разрешения