Особенности разработки форм для разных экранных разрешений. Высокие значения DPI в ОС Windows Разрешение изображения менее 96 точек на дюйм

Глава первая. 96 точек на дюйм.

Мне тут недавно сообщили применительно к готовым цифровым изображениям, сделанным в Фотошопе, что «…вообще стандарт картинок для экрана - это 72 точки на дюйм и никак иначе! По-другому просто не делается…» и что «…это признанный стандарт, в котором работают все, кто связан с WEB’ом, а точнее, с экранной графикой».

Я был слегка озадачен, и подумал тогда - причём тут вообще разрешение картинки, если на экране монитора она всё равно отображается точка в точку (если, разумеется, не масштабировать её насильно). Какое ни укажи разрешение в Фотошопе, программами отображения оно игнорируется, и картинка будет отображаться только исходя из своих точечных размеров! Другое дело - в специальных программах вёрстки это разрешение учитывается, но мы-то говорим об экранной графике!

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

Для начала, я проверил современные ЖК-мониторы. Вооружившись линейкой, я произвёл вычисления, и оказалось, что величина их разрешения никак не 72 точки на дюйм, а очень даже 96 точек на дюйм! Самые распространённые сегодня 17-дюймовые ЖК мониторы ближе всех подошли к этой цифре - их разрешение 96,4 точки на дюйм. Ниже всех разрешение оказалось у 19-дюймового ЖК-монитора - 86,3 точки на дюйм, но и то эта цифра была ближе к 96, чем к 72!

Что касается ЭЛТ-мониторов, то в них, как известно, разрешение можно выставить любое из некоторого набора. Первый квадратный пиксель появился на VGA-мониторах (раньше они были вытянутые, и разрешение по ширине не совпадало с разрешением по высоте). На первых 14-дюймовых VGA-мониторах наиболее комфортное разрешение было 800х600 точек, что при фактической диагонали 13 дюймов давало около 77 точек на дюйм. Но эти мониторы ушли в далёкое прошлое, и уже на 15-дюймовых мониторах с фактической диагональю 14 дюймов стало стандартом де-факто 1024х768 точек, что давало уже 91,4 точки на дюйм. Для 17-дюймовых мониторов с фактической диагональю 16 дюймов самое удобное разрешение оказалось 1152х864, что даёт цифру 90 точек на дюйм. С более крупными диагоналями ситуация примерно такая же.

Таким образом, разрешения любых современных мониторов не имеют ничего общего с параметром 72 точки на дюйм, но их разрешение близко к 96 точкам на дюйм.

Для проверки разрешений мониторов можно воспользоваться вот этим калькулятором:
http://novikovmaxim.narod.ru/calc.htm

Затем, после изучения разрешений мониторов, я занялся исследованием Фотошопа. Выяснилось, что если сохранять изображения специальной функцией «Сохранить для Веб…», то информация о разрешении в файл вообще не сохраняется, и в свойствах полученных файлов картинок мы можем увидеть запись о 96 точках на дюйм вне зависимости от того, какое разрешение в Фотошопе было установлено для картинки при разработке - это происходит потому, что сама операционная система подставляет в качестве значения этого незаполненного свойства наиболее вероятное для себя экранное разрешение - 96 точек на дюйм. Замечу, что Фотошоп при открытии таких файлов тупо подставляет в это незаполненное свойство 72 точки на дюйм. Из дальнейшего повествования вы узнаете, откуда у Фотошопа такая паталогическая любовь к этой цифре.

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

Тогда у меня возник следующий вопрос: может быть, величина разрешения важна во время создания изображения? Поэкспериментировав с Фотошопом, я выяснил, что от текущего разрешения зависит только пиксельный размер Фотошоповского шрифта, задаваемый в пунктах. Причём для веб-страницы, визуальное равенство одних и тех же размеров шрифтов на картинке и в тексте возможно только при установленном в Фотошопе разрешении 96 точек на дюйм. То есть, если веб-страница содержит текст размером 10 пунктов, то чтобы на той же странице Фотошоповский 10-пунктовый шрифт на картинке выглядел также, необходимо установить при создании этой картинки разрешение именно 96 точек на дюйм. Это логично - ведь все программы масштабируют текст, исходя из предполагаемого разрешения монитора 96 точек на дюйм, а значит и мы в Фотошопе должны исходить из того же значения.

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

Глава вторая. 72 точки на дюйм

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

Впоследствии, чтобы сэкономить на размерах Макинтошевских мониторов, разработчики решили увеличить их разрешение до разрешения мониторов PC (96 точек на дюйм). В результате, зрительные размеры шрифтов уменьшились (поэтому, например, при просмотре веб-страниц на Макинтоше, все шрифты, размер которых указан в пунктах, выглядят в 1,33 раза мельче, чем на PC, где размеры пункта изначально были в 1,33 раза больше размеров точки, а не равны ей). Фактически, у Макинтоша сложилась ситуация, когда наряду с фактическим (физическим) разрешением 96 точек на дюйм у него появилось «логическое» разрешение 72 точки на дюйм. То есть Макинтош как бы просит считать разрешение его монитора 72-точечным, а диагональ соответственно в 1,33 раза большей, чем на самом деле. Поэтому разрешение в 72 точки в Фотошопе актуально на Макинтоше и сейчас. Парадокс - разработчики Эппл с самого начала старались приблизить экран к бумаге, а в итоге получилось всё с точностью до наоборот.

Что касается Фотошопа, то он был изначально написан для Макинтошей, и лишь потом был переведён на PC, но значение 72 так и не посчитали нужным изменить на 96, хотя это было бы определённо разумным решением. Вот эта-то настройка по умолчанию и сбивает многих дизайнеров, считающих её истиной в последней инстанции под давлением авторитета Фотошопа. А последний всего лишь наивно предполагает, что запущен на Макинтоше…

Ну и напоследок, чтобы развеять все сомнения, давайте посмотрим наглядно зависимость размера Фотошоповского шрифта от установленного разрешения картинки:

Текстовый Arial, 10 пунктов, на Макентоше равен размеру шрифта первой строки, а на PC - второй строки следующего рисунка:

Замечу, что если вы смотрите этот текст через Internet Explorer 7 с включённой в нём по умолчанию опцией ClearType или через браузер Safari 3, то они несколько сглаживают шрифты, что заметно при сравнении шрифта строки примера со шрифтом строк на рисунке, Выполненном в Фотошопе. Для чистоты эксперимента советую посмотреть этот текст через браузеры Opera 9, Firefox 2 или Netscape Navigator 9, не вносящих искажения в шрифт. Если вы используете ЖК-монитор, и всё ещё видите разницу, то отключите в Windows функцию ClearType сглаживания экранных шрифтов (свойства экрана).

1. Если вы создаёте веб-графику, то при разработке изображений используйте разрешение 96 точек на дюйм, чтобы лучше ориентироваться в размерах применяемых вами шрифтов - ведь большинство ваших клиентов видят ваши сайты через PC.
2. Если вы создаёте графику для полиграфии, то используйте то разрешение, которое требует от вас технолог типографии (для разного оборудования и разных целей это будут разные разрешения).
3. Если вы создаёте веб-графику, ориентируясь исключительно на пользователей Макинтошей, то используйте разрешение 72 точки на дюйм, чтобы лучше ориентироваться в размерах применяемых вами шрифтов.

• Перевод

Windows, начиная с Vista, предоставляет два механизма для адаптации приложений к мониторам с высокой плотностью пикселей (точек на дюйм, DPI): увеличенные системные шрифты и полномасштабное увеличение окон. К сожалению, попытка заставить некоторые ваши приложения работать в каком либо из режимов может оказаться безуспешной, благодаря сочетанию нерадивых разработчиков и плохих решений принятых Microsoft.

Эта страница предназначена для того, чтобы помочь пользователям понять и исправить, возможные проблемы при настройке высоких значений DPI. Пожалуйста, обратите внимание что мы рассмотрим только традиционные приложения Windows, не Windows Store («Metro», «Modern UI») приложения. Последние используют новый API WinRT, который обеспечивает собственный механизм масштабирования.

От переводчика

В этой статье применяются следующие сокращения которые я счел переводить не целесообразно: Графический Интерфейс Пользователя (GUI), Точек На Дюйм (DPI), DPI-Aware приложения – приложения которые умеют при различных значениях DPI правильно, без искажений отображать свой GUI, Графический Интерфейс Устройства (GDI). Мои комментарии (выделены курсивом) .

Методы масштабирования

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

• Функции Графического Интерфейса Устройства (GDI) для доступа к дисплею. Как правило, GDI координаты измеряются непосредственно в пикселях экрана независимо от размера монитора и плотности пикселей.
• И вывод текста используя системные шрифты Windows. Это не является обязательным, но большинство приложений использует системные шрифты для большей части их графического интерфейса пользователя (GUI).

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

Чтобы исправить ситуацию, Microsoft решила, что неплохо встроить какой-нибудь метод масштабирование в Windows. Один из двух методов описанных ниже (Windows XP или Vista), применяется когда пользователь устанавливает DPI со значением выше чем стандартные 96 точек на дюйм. Оба метода пытаются увеличить размер элементов изображения.

Масштабирование в стиле Windows XP

Первый из этих методов, как можно догадаться, появился в Windows XP. Этот метод, на самом деле, не является методом масштабирования приложений с графическим интерфейсом как таковой. Масштабируются, при более высоких настройках DPI, только системные шрифты и некоторые элементы пользовательского интерфейса системы (я бы назвал его «метод НЕ масштабирования» в стиле Windows XP) .

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

Масштабирование в стиле Windows Vista или DPI виртуализация

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

Разница в том, что приложения, которые могут правильно использовать высокие значения DPI, должны сообщить об этом Windows. Такие приложения должны установить новый DPI-Aware флаг, либо путем вызова функции Win32 API «SetProcessDPIAware», или, предпочтительно, путем встраивания манифеста с флагом dpiAware. А вот если у приложения отсутствует DPI-Aware флаг, Windows ведет себя по другому, сначала она формирует внутреннее отображение в масштабе 96 точек на дюйм (эмулируя для приложения DPI равный 96) , а затем, масштабирует полученное изображение в соответствие с текущими настройками DPI перед выводом на экран.

Это было бы фантастическим метод масштабирования если бы все наши мониторы имели плотность пикселей последних аппаратов iPhones (326 точек на дюйм). К сожалению это не так. Окна приложений масштабированные таким образом выглядят чересчур размыто, при популярном разрешении 120 точек на дюйм (@homm это не разрешение, кстати). Поэтому, Microsoft по умолчанию отключает DPI виртуализацию, если вы выберете плотность пикселей меньше или равную 120 DPI.

Как изменить установки DPI

В Windows 7/8, откройте «Панель управления», a затем выберите «Оформление и персонализация», затем «Экран», и, наконец, выберите «Установить размер шрифта (DPI)» (Windows 7) или «Пользовательские параметры размера» (Windows 8). Вы увидите следующее диалоговое окно (Windows 7, в Windows 8 почти идентично):

В раскрывающимся списке можно выбрать нужную настройку DPI в процентном соотношении, где 100% соответствует 96 DPI, 125% - как на скриншоте, соответствует 120 точкам на дюйм (можно более точно записать значение вручную) . До Windows 8 фактическое значение DPI («пикселей на дюйм») отображалось рядом с размером системного шрифта. Windows 8, по непонятным причинам, не показывает значение DPI, так что вы должны рассчитать его самостоятельно.

Также вы можете приложить линейку (у которой есть шкала в дюймах) к экрану, и пытаться совместить маркировку на ней с маркировкой на экране, изменяя значение в раскрывающимся списке. Флажок, обведенный красным внизу, определяет, следует ли использовать только масштабирование в стиле Windows XP, или также новый способ DPI виртуализации. Если флажок не отмечен, как на скриншоте, то DPI виртуализация включена.

