Количество пикселей на дюйм


Значимость DPI И PPI Для Веб-Дизайна И Photoshop / WAYUP

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

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

В этом материале мы поговорим о DPI и PPI более подробно и на примерах, чтобы разобраться, когда и в каких случаях веб-дизайнеру стоит обращать на них внимание. Сразу оговоримся, что статья может показаться «сухой» и скучной, но мы уверены, интересные моменты вы в ней найдете. Как ни странно, но значения PPI могут и не могут влиять на дизайн и на изображения, даже на сторонние файлы PSD и копируемые данные. А еще ведь существует PPI монитора. И представьте, что все это связано. В конце мы подведем итог и обобщим все умозаключения.

Пиксели и PPI

Пиксели, как состав изображений, относятся к мельчайшим единицам, которые на сетке выкладывают некоторую картинку. Соотношение количества пикселей на один дюйм – PPI. Соответственно, чем больше это количество, тем четче будет изображение, станут доступны для взора мельчайшие детали композиции. Пикселизация же происходит в том случае, если количество пикселей на дюйм  очень маленькое. Соответственно, каждый пиксель обретает очень четкие края, явно видимые. Тесноты среди них нет.

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

Веб-стандарт для изображений составляет 72 пикселя на дюйм. При таком значении изображения выглядят красиво, если они изначально имеют хорошее качество (не искажены, четкие). Имейте в виду, что ваша фотография всегда должна иметь полный размер и быть широкой, чтобы полностью заполнять рамки и границы размещения. Например, большое изображение в шапке страницы Facebook. Изображение должно обладать шириной 851 пикселей. Чтобы предотвратить пикселезацию при разрешении в 72 пикселя на дюйм ширина вашей готовой картинки должны быть почти на 12 дюймов шире.

Сравните разницу.

И

Удивительно, но на текст PPI тоже имеет свое влияние. Аналогично тому, как большое количество пикселей на дюйм делает фотографию более четкой, текст тоже становится удобочитаемым. Шрифты с высоким PPI легче воспринимать, они разборчивее, даже если буквы созданы маленьким размером. Иными словами, текст может четким и нечетким, точно также как и фотографии.

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

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

Точки и DPI

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

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

Когда же мы смотрим на экран, то маловероятно, что кто-то способен увидеть разницу между двумя одинаковыми изображениями, созданными в 100 DPI и 300 DPI. Причина  в том, что мониторы не отображают графику в точках. Для них значения DPI не имеют никакого значения.

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

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

Мегапиксели

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

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

Цифры в веб-дизайне

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

Общая формула расчета и вычисления изменения размеров в зависимости от разрешения и размеров выглядит так:

Вот вам пример: экран монитора LG w2253tq 22 дюйма располагает PPI = 102, что означает, что он отображает 102 пикселя на дюйм экранной площади. Ширина самого экрана примерно 18,8 дюймов, так что 18,8*102 приблизительно 1920, что и формирует родное разрешение экрана в 1920х1080 рх.

Нашли удобный калькулятор PPI мониторов, думаем, пригодится вам.

Например, вы нарисовали синий квадрат размером 102х102px на экране с PPI 102.

Этот квадрат будет иметь физический размер 1х1 дюйм. Но если экран пользователя имеет PPI = 72, ваш синий квадрат будет крупнее по своим физическим размерам. Так как PPI = 72, понадобится примерно полтора дюйма (грубо округлили) экранного пространства, чтобы отобразить квадрат со стороной в 100 пикселей. По формуле выше это рассчитывается легко и быстро.

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

Интересен еще один момент

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

В Photoshop создаем новый документ и выбираем PPI 72. Создаем квадрат 102х102 пикселя и текст 14 пунктов.

 

Затем аналогично создаем квадрат и текст в документе с PPI 102.

Сравниваем, что получилось. Текст во втором случае (родном для монитора) стал крупнее, а квадрат остался тем же самым, он не изменился. Дело в том, что Photoshop автоматически масштабирует значение пунктов  в соответствии с PPI документа. Вот и получилось увеличение размера текста при рендеринге.

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

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

