Предисловие
Идея о том, чтобы сделать статью про размерности, используемые в веб-дизайне, появилась давно и на неё возлагалось несколько задач: во-первых, привести в порядок свои собственные мысли, во-вторых, иметь место, куда «вместо тысячи слов» можно легко сослаться, а в-третьих, по порядку, но не по важности, помочь коллегам и другим любопытствующим поставить некоторые свои точки над i.
Позиционирование элементов на странице сайта — одно из важных умений верстальщика, которое собственно и должно в итоге привести к соответствию ожидаемого и наблюдаемого. На ниве использования различных методов при верстке макетов сломано немало копий, и читая в одном из блогов пост про «только пиксели, только хардкор», решил поделиться некоторыми рассуждениями на этот счет. Материала накопилось много, статья долго лежала в черновиках, поэтому в одну часть поместить всё не удалось. Прежде чем перейти непосредственно к единицам измерения, давайте разберемся, а что же является нашей системой координат.
DPI и PPI

8 бит × 3 (RGB)
Статье в Ководстве про разрешение картинок уже исполнилось 14 лет, но путаница присутствует до сих пор. Экранную графику наделяют печатными характеристиками качества и уповают на значение в 300 dpi, хотя ситуация выглядит простой и понятной, если придерживаться трёх правил.
#1
Правило №1: Видеосистема ничего не знает о дюймах, сантиметрах и процентах, а оперирует только пикселями.
Любой графический объект (картинка или текст) выводится на экран монитора последовательно, пиксель за пикселем. Картинке без разницы какое разрешение у нее в свойствах: 72, 96 или 300, она отображается на экране объектом с заданной в пикселях длиной и шириной. В качестве опыта нарисуйте в Фотошопе прямоугольник 150×100 пикселей, сохраните его в 3-х JPEG-файлах с разными значениями dpi, а потом откройте в браузере — разницы вы не увидите. Значение dpi можно изменить как при сохранении файлов через редактор, так и вручную в просмотрщиках. Некоторые растровые графические файлы, например PNG (через «save as...») или GIF, сохраняются вообще без указания dpi.



Указанное в свойствах картинки разрешение dpi учитывается только при печати изображения. Причем, если печатать напрямую из браузера, а не через редактор, то графика будет напечатана с разрешением 96 dpi в Windows или 72 dpi в Mac, поскольку ради сохранения пропорций на отпечатанной странице, браузер переводит условные дюймы pp(i) шрифтов в dpi отпечатка, но об этом ниже.
#2
Правило №2: Термины dpi и ppi служат разным целям и их не следует путать.
У растровой картинки нет разрешения, а есть размеры в пикселях по длине и ширине или в (гига)мегапикселях площади. Разрешение или разрешающая способность применима только для устройств ввода-вывода. Её выражают в количестве различимых единиц на дюйм длины: для печатающих устройств — это точки-на-дюйм (dots-per-inches, dpi), а для экранов используется термин пиксели-на-дюйм (pixels-per-inches, ppi)
http://dpi.lv/
Здесь можно помериться своим ppi, хотя авторы сайта некорректно называют его dpi.
У ранних мониторов CGA и EGA пиксели имели прямоугольную форму (PAR, pixel aspect ratio — 1:1.2, 1:2.4), сегодня пиксели квадратные, ppi по горизонтали и по вертикали совпадают и для упрощения расчетов разрешение указывается на квадратный дюйм. Устоявшиеся словосочетания вроде «разрешение 800×600» (калька с английского resolution) некорректны, поскольку одинаковые размеры матрицы при разной диагонали экрана дают разный ppi (в случае с 800×600 — 125 ppi при 8-и дюймовом, 71 ppi при 14-ти дюймовом экране), правильнее называть их «режимами монитора» (display modes).

#3
Чем выше значение ppi, тем меньше размеры экранного пикселя и тем меньше «пикселизация» изображения. Минимальной различимой единицей экрана считается dot pitch (зерно экрана) — расстояние между субпикселями одного цвета, или, по-другому, размер триады пикселей RGB. В вопросах погони за высокими значениями ppi полезно помнить о том, насколько объективно использование таких величин в контексте человеческого глаза.
Острота зрения измеряется в угловых минутах (1/60 градуса) и определяется в России при помощи таблицы Сивцева (самая популярная) или таблицы Головина. Штрихи букв в таблице Сивцева имеют одинаковую постоянную толщину, а очко литеры квадратной формы со стороной в 5 штрихов. Таким образом, достоверно различаемые штрихи букв на определенной строке таблицы отражают разрешающую способность глаза, указанную для данного кегля. Считается, что при нормальном зрении («единичка»), человеческий глаз способен различать расстояние между двумя точками в 1 угловую минуту (α = 1’). Весьма редко, но встречаются люди, зрительная возможность которых лежит в рамках 0.4 — 0.5 угловой минуты.

X = 2 × D × tg(α/2) |
ppi = 25.4 мм / X |
—————————— |
D |
X |
ppi |
5000 мм (референс) |
1.45 мм (толщина штриха) |
17.5 |
2000 мм |
0.58 мм |
44 |
800 мм |
0.232 мм |
109 |
400 мм |
0.116 мм |
219 |
100 мм |
0.029 мм |
875 |
В офтальмологических кабинетах зрение проверяется на расстоянии в 5 метров, это референсный показатель для нормального зрения, при котором различаются штрихи букв десятой строки таблицы (V = 1,0). Для комфортного просмотра ТВ (значение D в 2 метра) достаточно LED или LCD панели с разрешением в 50 ppi, поэтому FullHD на диагонали 45-50 см выглядит весьма привлекательно и не требует улучшения. При работе за компьютером (расстояние от монитора около 80 см) экран с характеристиками свыше 120 ppi может пригодится лишь в случае профессиональных или специфических нужд.
С комфортным чтением печатной продукции на расстоянии в 30-40 см вполне управляется существующее полиграфическое качество в 300 dpi. Минимальное расстояние, на котором способен фокусироваться глаз взрослого человека — 10 см, в этом случае максимальная разрешающая способность человеческого глаза заканчивается на величине в 875 ppi, что по сути является пределом, но на таком расстоянии никто не читает и не пользуется телефонами.
#4
Таким образом, отображение картинки зависит только от характеристик самого монитора, выражаемых значением ppi. Почему же Фотошоп все равно услужливо предлагает нам сохранить JPEG-файлы в разрешении 72 dpi для Web? Делает он это, помятуя о «преданиях старины глубокой».

9’’ монохром
512 × 342 пикселя
72 ppi
В списке достоинств Apple Mac образца 1984 года был широкий ассортимент гарнитур шрифтов, растеризированных с печатных глифов, что по сравнению с существовавшими тогда моноширинными знакоместами MS-DOS (80×25 штук) выглядело действительно круто. Это стало возможно благодаря механизму перевода типографских пунктов в пиксели экрана. Дюймов на экране монитора нет, это объект реального мира (на бумаге), на мониторе есть только пиксели. Чтобы перевести размерность типографских пунктов шрифтов из дюймов в экранные пиксели (технический термин процесса — ppem, pixels-per-em) был использован «условный дюйм», выраженный в количестве экранных пикселей, которые мы фиктивно представляем как 72 пункта или как один дюйм — pp(i).
Правило №3. Экранный ppi как мера пиксельной плотности и условный pp(i) как шкала перевода пунктов в пиксели не совпадают.
Первоначальное значение условного дюйма в 72 pp(i) для ранних макинтошей было оправданным: размеры матрицы монитора делали его близким к физическому дюйму, а эппловский ImageWriter принтер имел ровно вдвое бо́льшую разрешающую способность в 144 dpi. Таким образом, 1 пиксель на экране составлял (примерно) один типографский пункт, 72 пикселя условного дюйма легко переводились в 1 дюйм физический на принтере, а текст, набранный 12-ю пикселями на экране Macintosh давал ци́церо при печати. Но при этом имелись недостатки:
- 10-и пунктовый шрифт стандартной офисной печатной машинки смотрелся плохо на экране в 10-и пиксельном исполнении, особенно в кегле строчных букв (x-height, 5 пикселей);
- Расстояние, необходимое для чтения с экрана на 33% больше расстояния для чтения с бумаги, что усугубляло некомфортное отображение шрифтов;
#5
Товарищи из лагеря Windows пошли «другим путем», чтобы исправить недочеты конкурентов и приняли в качестве условного дюйма для своего программного обеспечения 96 пикселей, что на ту самую треть превышало pp(i) у Mac. На многие годы это решение внесло сумятицу в стан пользователей. С одной стороны пикселей на каждый пункт бралось больше и аналогичные шрифты на одном и том же мониторе выглядели в Windows крупнее, чем у Mac и улучшали читаемость. Но при этом уменьшилось количество доступных пикселей для графики и остальных объектов. Кроме того, было нарушено близкое к 1:1 соответствие экранного (пикселей на экране) и печатного (точек на бумаге) пунктов, что на корню сгубило WYSIWYG-идеологию (к которой, кстати, так больше и не вернулись).

72 и 96 сохранились на платформах в качестве параметров по умолчанию, поэтому картинки на странице отображаются своими реальными размерами в пикселях, а текст в зависимости от pp(i) системы, на которой мы работаем. На разных мониторах шрифты выглядят по-разному и эта разница становится все более и более существенной. И Microsoft и Apple предлагают собственные решения, чтобы улучшить отображение экранной графики и шрифтов.
#6
Так, после появления видеоадаптеров IBM 8514 в Windows ввели дополнительный режим 120 pp(i), который был доступен при выборе опции «Large Font 125%» — при этом увеличиваются шрифты и UI-элементы интерфейса (иконки, кнопки, поля ввода). На современных системах pp(i) можно изменить в разделе «Персонализация»: четыре автоматических режима (100%, 125%, 150% и 200% — 96 pp(i), 120 pp(i), 144 pp(i) и 192 pp(i) соответственно) плюс можно использовать линейку для ручной настройки. При этом Microsoft отмечает, что работает со сторонними разработчиками и не гарантирует качество отображения в не-«dpi-aware» (термин спецификации) приложениях при изменении pp(i) в настройках системы.
Настройка pp(i) в Windows и соотношения пикселей картинки и экрана в OS X (
источник)
#7
Кроме того, страницы можно масштабировать непосредственно в браузере: фиктивно изменяем ppi экрана, либо pp(i) если выставлена опция «только для текста». При этом векторные изображения также масштабируются, а растр претерпевает бикубическую интерполяцию. Здесь вендорные характеристики браузера накладывают отпечаток на качество и соответствие масштабированной страницы и окон.
В итоге мы имеем на сегодня, что указание значения 72 dpi, равно как и любого другого, для экранной графики — явный анахронизм, dpi не используется при отображении на экране ни в каком виде, эти значения стоит вообще исключить. Применение термина «разрешение картинки» может пригодиться как информация о «емкости качества печати», которой следует пользоваться лишь вкупе с размерами картинки.
Продолжение следует.