Декламация. Это диалоговое окно пример интерфейса не дружественного к пользователю. На первый взгляд кажется, что это флажок для отключения масштабирования в стиле Windows XP. Но этот метод масштабирования (который только увеличивает системные шрифты и другие элементы пользовательского интерфейса системы - масштабирование Windows XP) всегда включается при выборе высокого значения DPI. На самом деле этот флажок управляет, будет ли этот метод единственным (Использовать только масштабы в стиле Windows XP) , или также будет применен метод «DPI виртуализации» для приложений, которые не имеют DPI-Aware флага. Так что этот флажок не контролирует метод масштабирования указанный в его название, а контролирует другой метод масштабирования, нигде не упомянутый - и позволяет использовать новый метод, когда флажок снят!

Ошибка в Windows 8. В дополнение к этому, в Windows 8 это диалоговое окно с ошибкой. Как правило, все работает как и в Windows 7, но состояние флажка не сохраняется на значениях DPI 150% и выше. Когда вы устанавливаете этот флажок, «DPI виртуализация» правильно отключается. Тем не менее, сам флажок остается не отмеченным, когда вы в следующий раз открываете этот диалог.

Изменения в Windows 8.1, или почему все размыто?

В Windows 8.1 флажок для масштабирования в стиле Windows XP исчез, и теперь «DPI виртуализация» никогда, не используется при значениях DPI до 120 включительно, но всегда используется при более высоких значениях для тех программ, у которых отсутствует DPI-Aware флаг. Если некоторые приложения кажутся вам нечеткими, необходимо вручную отключить для них DPI виртуализацию.

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

Также Windows 8.1 добавляет специальный переключатель для настройки 200% и новый API, чтобы разработчики могли выборочно отключать «DPI виртуализацию».

Помогите, мои системные шрифты не правильного размера!

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

Если вы на самом деле создали пользовательскую тему рабочего стола и хотите сохранить её, вам придется самостоятельно адаптировать шрифты к новым настройкам DPI. Однако, Windows имеет раздражающую привычку «услужливо» создавать пользовательские темы без вашего ведома, по какой-либо причине. Так что, если вы никогда не создавали пользовательскую тему рабочего стола просто удалите её и вернитесь к стандартной теме.

В Windows 7/8, откройте Панель управления, выберите «Оформление и персонализация», а затем «Персонализация». Если вы видите выбранную запись в строке «Мои темы», это означает, что ОС Windows использует тему пользователя, системные шрифты которой Windows не будет масштабировать. Выберите стандартную тему, например, первую запись в разделе «Темы Aero» (Windows 7) или «Windows» «Темы по умолчанию» (Windows 8) и удалите нежелательные записи в разделе «Мои темы». Теперь, все системные шрифты должны отображаться правильно.

Типы приложений, как они масштабируются (или не масштабируются)

Теперь давайте рассмотрим какие методы должны использоваться для существующих Windows приложений при высоких значениях DPI. Следующая таблица обобщающая, позже мы рассмотрим различные случаи более подробно.

Приложения вообще не заботящиеся о DPI - это либо очень старые или плохо написанные, но, тем не менее, по-прежнему используемые. Одним известным примером является ITunes от Apple для Windows. Здесь разработчики используют системные шрифты для GUI и, не заботясь о фактических размерах шрифта, они жестко привязывают размеры окон к разрешению 96 DPI, естественно искажая GUI, когда при более высоких значениях DPI увеличиваются размеры шрифтов.

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

Пример приложения, работает только при DPI равном 96

Разрешение 150% (144 DPI)

Приложения умеющие подстраивать свой GUI под различные значения DPI, но не имеющие DPI-Aware флага - Это типичные приложения эпохи Windows XP. Здесь разработчики позаботились, чтобы получить фактические размеры шрифтов системы перед созданием GUI. Такие приложения отображаются корректно при использование масштабирования в стиле Windows XP. К сожалению, так как они не устанaвливают DPI-Aware флаг, чтобы сообщить Windows этот факт, для них, по умолчанию, будет использована «DPI виртуализация», делая их GUI нечетким. Это может вам не понравиться, так что, вы, возможно, захотите принудительно использовать стиль масштабирования Windows XP для таких приложений.

