Как посчитать сколько пикселей на метр изображение
Обновлено: 07.07.2024
Калькуляторы - расчёт стоимости полиграфической продукции, расчёт размера картинок для печати
В повседневной жизни мы часто пользуемся калькуляторами. Это быстро, удобно и экономит наше время. Так и у нас на сайте - стоимость продукции сразу рассчитывается в зависимости от количества, бумаги и дополнительных опций. Не нужно дозваниваться в офис или ждать ответ на отправленный запрос на расчет по почте. Подробнее о работе калькулятора расчета стоимости продукции в статье "Онлайн-калькулятор" .
Стоимость рассчитали, теперь нужно подготовить макет для печати. При этом необходимо использовать изображения, которые подходят по качеству и размеру для печати.
Где особенно важно учитывать размер изображения?
- Все виды календарей, особенно настенные, которые печатаются большим размером и люди смотрят на него в течении года. , брошюры, каталоги, журналы. Большинство изображений несут в себе рекламный характер и их качество безусловно важно. . Это сложная продукция в плане подготовки макета для печати, и без качественных исходных материалов её невозможно будет сделать.
Подробнее о требованиях для подготовки макетов к печати необходимо ознакомиться в статье " Технические требования ". А тема данной статьи помочь понять, подходит ли Ваше изображение для печати и какого в итоге размера оно получится при разных видах печати.
Как определить подходит ли изображение для печати?
Для качественной печати важно не только на каком оборудовании будет производится печать, но и с каких файлов это будет делаться. Можно скачать понравившуюся картинку из интернета и заказать печать на самой лучшей машине и получить совсем не то, что хотелось. Как понять, подходит изображение для печати? Ведь оно так красиво выглядит на экране монитора. Параметров определения качества изображений много, но начать нужно с самого простого - размер изображения.
Мы подготовили калькулятор для перевода размера изображения из Px в мм и обратно. Вы знаете размер картинки в мм , которую собираетесь напечатать. Например, для каталога нужна иллюстрация 50х50 мм. (Если фотография выходит за обрезное поле, то нужно добавить 3 мм с той стороны, которая будет обрезаться.) Вы задаете этот размер в калькуляторе, выбираете тип печати и соответствующий ему dpi, и получаете размер изображения в Px. У Вас есть изображение и Вы знаете его размер в пикселях . Вы вводите эти значения, выбираете тип печати и получаете максимальный размер изображения, который можно будет получить при печати. Есть фотографии, снятые на iPhone11 (можно взять любой другой телефон, а лучше фотоаппарат). Мы не будем рассматривать вопрос, связанный с качеством объектива и матрицы. Разрешение фотографии, полученной на телефон 3024х4032 pix. Вводим эти значения в калькулятор и на выходе получаем, что при 300 dpi (стандартное разрешение для качественной печати) можно напечатать изображение 256х341 мм. А это больше А4-го формата. Не так уж и мало! И наоборот. Скачанную картинку из интернета, например 700х420 pix можно напечатать качественно только 59х35 мм. Как узнать разрешение картинки на компьютере?Откройте папку с картинками на компьютере, наведите мышкой на изображение. Во всплывающем окошке показывается размер в пикселях.
Что такое вылеты?
Для печати картинки без белой рамки - печать навылет нужно, чтобы изображение было больше на 3 мм с каждой стороны, чем готовое изделие. Потом эти 3 мм срезаются при обрезке заготовок до готового размера изделия. Эти припуски называются вылетами , и их нужно учитывать при расчете размера изображения.
Типографика изучает воспроизведение текста на странице и использование его размера, гарнитуры, цвета и других внешних признаков для того, чтобы текст лучше читался и красиво выглядел. Типографика появилась в середине 15-го века, с появлением печатных станков. Расположение текста на странице влияет на наше восприятие — чем лучше его расположить, тем больше вероятность, что читатель поймет и запомнит то, что написано в тексте. Некачественная типографика, наоборот, делает текст плохо читаемым.
Гарнитуры подразделяют на разные виды, например на шрифты с засечками и без. Засечки — декоративный элемент шрифта, но в некоторых случаях они облегчают чтение текста, хотя иногда происходит и наоборот. Первая буква (голубого цвета) на изображении набрана шрифтом с засечками Бодони. Одна из четырех засечек обведена красным цветом. Вторая буква (желтая) — набрана шрифтом Футура без засечек.
Существует множество классификаций шрифтов, например, согласно времени их создания, или стилю, популярному в определенное время. Так, есть шрифты старого стиля — группа, которая включает самые старые шрифты; более новые шрифты переходного стиля; современные шрифты, созданные после переходных шрифтов и до 1820-х годов; и, наконец, шрифты нового стиля или модернизированные старые шрифты, то есть, шрифты, выполненные по старому образцу в более позднее время. Эта классификация в основном используется для шрифтов с засечками. Существуют и другие классификации, основанные на внешнем виде шрифтов, например на толщине линий, контрасте между тонкими и толстыми линиями, и форме засечек. В отечественной печати существуют свои классификации. Например, классификация по ГОСТу группирует шрифты по наличию и отсутствию засечек, утолщению в засечках, плавному переходу от основной линии к засечке, закруглению засечки, и так далее. В классификациях русских, а также других кириллических шрифтов часто бывает категория для старославянских шрифтов.
Главная задача типографики — регулируя размер букв и выбирая подходящие шрифты, разместить текст на странице так, чтобы он хорошо читался и красиво выглядел. Существует ряд систем для определения размера шрифта. В некоторых случаях, одинаковый размер букв в типографских единицах, если они отпечатаны в разных гарнитурах, не означает одинаковый размер самих букв в сантиметрах или дюймах. Эта ситуация более подробно описана ниже. Несмотря на вызванные этим неудобства, применяемый на данный момент размер шрифта помогает дизайнерам аккуратно и красиво скомпоновать текст на странице. Это особенно важно в верстке.
В верстке необходимо знать не только размер текста, но и высоту и ширину цифровых изображений, чтобы разместить их на странице. Размер можно выразить в сантиметрах или дюймах, но существует также специально предназначенная для измерения размера изображений единица — пиксели. Пиксель — это элемент изображения в виде точки (или квадрата), из которых оно состоит.
Определение единиц
Размер букв в типографике обозначается словом «кегль». Существует несколько систем измерения кегля, но большинство из них основано на единице «пайка» в американской и английской системе измерения (англ. pica), или «цицеро» в европейской системе измерения. Название «пайка» иногда пишут как «пика». Существуют несколько видов пайки, которые слегка отличаются по величине, поэтому, используя пайку, стоит помнить, какая именно пайка имеется в виду. Изначально в отечественной печати использовали цицеро, но сейчас часто встречается и пайка. Цицеро и компьютерная пайка похожи по величине, но не равны. Иногда цицеро или пайку напрямую используют для измерения, например, чтобы определить размер полей или колонок. Чаще, особенно для измерения текста, используют производные единицы, полученные от пайки, такие как типографские пункты. Размер пайки определяется в разных системах по-разному, как описано ниже.
Буквы измеряют так, как показано на иллюстрации:
- линия верхних выносных элементов: линия, отмечающая верхнюю часть самой высокой буквы, включая верхние выносные элементы (например, верхний хвостик буквы «б»);
- базовая линия строчных знаков: верх основной части буквы, без выносного элемента, который продолжается до линии верхних выносных элементов;
- линия шрифта или базовая линия: низ основной части буквы, без выносного элемента, который продолжается до линии нижних выносных элементов;
- линия нижных выносных элементов: самая низкая часть самой длинной (вниз) буквы, включая нижней выносной элемент (например, нижний хвостик буквы «у»);
- высота знака: высота буквы без учета выносных элементов. В американской типографской системе эту высоту приравнивают к высоте английской буквы x;
- высота литерной площадки: исторически — размер площадки свинцовой литеры, которую использовали для печати этой буквы.
Чаще всего размер шрифта определяется в типографских пунктах. Например, большая часть научных статей, а также писем и документов в деловой переписке, выполнена в размере от 10 до 12 пунктов. Один пункт равен 1/12 пайки, или 1/12 цицеро, в зависимости от системы счисления. Размер буквы в пунктах, и соответствующий ему размер в миллиметрах или дюймах соответствует высоте литерной площадки (номер 6 на иллюстрации выше). Раньше, когда набор текста происходил вручную, для каждой буквы использовали свинцовую литеру, похожую на современные печати. Представьте себе печать с одной буквой, например M, как на изображении. Размер в пунктах — это высота этой печати. В веб-дизайне, особенно в CSS и LaTeX иногда используют не высоту литерной площадки, а высоту знака.
Для измерения размера цифровых изображений используют пиксели, описанные ниже.
Разные способы вычисления значений типографских единиц
В разных системах типографских единиц пайки, и, соответственно, пункты, определяются по-разному. Это произошло потому, что технологии печати развивались в каждой стране по-разному. Типографские единицы основаны на местных единицах длины, а так как они различны (даже дюймов до недавнего времени использовалось несколько), то и размер пайки не одинаков и не полностью соответствует размеру цицеро, хотя и очень к нему близок. Сегодня во многих странах наиболее широко используется компьютерная пайка. Эта величина была введена специально для обеспечения единого стандарта типографских единиц.
Компьютерная пайка
Компьютерная пайка равна 1/6 дюйма или 4,23 миллиметра. Компьютерный типографский пункт соответственно равен 1/72 дюйма или 0.35 миллиметра. Их широко используют в формате PostScript и для измерения текста, изображенного на экране компьютерного монитора. Также эта величина часто применяется в печати на принтерах в домашних условиях.
Иногда в веб-дизайне используют пункты, величина которых основана на величине компьютерной пайки, описанной выше. Иногда размеры пункта и пайки определяют относительно размера пикселя, установленного для конкретного веб-сайта. Такие пиксели называются относительными.
Относительные пиксели
Стандартный размер пикселей заменяется на относительные пиксели в том случае, если страница предназначена для просмотра на устройствах с нестандартным размером экрана, или для тех устройств, на которые смотрят с нестандартного расстояния. Например, размер экрана многих смартфонов рассчитан на то, чтобы на него смотрели с расстояния примерно 25 сантиметров (10 дюймов), но если появится новый телефон с экраном стандартного размера, но предназначенный для просмотра с расстояния вдвое меньше (13 сантиметров или 5 дюймов), то относительный пиксель также должен быть в два раза меньшего размера. Иначе изображение будет нечетким и пользователю будут видны точки, из которых состоит рисунок.
Угол зрения
Производители экранов заметили взаимосвязь между размером экрана, расстоянием между экраном и глазом, размером пикселя, и относительным размером точки. Понятия «угол зрения» и «пиксели на градус» помогают наглядно понять эту взаимосвязь.
Величина пиксели на градус — общее число пикселей на экране на один градус зрительного угла по отношению к расстоянию от глаза до экрана. На рисунке желтый угол D равен одному градусу (на самом деле он больше одного градуса, так как иначе трудно было бы увидеть, что изображено на рисунке). Пиксели на градус — число точек на красном отрезке E или на красном отрезке F. В нашем случае точки на градус равны 3-м точкам, как видно на изображении (здесь 2 серых и одна темно-серая точка на каждом из экранов). Производители дисплеев определяют количество точек на градус так, чтобы точки были достаточно малы и сливались в один рисунок. Обычно эта величина намного выше, чем на нашей иллюстрации. Так, например, компания Apple утверждает, что они используют как минимум 53,53 точки на градус, а иногда и до 79.
Зная количество точек на градус, можно легко вычислить размер одной точки, используя расстояние от глаза до экрана и угол зрения в градусах. В нашем примере расстояние до первого экрана — 10 дюймов, а до второго — 20. Первое расстояние — среднее расстояние, от глаз до экрана смартфона, а второе — расстояние до экрана монитора компьютера. Угол зрения — это угол, для которого длина отрезка, который он покрывает на экране, равно одному пикселю (это расстояние на иллюстрации — зеленые отрезки B и C). Угол зрения на иллюстрации обозначен оранжевым цветом. Используя понятия угла зрения и точек на градус, можно вычислить размер пикселя как для обычных, так и для нестандартных дисплеев.
О том, как использовать эти понятия на практике можно подробнее узнать на сайте W3C.
Другие единицы
Хотя компьютерная пайка постепенно вытесняет другие единицы, и возможно заменит более привычные цицеро, наряду с ней также используются другие единицы. Одна из таких единиц — американская пайка Она равна 0,166 дюйма или 2.9 миллиметра. Существует еще и типографская пайка. Она равна американской.
В некоторых отечественных типографиях и в литературе о печати до сих пор используют цицеро — единицу, которая широко применялась в Европе (за исключением Англии) до появления компьютерной пайки. Один цицеро равен 1/6 французского дюйма. Французский дюйм немного отличается от современного дюйма. В современных единицах один цицеро равен 4,512 миллиметра или 0,177 дюйма. Эта величина почти равна компьютерным пайкам. Один цицеро — это 1,06 компьютерных пайки.
Круглая шпация (em) и полукруглая шпация (en)
Описанные выше единицы определяют высоту букв, но существуют также единицы, обозначающие ширину букв и символов. Круглая и полукруглая шпации — как раз такие единицы. Первая также известна как кегельная шпация или em, от английского, обозначающего букву M. Ее ширина исторически равнялась ширине этой английской буквы. Аналогично, полукруглая шпация, равная половине круглой — известна под названием en. Сейчас эти величины не определяют с помощью буквы M, так как эта буква может иметь разный размер у разных шрифтов, даже если кегль одинаков.
В русском языке используются короткое и длинное тире. Для обозначения диапазонов и интервалов (например, во фразе: «возьмите 3–4 ложки сахара») используется короткое тире, называемее также тире-en (англ. en dash). Длинное тире используется в русском языке во всех остальных случаях (например, во фразе: «лето было коротким, а зима — длинной»). Оно называется также тире-em (англ. em dash).
Проблемы с современными системами единиц
Многим дизайнерам не нравится нынешняя система типографских единиц, основанная на пайках или цицеро, а также на типографских пунктах. Главная проблема в том, что эти единицы не привязаны к метрической или имперской системе мер, и в то же время их приходится использовать вместе с сантиметрами или дюймами, в которых измеряется размер иллюстраций.
Размер всех трех шрифтов в типографских пунктах одинаков, но высота знака везде разная.Кроме этого, буквы, выполненные в двух разных гарнитурах, могут сильно отличаться размером, даже если они одинакового размера в типографских пунктах. Это вызвано тем, что высота буквы измеряется как высота литерной площадки, которая не связана напрямую с высотой знака. Это затрудняет задачу дизайнеров, особенно если они работают с несколькими шрифтами в одном документе. На иллюстрации — пример этой проблемы. Размер всех трех шрифтов в типографских пунктах одинаков, но высота знака везде разная. Некоторые дизайнеры для решения этой проблемы предлагают измерять кегль как высоту знака.
Подбор формата фотографии по размерам цифрового снимка в пикселях. Вычисление используемого разрешения.
Калькуляторы в этой статье посвящены теме печати цифровых фотографий.
Первый калькулятор помогает подобрать формат фотографии для печати изображения известных размеров. Сформулируем задачу.
Дано: У нас имеется цифровое изображение известных нам размеров, например, 3264 на 2448 пикселей, и набор стандартных форматов, предлагаемых сервисами фотопечати. Формат определяет линейные размеры фотографии, например, фотография формата 10х15 имеет размеры 102 на 152 миллиметра.
Требуется: Выбрать из набора форматов максимально большой, на котором еще можно напечатать изображение без потери качества.
Для задания форматов фотографий я создал отдельный справочник Форматы фотографий, который при необходимости можно расширять.
Единственное специальное знание, которым нужно обладать для нахождения ответа, это знание того, что качественная печать цифрового изображения требует разрешения не менее 300 точек (пикселей) на дюйм (300 dpi), а более-менее приемлемая печать возможна при разрешении не менее 150 точек на дюйм (150 dpi). Все остальное — простые математические действия.
Графически задача изображена на рисунке ниже
Логика поиска ответа проста — линейные размеры каждого формата переводятся в дюймы, а затем в пиксели, исходя из того, что в одном дюйме 300 (150) пикселей. Далее полученное число сравнивается с размером изображения (там есть определенные нюансы, связанные с отношением высоты и ширины, но об этом во второй части). Если размер формата в пикселях больше, чем размер нашего изображения (на рисунке — формат справа от фотографии), то он уже не подойдет, ибо фотографию придется растягивать, и мы получим разрешение хуже 300 (150) dpi. Если размер формата меньше, чем размер нашего изображения (на рисунке — формат справа от фотографии), то он подойдет — фотографию придется сжимать, и мы получим разрешение лучше 300 (150) dpi.
Из всех подходящих форматов калькулятор выбирает формат максимального размера (с печатью изображений меньшего размера проблем нет - насколько я понимаю, печатать можно и с разрешением 1200 dpi).
Приветствую уважаемое сообщество Хабра! Пишу эту небольшую заметку как важный ликбез для всех, кто работает с растровыми картинками. Обычно, вопрос в чём измерять изображения встаёт у новичков, но путают термины и опытные специалисты.
Начнём с главного: растровые изображения состоят из пикселей. На этом можно было закончить данную статью, но не всем этого достаточно, поэтому поговорим о заблуждениях и мифах, которые я встречал на практике.
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. Но это другая история.
Читайте также: