Актуальность: 2016
Для измерения размера фотографий применяются по меньшей мере три параметра - разрешение цифрового изображения (в пикселях), размер отпечатка (в сантиметрах) и разрешение при печати (dpi - точки на дюйм). Пользователю, который впервые столкнулся с задачей преобразования изображения, подготовкой его к печати иногда сложно разобраться с этими настройками, приходится действовать наобум и идти к желаемому результату путем проб и ошибок, тратя уйму времени и бумаги.
Приведем простой пример задачи. Вам нужно сделать фотографию на документы. Можно пойти двумя путями - сходить в фотоателье и сфотографироваться там, отдав за 4 маленьких фотографии, напечатанных на листе 10*15 см рублей 150. Второй вариант - сфотографироваться дома, подготовить к печати лист А4, на который втиснуть столько своих фотографий разных размеров, что хватит на несколько лет вперед. Потом идете в фотоателье и печатаете свое творение на листе А4 рублей за 30. Вроде бы с одного заказа выгода смехотворная, но если нужно распечатать фотографии сразу для нескольких человек (например, когда вся семья фотографируется на визу перед путешествием в другую странц), то можно сэкономить более существенную сумму. И это лишь один из примеров. Другой вопрос - как соблюсти размеры фотографий, чтобы на отпечатке они были ровно 4*5 см (или каким-то другим размером). Для того, чтобы подогнать размер отпечатка к требуемому, нужно разобраться в связи сантиметров , пикселей и точек на дюйм .
Пиксели
Пиксель - это одна точка, из которых состоит изображение. Также пикселем называется ячейка изображения на мониторе или жк-телевизоре. Рассмотрите монитор вблизи и вы увидите едва заметную сеточку, одна ячейка этой сетки - и есть пиксель. Фотография, которую вы скачали с фотоаппарата имеет разрешение несколько мегапикселей, то есть, например, 6000 пикселей в ширину и 4000 пикселей в высоту - это 6.000 * 4.000 = 24.000.000 пикселей или 24 мегапикселя. При просмотре на мониторе картинка автоматически масштабируется до разрешения монитора (около 2 мегапикселей). Если мы пытаемся увеличить масштаб (растягиваем фотографию), то до какой-то степени картинка растягивается без видимой потери качества, но потом на ней появляются характерные квадратики. Это происходит, когда реальное разрешение фотографии меньше того, что мы хотим видеть - размер пикселя на фотографии стал больше размера пикселя на мониторе.
Сантиметры
Что такое "сантиметр", я думаю, объяснять не нужно. В нашем случае в сантиметрах измеряется размер отпечатков фотографии. Обычно фотографии печатаются размером 10*15 см, но иногда используются более крупные форматы - 20*30 см (примерно соответствует формату А4), 30*45 см (А3) и больше. Вероятно, вы сталкивались с проблемой - вы нашли на каком-то сайте красивую фотографию и решили ее распечатать ее крупным форматом (например, 20*30 см), но распечатав, заметили, что качество отпечатка не слишком хорошее - конткры объектов получились немного размытыми. Что самое печальное - никакой обработкой эту фотографию не исправить. И все потому, что разрешение фотографии на сайте составляет, к примеру, 900*600 пикселей. То есть, на 1 пиксель на отпечатке будет иметь размер примерно 0.33 миллиметра - при этом сложно рассчитывать на "звенящую" резкость! И здесь появляется еще один параметр качества изображения, при помощи которого можно оценить качество отпечатка - DPI
DPI
DPI сокращение английской фразы Dots per Inch, что на русский переводится как точки на дюйм. Эта величина как раз показывает, сколько пикселей изображения приходится на один "погонный" дюйм при печати (дюйм равен 2.54 см). Еще есть величина DPC (точек на сантиметр), но она используется реже - как ни крути, все эти технологии печати пришли к нам оттуда, где в ходу дюймы, футы, фунты и т.д. Итак, вернемся к нашему примеру - картинке 900*600 пикселей, которую мы решили напечатать форматом 30*20 см. Переведем для удобства сантиметры в дюймы - получаем 11.8 * 8.9". Если поделить 900 пикселей на 11.8", то получаем разрешение печати 76 DPI . Это примерно соответствует разрешающей способности монитора с его "крупными" пикселями, поэтому картинка на экране смотрится хорошо. Но чтобы получить отпечаток приемлемого качества, нужно разрешение печати как минимум 150 DPI, а если хотим совсем хорошую детализацию, не менее 300 DPI. Чтобы обеспечить такое разрешение при печати 30*20 сантиметров, оригинальное цифровое изображение должно иметь разрешение 3540 * 2670 пикселей - это около 9 мегапикселей. Вот и нашли причину, почему фотографии, распечатанные "из интернета" выглядят нерезко и мутно. Теперь вернемся к нашему вопросу - как подогнать разрешение картинки, чтобы оно печаталось заданным размером? В качестве примера рассмотрим подготовку фотографий для документов.
Создание собственного фото на документы - пошаговая инструкция
Предположим, вам нужно сделать несколько фотографий размером 4*6 см и разместить их на листе 20*30 см. Как это сделать?
1. Берем исходное изображение, открываем его в Photoshop. Выбираем пункт меню "изображение" - "размер изображения". Перед нами открывается такое диалоговое окно:
В открывшемся диалоге мы видим две группы настроек - "размерность" и "размер печатного оттиска". В группе "размерность" отображаются размеры цифрового изображения в пикселях. Эти настройки не трогаем! В группе "размер печатного оттиска" устанавливаем нужный нам размер в сантиметрах (единицы измерения выбираются из выпадающих списков). В нашем случае это 4*6 см. Также задаем разрешение при печати - 300 пикселей на дюйм, этим мы обеспечим хорошее качество печати.
Меняя настройки размера печатного оттиска, мы видим, что размеры в пикселях тоже изменяются. Так и должно быть! После всего этого нажимаем кнопку ОК. Изображение меняется в размерах. Теперь нам нужно скопировать его - используем комбинацию клавиш:
- Ctrl + A (англ) - выделить все
- Ctrl + C (англ) - скопировать в буфер обмена
То, что скопировано в буфер обмена мы будем переносить на отдельный холст, см п.2. 2. Теперь нам надо создать новое изображение, которое будет соответствовать листу 20*30 см, который мы пойдем распечатывать в фотолабораторию. Выбираем меню "Файл", "Создать", появляется диалоговое окно:
Указываем размер фотобумаги, на которой будет выполняться печать (20 на 30 см) и выставляем разрешение в пикселях на дюйм такое же, какое имеет наша фотография - 300 DPI. Нажимаем ОК.
3. Появилось пустое изображение с прозрачным фоном. Нажимаем комбинацию клавиш Ctrl + V и вставляем наше первое изображение на новый холст. Это будет выглядеть примерно так:
Изображение вставлено как новый слой. Передвигаем его в верхний левый угол, затем выбираем меню "Слой", "Создать дубликат слоя".
На холсте появится еще одна такая же картинка, изначально она "лежит" на исходном слое. Перемещаем ее и ставим рядом. Таким же образом создаем столько дубликатов слоев, сколько нам нужно. После этого выполняем сведение слоев (меню "Слой", "Выполнить сведение").
Сохраняем картинку в формате JPEG, копируем на флешку и идем в фотолабораторию. Оператору говорим следующее - "напечатайте это изображение форматом 20*30 см с разрешением 300 DPI без масштабирования ". При этом маленькие картинки будут иметь точно такой размер, какой мы для них указали - в нашем случае 4*6 сантиметров. При себе желательно иметь линейку, чтобы проверить размеры отпечатков.
Как вы все прекрасно знаете, консорциум 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-м веке живем.
DPI – (точек на дюйм, dots per inch) - характеристика экранного разрешения, которая показывает сколько точек экрана соответствует логическому дюйму. Экранное разрешение устанавливается при помощи диалога "Display Properties" - "Settings" - "Advanced" - "General" - "DPI setting".
1С:Предприятие версии 8 учитывает экранное разрешение для масштабирования всех элементов управления и других интерфейсных объектов. Из-за погрешностей в масштабировании системных шрифтов ОС Windows необходимо учитывать некоторые особенности при разработке форм для разных экранных разрешений.
Разработка в нормальном разрешении
Обычное разрешение, установленное в ОС Windows по умолчанию, составляет 96 DPI (Normal Size). Разрешение 120 DPI (Large Size), обычно используется для увеличения изображения иконок и шрифтов. В этом разрешении буквы шрифта отображаются большим количеством точек и поэтому становятся крупнее и легче читаются.
Но при увеличенном разрешении на экран помещается примерно на 30% меньше информации, чем при нормальном.
Разрабатывать формы рекомендуется только в 96 DPI, а не в 120 DPI или каком-либо другом экранном разрешении. Если не следовать этой рекомендации, то при масштабировании формы c 120 DPI в 96 DPI текст некоторых элементов управления может не умещаться в отведенные границы, что приведет к искажению смысла отображаемой ими информации (например, появление многоточий в конце текста).
На рисунке 1 показана форма, разработанная в разрешении 120 DPI. На рисунке 2 эта же форма показана в разрешении 96 DPI. Видно, что в разрешении 96 DPI надписи "Наименование" и "Указывать в дате документа месяц прописью" не уместились и заканчиваются троеточиями, а командная панель имеет настолько маленький размер по высоте, что в нее не умещаются стандартные кнопки.
Рисунок 1
Рисунок 2
Запас для других разрешений
Из-за погрешностей при масштабировании системных шрифтов рекомендуется делать поля чуть шире, чем это нужно, оставляя запас в несколько точек (2-4 точки вполне достаточно). Высоту элементов управления корректировать не требуется. На рисунках 3 и 4 показана форма, разработанная в 96 DPI и как она будет выглядеть в 120 DPI соответственно.
Можно заметить, что текст поля переключателя не полностью поместился в отведенный размер в разрешении 120 DPI. Чтобы этого не происходило, достаточно сделать это поле на две точки шире.
Рисунок 3
Что такое пиксели и что такое 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 точкам на сантиметр.
- I set my screen to 72 DPI and designed a small png image that is 100x100 @ 72 DPI. Which means 72 pixels represents 1 inch.
- Now I changed my screen to 120 DPI and designed the same graphic png image with 100x100 @ 120 DPI. Which means 120 pixels represents 1 inch.
- Again I changed my screen to 96 DPI. Which means 96 pixels represents 1 inch. Then Created a wpf application and added the two images (step 1 and step 2) - I have set the Stretch Mode to None
Не уверенный, если я понял понятие правильно, Я ожидал, что изображение на 72 точки на дюйм будет выглядеть меньшим на 96 точек на дюйм потому что, если 72 пикселя представляли 1 дюйм для того изображения, то в новой конфигурации 96 пикселей представляет 1 дюйм. И поэтому я ожидал, что изображение на 72 точки на дюйм будет выглядеть меньшим. Но не имеет место. Infact, это был просто он напротив. Изображение на 72 точки на дюйм выглядит больше 96 точек на дюйм. Почему? Похож на него, wpf будет всегда не выполнять своих обязательств к 96 точкам на дюйм когда дело доходит до изображений?
Update
Why is that, even at 120 dpi (setting
system dpi to 120), only 96 dpi image fits 200x200 box perfectly?
2 ответы
Вы делаете некоторые странные предположения о природе независимой от устройств природы графических отделений WPF.
Независимый от устройств пиксель в wpf мире стоящий 1/96-го из дюйма независимо от параметров настройки экрана. Поэтому только эксперимент на 96 точек на дюйм правилен.
Во-вторых, ваши точки на дюйм уроженца мониторов оказывают влияние
Второй масштабный коэффициент, “урегулирование точек на дюйм”, то, по чему мы изменимся наши тесты. wpf независимо не знает что ваш фактический монитор физическая стоимость точек на дюйм. Вместо этого wpf использует текущее урегулирование этого второй масштабный коэффициент “урегулирование точек на дюйм”. Если “урегулирование точек на дюйм” не делает соответствуйте истинным физическим точкам на дюйм, затем “независимость разрешения” wpf будет кажись, сломаться - хотя это действительно не делает.
У изображения, у которого есть 72 точки на дюйм (точки на дюйм), будет 72 точки на дюйм, тогда как изображение, у которого есть 120 точек на дюйм, будет иметь 120 за дюйм. Поэтому, если мы покажем изображение, которое является дюймом дюймом, у каждой стороны будет 72 точки для изображения на 72 точки на дюйм и 120 точек для изображения на 120 точек на дюйм.
Поэтому каждая точка по изображению на 72 точки на дюйм больше, чем каждая точка по 120 изображениям, таким образом, целое изображение на 72 точки на дюйм больше, чем изображение на 120 точек на дюйм.
Для дополнительных материалов для чтения вы хотели бы рассматривать Урегулирование точек на дюйм и разрешение применения WPF страница на веб-сайте Решений Mindfire.