Пример такого приложения и разрешение 150% (144 DPI)

Приложения умеющие подстраивать свой GUI под различные значения DPI, имеющие DPI-Aware флаг - Это новейший тип приложений которые полностью беспроблемны, независимо от настроек DPI. DPI-Aware флаг установлен автоматически для Windows Presentation Foundation (WPF) и GDI+ приложений, так как эти APIs предоставляют встроенные средства масштабирования. Разработчикам использующим старый GDI API и (удивительно) Windows Forms, нужно вручную помечать свои DPI-Aware приложения.

Приложения не приспособленные к изменению DPI, но имеющие DPI-Aware флаг - это еще хуже чем полностью игнорирование значения DPI. В примерах вы найдете GUI приложений, хорошо масштабируемых вплоть до 120 DPI, но не выше, или приложений JavaFX . Тут мы уже ничего сделать не можем, т.к. у нас нет возможности заставить Windows использовать DPI виртуализацию, для таких программ. После того как DPI-Aware флаг установлен, приложение должно масштабировать себя самостоятельно. Мы можем только «пилить» разработчиков исправить их продукт - или использовать что-то другое.

Выбор метода масштабирования для ваших приложений

После того как вы решили что вы хотите использовать высокое значение DPI, ваш выбор метода масштабирования зависит от приложений в которых вы работаете. Имейте в виду, что, отключить «DPI виртуализацию» означает, установить флажок (check box) с некорректным названием «Использовать масштабы в стиле Windows XP» и наоборот.

• Если вам так невероятно повезло использовать только те приложения, которые являются одновременно DPI-Aware и устанавливают нужный флаг, тогда не имеет значения какой метод масштабирования вы выберете. Все приложения будут использовать масштабирование в стиле Windows XP, а DPI виртуализация никогда не будет использоваться.
• Если вы используете только хорошо написанные DPI-Aware приложения, но некоторые из них не устанавливают необходимый флаг, вы можете отключить «DPI виртуализацию». Таким образом, все приложения будут отображаться правильно без какого-либо замыливания вследствие масштабирования. Если ваш монитор имеет очень высокую плотность пикселей, такую, что масштабированные растровые изображения больше не выглядят размытыми, вы, возможно, захотите включить DPI виртуализацию в любом случае.
• Если у вас есть одно или несколько приложений не приспособленных к изменению DPI и не имеющие DPI-Aware флага, необходимо включить DPI виртуализацию, если вы не готовы мириться с перекошенным GUI приложений. К сожалению, тут возникает еще одна проблема, потому что, Microsoft реализовала эту опцию неудобно. Вы можете включить DPI виртуализацию только для всей системы, а не для отдельного приложения, а затем выборочно отключать для отдельных приложений.

Напоминаем, что в Windows 8.1 уже нет возможности выбора в этом вопросе. Если вы работаете при разрешении в 120 точек на дюйм (125%), каждая программа будет вынуждена использовать масштабирование в стиле Windows XP, a если вы работаете с более высоким разрешением, каждая программа, которая не является DPI-Aware, будет использовать по умолчанию «DPI виртуализацию».

Отказ от DPI виртуализации для отдельных приложений

После того как вы решили включить DPI виртуализацию или вы работаете в Windows 8.1, с разрешением более чем 120 точек на дюйм, вы можете проверить систему на предмет наличия DPI-Aware приложений, которые не имеют соответствующий флаг. И вернуть им возможность использовать масштабирование в стиле Windows XP, для которого они предназначены. Есть два способа сделать это, первый работает только для 32-разрядных приложений, второй универсален и подходит также для 64-битных приложений.

32-разрядные приложения - Это просто: щелкните правой кнопкой мыши на исполняемом файле в Проводнике Windows, выберите диалоговое окно «Свойства», перейдите на вкладку «Совместимость» и установите флажок «Отключить масштабирование изображения при высоком разрешении экрана». Вот и все, в Windows 8.1 это также работает для 64-битных приложений.