Есть еще вариант, если у вас несколько разных PSD с разными настройками в файлах PPI. Что произойдет в Photoshop? Приложение автоматически настроит размеры элементов пропорционально вашему экрану и значениям PPI. То же самое будет, если вы работаете с макетом сайта в разрешении 72 PPI, а логотип вставляете из документа 100 PPI. Изображение будет изменено автоматически и это может вызвать проблемы.

Решение, впрочем, есть. Изначально работайте в общепринятом разрешении 72 PPI. Это настройка по умолчанию в Photoshop. Но если вам говорят клиенты или знакомые/друзья, что с макетом как-то не так всё, подумайте, а как они открывают его и какие у них настройки приложения.

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

Выводы

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

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

Другой момент в том, что многие пользователи сами изменяют разрешение страницы сайта, чтобы было комфортнее читать/смотреть. Тут уже дизайн сайта может выглядеть удручающе плохо и неказисто. Но сделать навряд ли что-то можно, поскольку посетителям важно удобство. Поэтому помните, что разрешение файлов принято использовать в 72 PPI. Это сэкономит больше места на сервере. Файлы изображений будут небольшими и загружаться быстрее станут. И хотя они будут меньше оригинальных фотографий, в большинстве же случаев, на экране пользователей они будут больше, поскольку PPI мониторов у всех разный и преимущественно 100+ PPI.

wayup.in

Дюймы, пиксели, dpi. Что нужно знать при подборе изображений для печати?

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

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

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

Как не попасть впросак и подобрать иллюстрацию нужного качества?

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

Источник изображения depositphotos.com

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

Вот несколько простых советов, которые помогут вам сэкономить время и самостоятельно определить, подходит картинка для печати или нет.

Познакомимся с необходимыми терминами: размер, разрешение, формат.

Линейный размер фотографии — это физический размер напечатанной фотографии в миллиметрах: ширина и высота.
Пиксели — это точки, из которых состоит изображение. Чем больше в составе изображения пикселей, тем более мелкие детали можно разглядеть на нем.
Размер в пикселях — это ширина и высота в пикселях цифрового изображения.
Разрешение — это число, которое связывает между собой размер изображения в пикселях и линейные размеры отпечатка. Измеряется в количествах пикселей на дюйм (1 дюйм = 25,4 мм) — ppi (pixels per inch). Рекомендуемое разрешение для печати высококачественных изображений 300 ppi. Практика показывает, что минимально допустимое разрешение для печати — 150 ppi.

Сравните:

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

Даже самое современное оборудование не сможет качественно напечатать фотографию с низким разрешением.

Как самостоятельно определить разрешение?

Рассмотрим на конкретном примере. Вы готовите рекламный модуль для журнала размером 9*13 см, как обычная фотография. Необходимо хорошее качество 300 ppi, чтобы была видна каждая деталь изображения. Размер вашей картинки 1200×1500 пикселей.

Берем один из размеров — 1200 делим на 300 и умножаем на 2,54 см (количество сантиметров в дюйме) — получаем 1200/300*2,54 = 10,16 см. То же самое со вторым показателем 1500/300*2,54 = 12,7 см. Это значит, что максимальный размер на печати 10,16×12,7 см. Другими словами, в нужный размер вы попали и смело можете использовать выбранную картинку.

Если посчитать наоборот — 1200/9 (кол-во требуемых сантиметров, когда они вам известны) *2,54 = 338 dpi. Такое разрешение фактически будет, если печать ровно размером 9*13 см.

Вам в помощь приводим таблицу соотношения (соответствия) некоторых величин:

Форматы и размеры могут быть любыми, постоянной для печати должна быть одна величина — разрешение 300 ppi.

Желаем удачи в подготовке вашей корпоративной полиграфии.

ФорматЛинейные размеры для печати (в мм)Размер изображения в пикселях (для печати 300 ppi)
9x1389x1271051x1500
10x15102x1521205x1795
13x18127x1781500x2102
15x20152x2031795x2398
15x21152x2161795x2551
20x30203x3052398x3602

Форматы и размеры могут быть любыми, постоянной для печати должна быть одна величина – разрешение 300 ppi. Желаем удачи в подготовке вашей корпоративной полиграфии.

pechatnick.com

пиксели, DPI, PPI, сантиметры — вы ничего не путаете? / Habr

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



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

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

habr.com

Как устроены экраны устройств — Техника на 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 на экране, о котором мы только что говорили.

