Что такое пиксели и что такое 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 точек на дюйм.
Мне тут недавно сообщили применительно к готовым цифровым изображениям, сделанным в Фотошопе, что «…вообще стандарт картинок для экрана - это 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 сглаживания экранных шрифтов (свойства экрана).
- Если вы создаёте веб-графику, то при разработке изображений используйте разрешение 96 точек на дюйм, чтобы лучше ориентироваться в размерах применяемых вами шрифтов - ведь большинство ваших клиентов видят ваши сайты через PC.
- Если вы создаёте графику для полиграфии, то используйте то разрешение, которое требует от вас технолог типографии (для разного оборудования и разных целей это будут разные разрешения).
- Если вы создаёте веб-графику, ориентируясь исключительно на пользователей Макинтошей, то используйте разрешение 72 точки на дюйм, чтобы лучше ориентироваться в размерах применяемых вами шрифтов.
16.12.2009
Для начала предлагаю вам провести небольшой эксперимент. Создайте или откройте в любой программе документ с размерами страницы по умолчанию. Обычно он будет формата А4 - 210297 мм. Теперь убедитесь, что масштаб отображения равен 100%, что ориентация портретная и что вид соответствует будущей распечатке (для OpenOffice это «ВидРазметка печати»). Сделали?
Для начала предлагаю вам провести небольшой эксперимент. Создайте или откройте в любой программе документ с размерами страницы по умолчанию. Обычно он будет формата А4 - 210×297 мм. Теперь убедитесь, что масштаб отображения равен 100%, что ориентация портретная и что вид соответствует будущей распечатке (для OpenOffice это «Вид Разметка печати»). Сделали? Затем возьмите лист формата А4 и попробуйте совместить его контур с экранным. С вероятностью 99,9% их размеры не совпадут, причем разница окажется отнюдь не 0,01%, а гораздо более существенной.
Получившееся расхождение обусловлено моделью пользовательского интерфейса, реализованной создателями операционных систем и приложений. Ведь для того чтобы отобразить что-либо на экране, сохранив натуральную величину документа, нужно учитывать не только размеры дисплея, но и его разрешение - сколько пикселов помещается на единице длины по вертикали и по горизонтали. Думали-думали разработчики, потом, видать, послали младшего лаборанта (а может, самого Билла Гейтса - молодого и энергичного) определить размеры типичного экрана. Вернулся он с цифрами. Разделили длину на количество пикселов и получили 96 точек на дюйм (дело-то в Америке было, где дюймы в ходу, а 1 дюйм = 25,4 мм). И кто-то сказал, что это хорошо. И назвал магическое число «логическим разрешением».
А теперь внимание! Правильный ответ (цитирую документ с сайта Microsoft из раздела для разработчиков - http://msdn.microsoft.com/ru-ru/library/aa970067.aspx): «По умолчанию параметр точек на дюйм равен 96. Это означает, что 96 точек занимают ширину или высоту одного воображаемого дюйма. Точный размер «дюйма» зависит от размера и физического разрешения монитора. Например, если монитор имеет ширину 12 дюймов и горизонтальное разрешение 1280 точек, то горизонтальная линия в 96 точек расширяется до длины около 9/10 дюйма». Ключевое слово здесь - «воображаемый». Следовательно, наш дюйм получается эластичный - тянется или сжимается в зависимости от физических размеров и разрешения конкретного монитора.
Надо заметить, что значение 96 тнд долгие годы заметно превышало реальные возможности мониторов. Типичное физическое разрешение большинства моделей составляло 72 тнд (оно и до сих пор остается логическим разрешением в Mac OS), за ним даже закрепилось словосочетание «экранное разрешение». Именно оно задано для экранных шрифтов, а также для стандартных картинок с низким разрешением, отображаемых в программах верстки вместо «прилинкованных хайрезов». С такой же дискретностью делают и графику для Сети.
Кроме того, даже после установки драйверов из комплекта поставки монитора компьютер не мог точно узнать реальные размеры области изображения, ведь на ЭЛТ-мониторах она настраиваемая и обычно не растягивается на весь экран без полей, поскольку именно на краях дисплея искажения геометрии и сведения получались максимальными. Видеть такое никому не хотелось - лучше уж оставлять небольшие черные поля. Значит, если верстальщик или дизайнер желал вывести на экран изображение именно того размера, какого оно позже будет напечатано, такой простой вариант, как задать 100%, не подходил. Увы, не годится он и сейчас.
Между тем после появления ЖК-мониторов у рассматриваемой нами задачи стало возможно простое решение. Поскольку плоскопанельные экраны обладают врожденной идеальной геометрией, их пикселы выровнены раз и навсегда. Физическое разрешение, при котором картинка оптимальна (именно его следует выбирать тем, кто занимается версткой или дизайном), только одно. Его значение, а также размеры области отображения с высокой точностью известны компьютеру. Но тогда почему же «Масштаб 100%» все еще не работает так, как должен? Видимо, потому, что никто над этим пока специально не задумался.
Полагаю, надо было бы где-то среди параметров добавить маленькую кнопку «Привести масштаб экрана в соответствие с масштабом печати». Да, длинное получилось название. А может, - «Уравнять размеры на экране и при печати»? Так, пожалуй, звучит уже получше.
И что же именно эта кнопка должна делать? Ответ прост: всего лишь пересчитывать отношение между логическим (96 тнд) и физическим разрешением экрана, а затем задавать соответствующий коэффициент масштабирования для пользовательского интерфейса.
Такова теория. Но критерий истины - практика! Поэтому, взяв в руки линейку, я измерил ширину экрана своего ноутбука. Получилось 284 мм, или 11,18 дюйма, - почти как в примере у Microsoft. Горизонтальное разрешение - 1280 точек. В точках на дюйм это будет 114,5. Следовательно, мне нужно заменить имеющийся масштаб отображения на 119,27% (т.е. 114,5 умножить на 100 и разделить на 96). В ноутбуке установлена ОС Vista. Выбираю «Панель управления Персонализация Изменить размер шрифта» (на самом деле изменятся величины всех элементов пользовательского интерфейса и поддерживающих это приложений). Щелкаю на «Особый масштаб» и задаю «119%» (увы, дробного масштаба ввести нельзя). Возвращаюсь - появилась новая строка «114 dpi». Теперь остается перегрузить ноутбук и проверить… Получилось!
P. S. Один из пользователей, обсуждавших этот способ в ЖЖ предложил просто... запомнить, при каком масштабе размеры листа соответствуют реальным.
Что такое DPI? Не все знают ответ на этот вопрос. И данная статья поможет.
DPI (Dots Per Inch) - количество точек на дюйм. Оно применяется для определения разрешающей способности экрана. Но некоторые путают DPI монитора с PPI (Pixels Per Inch). Последнее обозначает количество пикселей на дюйм.
Для примера: для квадрата в один дюйм необходимо вывести на с разрешающей способностью 96 dpi картинку, где каждая сторона будет содержать 96 пикселей; для печати на бумаге необходимы 600 пикселей на сторону, когда разрешение DPI 600.
Для сравнения: говорят о большом разрешении фотографий (например 3000х1500, где ширина изображения в пикселях 3000, а высота - 1500). Извлечь из этого можно то, что картинка достаточно большая при просмотре на экране. А что будет, если вывести ее на печать? Для этого и существует термин DPI, который определяет количество точек, которые нанесет принтер на дюйм бумаги.
Историческая ремарка: DPI монитора
Старенькие VGA мониторы начала 80-ых имели разрешение DPI от 70 до 74, когда аналогичные продукты Apple (мониторы Macintosh) имели разрешающую способность в 72 DPI, в которых один пиксель соответствовал реальному типографическому показателю в 1/72 дюйма.
Исследования показали, что расстояние человеческого глаза до экрана монитора в три раза больше, чем расстояние до бумажного носителя (газета, книга), тем самым изображение на мониторе заметно меньше. Для комфортной работы и соответствия действительным размерам изображения было принято решение программно устанавливать разрешающую способность в 96 DPI. Но в действительности мониторов была 70 - 74 DPI.
Только позже компания IBM выпустила монитор с разрешением 96 DPI. Сразу после этого была сделана программная поддержка в 120 DPI. Это свело на нет привязку к действительному типографическому показателю в 72 DPI.
Что такое DPI: изменение разрешающей способности монитора
Прежде всего, изменение DPI влияет на правильное отображение элементов и рисунков на экране, это не способ увеличить или уменьшить и иконок. Если текст на экране с правильным разрешением выглядит мелковато, то стоит поменять его размер, а не лезть в настройки разрешающей способности монитора.
Другая особенность, даже опасность, неправильного параметра DPI скрыта в визуальном отличии в размерах экранного изображения и результатов печати. В сфере программного обеспечения и разработок ПО неправильно выставленное значение DPI может привести к нечитаемости интерфейса или текста: слишком большой показатель (большие вынудит разработчика уменьшить рабочую область (текст), что неприемлемо на экранах с правильно выставленным DPI.
Есть несколько рекомендаций для разработчиков и любителей кастомного ПО. Лучше создавать программы или презентации по шаблонам, что исключит несоответствие показателей DPI. Любой такой интерфейс будет правильно отображаться на любых мониторах с различной разрешающей способностью. При использовании стоит подготовить два рисунка с различным показателем DPI (96 и 120). И при разном разрешении монитора картинка будет выбираться соответствующая.
Что такое DPI: вывод
Современный программ и операционных систем ориентирован на разрешающую способность монитора как в 96 DPI, так и 120, что является большим плюсом. Но некоторые драйвера видеокарт и монитора позволяют выставлять персональные значения текста, диалоговых окон и прочей мелочи, что приведет к неправильному отображению картинки.
Для полноты картины еще раз объясним, что такое DPI на простом примере. Физические размеры монитора остаются неизменными при любом раскладе, а при изменении разрешения с 1024х768 на 1280х1024 меняется и DPI. Визуально уменьшается экран и появляется много свободного места, но все элементы рабочего стола и шрифт остались прежними. Сами пиксели уменьшились, чтобы уместиться на той же площади экрана, при том же размере.
Как вы все прекрасно знаете, консорциум 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-м веке живем.