64-разрядные приложения - Без всякой видимой причины, возможно чтобы позлить пользователей 64-битных приложений, в Windows 8 и более ранних, упомянутый выше флажок, для 64-разрядных приложений отключен, хотя сам вариант вполне функционален, если внести изменения непосредственно реестр! Так что, запустите редактор реестра и перейдите к этому ключу:

HKEY_CURRENT_USER\Software\Microsoft\Windows NT\CurrentVersion\AppCompatFlags\Layers

Теперь добавьте строковое значение (REG_SZ), чье имя является полным путем к исполняемому файлу приложения и значением которого является HIGHDPIAWARE. Я рекомендую, чтобы вы сначала изменили несколько 32-битных приложений, как описано выше, чтобы вы могли увидеть некоторые примеры значений в этом ключе реестра.

Мы рассмотрели, как можно использовать настройки DPI на Windows Vista и более поздних версиях. И если вы когда-нибудь задумывались, для чего предназначена опция совместимости - «Отключить масштабирование изображения при высоком разрешении экрана». И почему она ничего не делает на вашей системе, теперь вы знаете: она эффективна, только если у вас включена общесистемная опция «DPI виртуализации» и только для приложений, которые не устанавливают DPI-Aware флаг должным образом, но при этом корректно используют масштабирование в стиле Windows XP.

Что такое пиксели и что такое DPI? September 20th, 2012

Вас пугают слова "пиксели" и "DPI" или вы не до конца понимаете их значение? Тогда несколько строчек ниже - для вас.

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

DPI это сокращение от английского "d ots p er i nch" и переводится как "точек на дюйм".

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

Что значить 72 DPI или 300 DPI и в чем разница?

72 DPI (или 96) - файлы для интернет, где одна точка на экране вашего монитора соответствует одному пикселю изображения. Еще называют - экранное разрешение изображения. Больше чем 72 DPI делать картинку для Интернет - нет смысла, так как монитор все равно больше не отобразит.

72 точки на дюйм = 28 точкам на сантиметр.

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

Бывает, фотографии на экране выглядят достойно, а печатаются нечёткими и расползаются на пиксели? Причина большинству известна - низкое разрешение. Но каждая напечатанная фотография стоит денежку! Давайте разберемся, как бороться с такой печалькой.

Не верьте глазам своим

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

Еще в свойствах фотографии всегда есть её размер в пикселях. Каждая 1000 пикселей - это примерно 8,5 см. Вот и прикидывайте, какой размер вам нужен для печати на выбранном формате бумаги. Для А4 например нужно 2500х3500 пикселей.
Удобства ради мы сделали для вас сравнительную таблицу размеров, пользуйтесь на здоровье:)

Когда вы фотографируете

Первое, что нужно найти в вашем фотоаппарате - настройку размера снимка. Чаще всего он по умолчанию самый маленький, как раз те самые 96 точек на дюйм. Даже на небольшую карту памяти таких кадров помещается ооочень много, вы можете полгода снимать лучшие моменты своей жизни и радоваться, какой ёмкий у вас фотоаппарат, но когда перекинете это всё на компьютер... Снимки в 96 точек годятся лишь для ВКонтакте, не более. Эти полгода могут быть просто потеряны. Как только вы вынули фотоаппарат из коробки, ищите настройку размера снимка. Я бы советовал ставить его на максимум, но сейчас бывают настолько крутые камеры, что максимум может быть вам и избыточным. Помните, каждые 1000 пикселей - это примерно 8,5 см на бумаге. Да, карта фотоаппарата будет быстро заполняться и её надо будет часто чистить, перекидывая фотки на комп. Но оно того стоит.

Когда вы ищите

В сети сегодня хранятся миллиарды фотографий и можно найти подходящую через поисковики. Но и здесь нужно следить за размером. Если вы просто наберете в поиске "котик", это будет армия самых разных по качеству котиков. И большинство этих котиков будут непригодны для печати. Дело в том, что администраторы сайтов очень ревниво относятся к свободному месту на серверах и все картинки для сайта сначала "упрощают". Помните, для сайта достаточно 96 точек. А чем слабее качество, тем меньше вес файла. Лучше я, администратор, поставлю не 4 котиков с разрешением 300 точек, а 12 котиков с разрешением 96 точек. Выглядеть они ведь будут одинаково, и занимать столько же места на сервере.