Этот квадрат будет иметь физический размер 1 * 1 дюйм. Но если экран пользователя имеет PPI = 72, ваш синий квадрат будет крупнее по своим физическим размерам. Так как PPI = 72, понадобится примерно полтора дюйма экранного пространства, чтобы отобразить квадрат со стороной в 109 пикселей. Посмотрите симуляцию этого эффекта ниже:

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

Разрешение экрана (и родное разреше

vc.ru

Почему плотность пикселей не так важна, как может показаться

Давным-давно я работал в сфере производства LCD-мониторов и телевизоров. И однажды участвовал в разговоре с инженерами из ведущих компаний, разрабатывающих схемы управления дисплеями. Они обвиняли всех нас, кто проектировал и создавал экраны, в «носодисплейной инженерии» («nose on glass engineering» — N.O.G.E.).

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

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

Вернёмся на семь лет назад, к моменту, когда был представлен iPhone 4 с Retina-дисплеем. Apple выбрала такое название, поскольку этот экран имел плотность 326 пикселей на дюйм, что соответствовало разрешающей способности человеческого глаза (retina — сетчатка).

Скорее всего, вы не нуждаетесь в более высокой плотности, поскольку не сможете заметить разницу.

Некоторые специалисты, включая доктора Рэя Сонейру (Ray Soneira) из компании DisplayMate Technologies, оспаривали это утверждение. Но даже критики согласились, что такой показатель подобрался очень близко к пределу, который имеет смысл для практического применения. 300 точек на дюйм — плотность фотографий в глянцевых журналах. И на их качество ещё никто не жаловался.

А теперь о настоящем. Максимальная плотность экрана в доступном на рынке смартфоне составляет 806 пикселей на дюйм. Речь идёт о Sony Xperia Z5 Premium, 5,5-дюймовый дисплей которого вмещает полное 4K-изображение (2 160 на 3 840 пикселей). Есть несколько телефонов с разрешением около 1 440 на 2 960 точек и размерами экранов от 5,5 до 6 дюймов, плотность которых превышает 550 точек на дюйм.

Даже Apple, которая первой заверила нас, что 326 пикселей на дюйм будет предостаточно, увеличила этот показатель до 458 единиц в дисплее Super Retina для iPhone X.

Технический термин для этого всего — безумие.

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

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

На какие же параметры стоит обращать внимание?

Сегодня дисплеи больше не страдают от проблем вроде дисторсии и нарушений линейности изображения. Мы не сталкивались с ними с тех пор, как производители перестали использовать ЭЛТ-экраны более десяти лет назад. Так разве наши современные дисплеи не идеальны? Ответ — конечно же, нет. Я могу перечислить по меньшей мере три свойства дисплея, которые нуждаются в улучшениях гораздо больше, чем количество пикселей.

Качество изображения в условиях яркого света

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

Помимо яркости (которая расходует энергию), экран должен обеспечивать контрастность, достаточную для работы в условиях хорошего освещения. В характеристиках OLED-дисплеев обычно указывают показатель контрастности на уровне 100 000 : 1 или даже 1 000 000 : 1. Но это тоже чепуха. Такие цифры вы получаете лишь в абсолютно тёмном помещении между чёрным и белым цветами дисплея.

В реальных условиях работы контрастность снижается под действием окружающего света. И это проблема для современных дисплеев. Редкий экран способен обеспечить показатель, превышающий 50 : 1 в типичном помещении, а в более ярких условиях освещения это значение ещё ниже. Нам бы хотелось увидеть полноцветную отражающую технологию отображения, но пока ничего такого на рынке нет.

Точность цветопередачи

Следующее свойство, которое должно нас интересовать, — это точность цветопередачи. Но не путайте его с показателями цветовой палитры. Значение последней определяет спектр цветов, которые способен отображать дисплей. Дисплеи OLED, а теперь и QLED навязывают широкую палитру цветов, но они не обеспечивают высокую точность цветопередачи.

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

Вместо этого, нам нужны экраны, которые точно передают цвета из палитры создателя контента (sRGB или Rec. 709). Точность передачи выражается метрикой ΔE*, которая показывает разницу между двумя цветами. Если её значение достигает 1, погрешность становится заметной. Покажите мне параметр дисплея, который гарантирует низкую разницу в расчёте ΔE* по итогам нескольких тестов, и тогда у нас будет хоть что-то.

Воспроизведение тона

Точность цветопередачи и общее качество изображения во многом зависят от воспроизведения тона — свойства, более известного как правильная гамма. Большинство ошибок в отображении цветов на LCD- и OLED-дисплеях связаны с неправильным воспроизведением тона в рамках трёх основных цветов.

Заключение

Хватит считать пиксели. Вместо этого, давайте требовать улучшения тех характеристик, которые действительно могут повысить качество картинки. Есть ещё много способов сделать хороший экран, помимо того, чтобы просто мериться количеством точек.

lifehacker.ru

Важна ли высокая плотность пикселей на дисплее смартфона?

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

Xiaomi Mi Mix 2

Плотность пикселей – почему это не так важно!

Значение PPI определяет количество пикселей на один дюйм экрана устройства. Более высокие значения делают картинку более четкой, читаемой и качественной.

Значение PPI определяет количество пикселей на один дюйм экрана устройства

Как PPI влияет на качество изображения

Когда Apple представила миру iPhone 4, в нем использовался революционный на тот момент дисплей «Retina», качество изображения на котором могло сравниться с качеством картинки в глянцевых журналах (300 DPI). Тогда компания наглядно показала всему миру, что высокие разрешения на экране смартфона не какая-то сказка, я самая настоящая реальность.

На данный момент, самое высокое значение DPI (dots per inch – количество точек на дюйм) у дисплея смартфона Sony Xperia Z5 Premium. Его 5,5-дюймовый экран имеет поддержку 4К разрешения (2160 х 3840) и плотность пикселей 806 PPI.

Среди смартфонов Xiaomi, хорошее разрешение можно найти у Mi Mix (1080×2040 пикселей), Mi Mix 2 (1080×2160 Full HD+) и Mi Note Pro (2560×1440 Quad HD).

Первые исследования и текущая реальность

Если раньше Apple заявляла, что 326 PPI будет достаточно и более высокие разрешения на маленьком дисплее портативного устройства станут попросту невостребованными. То теперь, глядя на дисплей нового iPhone X, с его 458 PPI, становится ясно, что Apple решила больше не следовать этой философии.

Будем откровенны. Среднестатистический пользователь невооружённым взглядом заметит разницу между 300 и 500 PPI в том случае, если будет держать экран своего телефона на расстоянии вытянутой ладони от своих глаз.

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

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

Несмотря на это, приведём некоторые значимые аргументы, в пользу экранов с высоким PPI.

Преимущества дисплеев с высоким PPI

На дисплеях Full HD+, Quad-HD и 4K намного приятнее читать текст. Такой дисплей выдает более высокий уровень яркости, качественный контраст и более глубокая цветопередача.

Высокое разрешение позволяет использовать более широкий цветовой диапазон. Гамма при этом выглядит более естественной.

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

Игровой обзор Mi Mix 2

Смартфоны Xiaomi (Сяоми) с поддержкой FullHD:

  • Mi Note 3
  • Mi A1
  • Mi Max 2
  • Mi Max
  • Mi 6
  • Mi 5 / 5s / 5s Plus / 5c
  • Mi 4 / 4s / 4c / 4i
  • Mi 3
  • Redmi Note 4 / 4x
  • Redmi 4 Prime
  • Redmi Note 3 / Note 2
  • Redmi Pro
  • Mi Note

Вывод

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


Warning: A non-numeric value encountered in /home/xiaomi7/xiaomishka.ru/www/wp-content/themes/publisher/includes/func-review-rating.php on line 212

Warning: A non-numeric value encountered in /home/xiaomi7/xiaomishka.ru/www/wp-content/themes/publisher/includes/func-review-rating.php on line 213

xiaomishka.ru

300dpi – мифы и реальность. Сколько же нужно на самом деле?

Сегодня расставим точки над «i» и разберемся в этом очень хитром вопросе.

Часто встречающиеся вопросы на эту тему: меньше или больше dpi? Чем больше – тем лучше качество фотографии? И как это связано с размером самой фотографии?
Все чаще и чаще встречается заблуждение о «качестве» снимков и требуемых 300dpi.

Для начала определим, что такое dpi… Dpi – это параметр, указывающий на разрешение изображения на дюйм при его печати. И тут внимательный читатель задумается. Да-да, именно при печати. И пока вы не печатаете изображение, а просто смотрите на мониторе, обрабатываете в фотошопе  – dpi вообще не имеет никакого значения. Оно не влияет ни на качество, ни на то, какого размера вы будете распечатывать фотографию (10*15 или А4) и вообще ни на что не влияет. Единственный важный параметр пока у вас фото в цифровом виде – это размер в пикселях. И всё! Такова суровая реальность.

Давайте разберемся по порядку:

1. Что если меньше или больше 300?
Да можно сколько угодно. Пока не печатаете, то никакой разницы, хоть 1dpi, хоть 1000dpi.

2. А как же качество? Ведь при 300 все хорошо будет, так везде в интернетах пишут и вообще это у всех на слуху. Значит, что если значение меньше, то качество хуже?
Как я уже написал выше – качество никак не связано с параметром dpi. Точка. Смиритесь с этим.

3. Ну а если я собираюсь напечатать фотографию? Тогда этот параметр уже важен и тут чем больше – тем лучше?
Не совсем. Этот параметр указывает, сколько точек (читай: пикселей) будет напечатано на дюйм изображения. При этом значение dpi можно поставить любое. Например, есть фото размером 4000*6000 пикселей. При 300dpi его можно напечатать размером 34 см * 51 см (округлил десятые). Но при этом можно напечатать и с другим значением dpi. При 150dpi – это будет 67,7 см * 101,6 см.

4.  А какое значение тогда ставить?
Это уже зависит от того, куда идет печать. Если в глянцевый журнал, то 300dpi вполне подходит. Для дома в семейный альбом – 100-300dpi (примерно). А для для огромного билборда вообще хватит 20-70dpi.
Но повторюсь еще раз – размер в пикселях важнее, если речь идет о качестве! Представьте, что у вас на компьютере есть 2 фото: Одно размером 600*800 пикселей с 600dpi. И второе 2000*3000 пикселей с 70dpi. Какое из них можно напечатать больше и качественней? Казалось бы, первый, у него целых 600dpi - круто, значит его! Но нет, физический размер в пикселях больше у второго файла, не смотря на жалкие 70dpi. Сам параметр dpi, пока он в цифровом файле, ничего не значит. При печати этих двух файлов уже можно выбрать требуемое значение dpi. Мы его усредним до адекватного значения 250 (тут можно было любую цифру взять) и получим физический отпечаток первого файла 6,1 см * 8,1 см, а второй  20,3 см * 30,5 см. Как видите, у кого размер в пикселях больше – у того физический размер при печати больше.

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


На этом фото открыты 2 фотографии в фотошопе. У фотографии слева 900dpi. У фото справа 1 dpi. Как видите, физически они выглядят абсолютно одинаково.

Если вдруг вам попался человек, который называет себя профессионалом и требует от вас какие-то нелепые 300 dpi, сам не понимая, что они значат – это неуч с которым не стоит работать. Не может человек быть профессионалом, если ему нужны какие-то параметры, в которых он сам ничего не понимает. Лучше отказаться от услуг такого человека. Будь-то ретушер, фотограф, иллюстратор или еще кто-либо.

А теперь немного лирики. Я уже давно собирался написать эту статью, но все откладывал. А последнее время всё чаще и чаще объясняю людям, что dpi при цифровом виде фотографии ничего не значит. Накипело.

Из реальных случаев:
1 – Пишет мне заказчик. Изначально был скан фотографии. А на выходе нужно, цитирую: «Нужно качество около 600dpi, т.е. цифровое фото, а не редактированнный скан..».
2 – В одном паблике ретушеров зашел разговор о том, сколько выставлять dpi при ретуши…  И вот цитата одного ретушера: «Меня как-то хотели заставить переделывать, потому что стояло 240.».
3 – Нам нужна фотосессия, 10 фото на выходе с 300dpi.

Я надеюсь, вы тоже оценили абсурдность этих случаев... и это только за последнюю неделю.

На этом откланиваюсь. Всем мир!

Группа вк: vk.com/sergretouch
Сайт: www.sergretouch.ru
Биханс: www.behance.net/sergretouch
Инстаграм: http://instagram.com/sergey_brezhnev
Ютуб: http://www.youtube.com/user/sergbrezhnev

sergbrezhnev.livejournal.com

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

Привет, 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 имел разрешение 512x342 пикселя, то к 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 В некоторых абзацах, описывающих точные данные, источники были переведены без изменений.

habr.com

Что такое PPI в телефоне?

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

PPI (от англ. pixels per inch — пикселей на дюйм) — единица измерения разрешающей способности экрана. Измеряется в количестве пикселей, которые приходятся на один дюйм поверхности экрана. Для примера возьмем разрешение 254 PPI. Это означает, что в одном дюйме поверхности (2,54 см) содержится 254 точки. Соответственно, каждый пиксель изображения в таком случае равен 0,1×0,1 мм.

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

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

PPI увеличивается вместе с разрешением экрана. Так, например, PPI для 5-дюймового экрана смартфона с разрешением 1280х720 точек равен 294, а при разрешении 1920х1080 точек эта цифра увеличивается до PPI 441. Согласитесь, разница велика. Но при этом нужно помнить, что высокое разрешение может негативной сказываться на автономности работы устройства.

Вот пример изображения с экрана iPhone, где в левой части мы видим значительно меньшее число PPI, а в правой, соответственно, большее:

Как можете заменить, разница видна невооруженным глазом.

androidnik.ru

Что такое dpi? 300 dpi – это много?

Это не много и не мало

 

Почти все понимают DPI неправильно. Но мы-то попробуем разобраться?

 

DPI (dots per inch) используется для физических объектов – экранов, печатных машин, сканеров. Аналогичный ему PPI (pixels per inch) используют для файлов. Правильно говорить PPI (электронная точка – pixel, а физическая – dot), но почти все говорят DPI – сделаем так же.

 

Что означает фраза «Эта фотография большая – 300 dpi»? Да ничего. У фотографии нет дюймов – нет и DPI.

 

DPI – dots per inch – точки на дюйм

 

Это пропорция. Она помогает определить третье число, когда известны другие два. Чтобы появился смысл – нужны два числа.

 

Как ей пользоваться?

 

dpi = px*25.4/mm

 

px = dpi*mm/25.4

 

mm = px*25.4/dpi

 

(25.4 – это перевод дюймов в миллиметры)

Примеры:

 

1. Сколько точек должно быть в изображении, если его нужно напечатать размером 150х200 мм с разрешением 300 dpi?

Ответ:

px = 300 dpi * 150 mm / 25,4 = 1772 px

px = 300 dpi * 200 mm / 25,4 = 2362 px

Понадобится изображение размером 1772х2362 px

 

2. Какого максимального размера можно напечатать фотографию в идеальном качестве, если мы снимаем на iPhone 5 (3264х2448 точек)?

Ответ:

mm = 3264 px * 25.4 / 300 dpi = 276 мм

mm = 2448 px * 25.4 / 300 dpi = 207 мм

Фотку с айфона можно напечатать в идеале размером 276х207 мм, что почти А4

 

3. Какое разрешение у монитора в точках на дюйм, если мы знаем, что по ширине он 1440 точек, а линейка показала 28,5 см?

Ответ:

dpi = 1440 px * 25.4 / 285 mm = разрешение экрана 128 dpi

 

Растровое изображение состоит из точек, dpi на него не влияет

В растровом изображении (фотографии) есть только точки. Миллиметров и дюймов в нем нет. Это таблица n на m точек, каждая ячейка в которой закрашена своим цветом.

 

В файле для интернета не может быть разрешения в точках на дюйм, так как в интернете нет дюймов. Может быть только размер в точках.

 

Откуда берется DPI? Все просто. Растровые изображения хранятся в файлах. Форматы файлов кроме собственно изображения хранят что-то ещё. Например, дату и время съемки, модель камеры, диафрагму и т.п. Среди этого есть ячейка под dpi. Она не может быть пустой. Поэтому даже фотоаппарату приходится что-то туда ставить. Например, 150. Но это не значит, что фотоаппарат что-то этим имеет в виду.

 

Рассмотрим растровые форматы файлов: где место под dpi есть, где нет.

 

DPI нет в png, gif – это растровые форматы только для интернета. В интернете дюймов нет, dpi нет.

 

DPI есть в форматах, которые могут быть напечатаны:

  1. jpg – растровый формат для интернета, но для печати тоже используется
  2. tif – растровый формат для печати
  3. pdf – растрово-векторный формат для интернета или для печати
    (dpi применим к встроенным в него растровым изображениям)
  4. psd – растровый формат – рабочий файл программы Photosop

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

 

DPI – это рекомендация, какого размера и с каким разрешением файл планируют напечатать. Если печатать не планируют – это лишь цифра.

 

 

Откуда взялись цифры 300 dpi и 72 dpi?

 

1. 300 dpi – максимальное разрешение файла для печати

Офсетный растр состоит из точек – отсюда идет требование к макету 300 dpi

Самый качественный метод печати – офсет. На практике определили, что если повышать разрешение макета выше 300 dpi, качество отпечатка улучшаться не будет.

 

Другие методы печати – способны на меньшее. Для «цифры» пороговая величина – около 200 dpi и так далее. Но, чтобы не путаться, решили так – если листовая печать – 300 dpi.

 

В итоге 300 dpi – это требование типографии к размеру растрового файла в точках в пересчете на размер отпечатка. Требуют столько, т.к. больше смысла просить нет.

 

2. 72 dpi – «как бы» экранное разрешение

Apple Macintosh – родоначальник стандарта 72 dpi

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

 

Только когда мы что-то печатаем – можно говорить о DPI.

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

 

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

 

Требования к параметру DPI для разных методов печати:

 

  1. Офсетная и цифровая печать – 300 dpi
  2. Широкоформатная интерьерная печать – 150 dpi
  3. Широкоформатная экстерьерная печать – 100 dpi
  4. Широкоформатная экстерьерная печать больших размеров – 36-72 dpi
Иллюстрация того, что dpi – лишь цифра в файле и не влияет на картинку

Напоследок – эксперимент

 

1000 dpi – это много?

Если хочется сказать «да» – значит можно перечитать страницу с начала.

Открываем файл. Убираем галочку «масштабирование». Ставим dpi, какой заблагорассудится. Проверьте себя. Попробуйте 1 или 10000. А теперь сохраните файл. Он стал больше? Меньше? Неа. Он остался прежним – т.к. мы меняли только цифру, которая хранится в файле, а сам файл не изменился.

 

 

Итак, вопрос – «большое ли фото, если оно 300 dpi?», равнозначен вопросу – «успею ли я, если буду ехать со скоростью 80 км/час?..» Куда успеете то?

 

Дальше – о том, почему не стоит измерять качество фотографии в мегабайтах, ок?

www.dssign.ru

Какой размер в пикселях имеют листы формата А4, А3, A2, A1, A0 в зависимости от DPI?

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

 

Разрешение печати

Собственно, загвоздка заключается в том, что при печати у нас появляется новая переменная, с которой не знаком среднестатистический пользователь — разрешение печати. Лишь узкий специалист, занимающийся полиграфией, рекламой, фотопечатью и т.п., может без труда назвать минимально необходимое разрешение для создания физического изображения на огромный биллборд, небольшую визитку или футболку с принтом. Мы же в этом материале остановимся на распространенных примерах печати, с которыми каждый из нас может столкнуться в повседневной жизни (печать на листы формата А4, А3, A2, A1, A0), а также выведем простую формулу для расчета необходимого разрешения для любой поставленной задачи.

ПО ТЕМЕ: В чем разница между JPEG, GIF, PNG, RAW, BMP, TIFF и прочими графическими форматами?

 

Что такое DPI

Итак, разрешение печати измеряется в DPI (dots per inch), то есть, в количестве точек на квадратный дюйм (1 дюйм = 25,4 мм). Легче всего объяснить этот параметр на примере принципа работы такого устаревшего устройства, как матричный принтер — в данном случае DPI соответствует количеству ударов иголок с краской в область площадью 1 × 1 дюйм.

ПО ТЕМЕ: Как правильно фотографировать: 12 простых советов для тех, кто хочет улучшить качество своих фотографий.

 

Сколько нужно пикселей для качественной печати

Естественно, параметр DPI не имеет ровно никакого значения, пока изображение остается на вашем мониторе, зато критически важным показателем является разрешение исходного файла. Вы не сможете качественно распечатать фотографию на листе A4 с качеством 300 DPI, если исходное изображение на экране имеет разрешение 1024 × 768 пикселей.

Стандартные величины DPI используемые в печати

Разрешение 75 DPI — для текстовых документов;
Разрешение 150 DPI — минимальное качество для печати изображений;
Разрешение 300 DPI — общепринятое качество для печати фотографий.

ПО ТЕМЕ: Фотоскан от Google для iPhone, или как постить в Instagram старые бумажные фото без бликов.

 

Какой размер в пикселях имеют листы формата A5, А4, А3, A2, A1, A0 в зависимости от DPI?

Ниже можно найти соответствие значений разрешения исходного изображения и размеров листа бумаги, на который производится печать (данные рассчитаны для разрешения печати 75 DPI, 150 DPI и 300 DPI).

 

Размер формата A5 (148 × 210 мм) в пикселях

при DPI = 75, разрешение формата А5 имеет 437 × 620 пикселей;
при DPI = 150, разрешение формата А5 имеет 874 × 1240 пикселей;
при DPI = 300, разрешение формата А5 имеет 1748 × 2480 пикселей.

 

Размер формата A4 (210 × 297 мм) в пикселях

при DPI = 75, разрешение формата А4 имеет 620 × 877 пикселей;
при DPI = 150, разрешение формата А4 имеет 1240 × 1754 пикселей;
при DPI = 300, разрешение формата А4 имеет 2480 × 3508 пикселей.

 

Размер формата A3 (297 × 420 мм) в пикселях

при DPI = 75, разрешение формата А3 имеет 877 × 1240 пикселей;
при DPI = 150, разрешение формата А3 имеет 1754 × 2480 пикселей;
при DPI = 300, разрешение формата А3 имеет 3508 × 4961 пикселей.

 

Размер формата A2 (420 × 594 мм) в пикселях

при DPI = 75, разрешение формата А2 имеет 1240 × 1754 пикселей;
при DPI = 150, разрешение формата А2 имеет 2480 × 3508 пикселей;
при DPI = 300, разрешение формата А2 имеет 4961 × 7016 пикселей.

 

Размер формата A1 (594 × 841 мм) в пикселях

при DPI = 75, разрешение формата А1 имеет 1754 × 2483 пикселей;
при DPI = 150, разрешение формата А1 имеет 3508 × 4967 пикселей;
при DPI = 300, разрешение формата А1 имеет 7016 × 9933 пикселей.

 

Размер формата A0 (841 × 1189 мм) в пикселях

при DPI = 75, разрешение формата А0 имеет 2483 × 3511 пикселей;
при DPI = 150, разрешение формата А0 имеет 4967 × 7022 пикселей;
при DPI = 300, разрешение формата А0 имеет 9933 × 14043 пикселей.

ПО ТЕМЕ: Levitagram, или как на iPhone создавать фото с эффектом левитации (полета).

 

Как определяется количество пикселей соответствующее формату листа бумаги?

Как уже говорилось выше, достаточным качеством для переноса графики на бумагу принято считать разрешение печати 300 DPI. Чтобы распечатать фотографию или просто картинку в таком качестве на листе формата A4 (297 × 210 мм) необходимо иметь исходное изображение с разрешением 3508 × 2480 пикселей, если требования к качеству снизить вдвое до 150 DPI, то будет достаточно исходного разрешения 1754 × 1240 пикселей, а для печати текста достаточно 75 DPI и разрешения 877 × 620 пикселей.

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

R = L × DPI / 25,4

Где:

R — искомое разрешение стороны;
L — длина стороны в мм;
DPI — требуемое качество печати;
25,4 — перевод дюйма в сантиметры (1 дюйм примерно равен 2,54 см) и умножить на 10 для перевода в миллиметры.

Пример:

Необходимо распечатать снимок в качестве 150 DPI на лист A4 (297 × 210 мм). Получаем:

R (высота) = 297 × 150 / 25,4 = 1754 пикселей;
R (ширина) = 210 × 150 / 25,4 = 1240 пикселей.

Соответственно, исходное разрешение должно быть 1754 × 1240 пикселей, что совпадает с данными приведенной выше таблицы.

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

yablyk.com


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



© 2010- GutenBlog.ru Карта сайта, XML.