Когда вы ищете фото в поисковиках, пользуйтесь фильтрами. Например в Гугле при поиске картинок есть кнопка "Инструменты поиска". В раскрывающемся меню жмите на "Размер". Это очень удобный фильтр. Я выбираю обычно не меньше 2Мп. У любого поисковика есть подобные фильтры. Просто в Гугле мне он больше нравится.

Кроме поисковиков есть еще хорошие сайты фотографий СС. Нет, это не те СС, которые ХендеХох. СС - это Creative Commons, такой вид лицензии, который позволяет бесплатно скачивать и использовать (даже в коммерческих целях) фотографии. Но лучше автора фото всё же указывать:) Да, есть еще на свете добрые люди. Вот например несколько сайтов с хорошими по качеству и свободными фотографиями:

Как вы все прекрасно знаете, консорциум W3C в стандарте CSS 2.1 дает нам для задания размеров, в частности шрифтов, абсолютные и относительные единицы измерения.

К абсолютным причислены:

• in — inches , дюймы. 1 дюйм = 2.54 сантиметра
• cm — сантиметры
• mm — миллиметры
• pt — points , пункты. 1 пункт = 1/72 дюйма. То что находится в выпадающем списке Ворда при выборе размера шрифта и есть пункты
• pc — picas , пики. 1 пика = 12 пунктам

К относительным:

• em — font-size , высота соответствующего шрифта (). Так же встречалось определение em — как ширины символа m .
• ex — x-height , высота символа x соответствующего шрифта
• px — пикселы

Вы заметили?
Пикселы — относительные еденицы измерения!
Как, а вы не знали? :)

Мануал CSS 2.1 поясняет:

Пикселы относительны к разрешению устройства просмотра, т.е. чаще всего — дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пикселные значения. Рекомендуется, чтобы пиксел в качестве точки отсчёта был визуальным углом одного пиксела на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя.

Это теория.

А теперь немного практики.

Открываем наш любимый Windows на Панели управления. В свойствах «Экрана» заглядываем на закладку Настройка -> Дополнительно -> Общие:

96 точек на дюйм (dots per inch). Это — типичная плотность (dpi) для мониторов с разрешением 1024×768 и около того.
Для чего же нам этот параметр? 96 dpi означает, что на один дюйм вашего монитора приходится 96 пикселов. Нет, не нужно тянуться к линейке, реальная величина зависит от монитора, можете верить на слово. Этот параметр необходим для пересчета физических размеров матрицы монитора (дюймы, сантиметры, миллиметры) в пикселы и обратно.

А теперь о том, с чего начался этот пост.

Измените разрешение с 96 dpi (Мелкий шрифт) на 120 dpi (Крупный шрифт) и посмотрите во что превратится ваш любимый интернет. И это не говоря уже о программах, написанных под разрешение 96 dpi.
Вся проблема в том, что размеры фиксированных элементов, таких как например картинки, размеры окон и областей, заданы в пикселах , а размеры шрифтов, как правило, в пунктах .

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

Учитывая широкое распространение мониторов с диагональю более 17″, все чаще пользователи вместо того чтобы увеличивать размер шрифта по умолчанию, увеличивают плотность, отказываясь от стандартной в 96 dpi.

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

Например, при стандартной плотности 96 dpi , шрифт 14 pt имеет высоту:

H = 14*96/72 = 18.666 px ~ 19 px

А при плотности 120 dpi , шрифт 14 pt имеет уже высоту:

H = 14*120/72 = 23.333 px ~ 23 px

Пересчет из пунктов (pt) в пикселы (px) делается из соотношения 1 pt = 1/72 дюйма:

Вот такие вот относительные пикселы:)

P.S. Пока ребята из W3C теоретизируют, давно уже надо было передавать в cgi запросе, наряду с User agent, такие параметры как разрешение экрана, размеры отображаемой области браузера, dpi и глубину цвета. А на стороне сервера просто выбирать нужный шаблон. Ведь не в 20-м веке живем.