Что такое размер изображения в пикселях

Связь между пикселями, сантиметрами и DPI

Артем Кашканов, 2021

Для измерения размера изображений применяются по меньшей мере три параметра:

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

Для начала, определимся, что такое пиксель и какое отношение он имеет к сантиметрам.

Что такое «пиксель»

Фотография, которую вы скачали с фотоаппарата имеет разрешение несколько десятков мегапикселей. Например, если картинка имеет 6000 пикселей в ширину и 4000 пикселей в высоту, у нее разрешение 6.000 * 4.000 = 24.000.000 пикселей или 24 мегапикселя.

Сантиметры

Что такое «сантиметр», я думаю, объяснять не нужно. В нашем случае в сантиметрах измеряется размер отпечатков фотографии.

Если же попробовать распечатать форматом поменьше, например, 10*15 сантиметров, даже невооруженным глазом будет заметно, что качество печати получилось лучше. А если напечатать картинку размером на 4*6 см, то получим настоящее «фотокачество». Сгодится на магнитик или карманный клендарик 🙂

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

Что такое «DPI»

150, 200, 300, 600 DPI – сколько это в пикселях, сантиметрах?

Формула пересчета DPI в пиксели очень проста:

DPI = Пиксели : Дюймы

Если нужно пересчитать в сантиметры, делим это еще на 2.54 (именно столько сантиметров в дюйме).

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

Таблица перевода DPI, сантиметров и пикселей

Еще проще живется тем, у кого есть Adobe Photoshop, либо другой более-менее приличный фоторедактор. При изменении размеров изображения (Alt + Ctrl + I) он автоматически пересчитывает сантиметры в пиксели и DPI:

Стоит ввести ширину в сантиметрах и указать требуемое разрешение, он автоматически пересчитает размер картинки в пикселях.

Если на компьютере нет ни одной программы, которая умеет пересчитывать DPI в пиксели и сантиметры, вы можете воспользоваться Онлайн калькулятором DPI моего собственного производства 🙂

Поддержать проект

Вероятно, вы обратили внимание, что на сайте почти нет рекламных баннеров. Согласитесь, без них читать статьи гораздо приятнее. Но сайту надо на что-то существовать.

Источник

Размеры растровых изображений: пиксели, DPI, PPI, сантиметры — вы ничего не путаете?

Приветствую уважаемое сообщество Хабра! Пишу эту небольшую заметку как важный ликбез для всех, кто работает с растровыми картинками. Обычно, вопрос в чём измерять изображения встаёт у новичков, но путают термины и опытные специалисты.

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

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. Но это другая история.

Источник

Разрешение экрана — что это такое и какое лучше

Содержание

Содержание

Смартфоны, ноутбуки, телевизоры: при покупке этой техники важно обращать внимание на одну из ключевых характеристик — разрешение экрана. Что это такое, какие форматы существуют и как этот параметр соотносится с диагональю экрана?

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

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

Разрешение экрана напрямую влияет на качество изображения. Однако этот параметр не соотносится с физическими размерами экрана. Например, есть два монитора разрешением 1920х1080, но один из них имеет диагональ 24 дюйма, а второй — 27. Несмотря на одинаковое разрешение, детализация будет разной.

Все дело в еще одном важном параметре — плотность пикселей на дюйм (PPI – pixel per inch). Чем выше этот параметр, тем выше будет детализация картинки.

Однако PPI существенно различается для разных классов устройств. На плотность влияет точность метода ввода (сенсор или курсор), физические размеры экрана и расстояние пользователя от дисплея. Если телефон мы используем на расстоянии 10–20 сантиметров от глаз, то для телевизора это несколько метров. В связи с этим, и плотность пикселей будет существенно отличаться.

Делать выводы о качестве картинки по PPI для разных классов устройств будет не совсем корректно. В сети также можно встретить утверждение, что человеческий глаз не способен распознать плотность пикселей выше 300 ppi. Различия между 500 ppi и 300 ppi на самом деле заметить смогут только люди с высокой остротой зрения, да и отличия будут настолько несущественные, что в повсеместном использовании разница просто незаметна.

Однако для одной категории товаров с идентичным разрешением плотность будет напрямую влиять на качество картинки.

Большинство производителей указывают PPI в характеристиках экрана. Но вы можете высчитать показатель и самостоятельно. Для этого вам понадобится знать разрешение и диагональ экрана в дюймах. Используйте формулу:

Wp — количество пикселей по горизонтали, Hp — количество пикселей по вертикали, а dp — разрешение по диагонали. Остается только поделить полученное значение на диагональ в дюймах:

Например, у нас есть монитор разрешением 1920х1080 и диагональю 24 дюйма. Тогда по формуле определим dp:

dp = √(1920^2+1080^2) = 2203. Далее делим полученное разрешение на диагональ: PPI = 2203/23,8 = 93.

Представленные характеристики соответствуют монитору Acer KA242Ybi, и, если вы изучите его параметры, то обнаружите, что PPI действительно составляет 93 пикселя на дюйм.

Откуда взялись 2К, 4К, 8К

Существуют больше 30 разнообразных форматов разрешений, начиная от QVGA 240х320 px и заканчивая ошеломляющим 10K с разрешением 10240×5760 px. Самые распространенные разрешения экрана вы можете изучить ниже.

Внимательные читатели заметили, что в таблице есть пара разных строк с обозначениями 2К. Аналогичная ситуация и с разрешением 4К. На самом деле под формат 4К существуют сразу несколько разных разрешений:

По горизонтали практически все они приближены к четырем тысячам пикселей, а вот разрешение по вертикали напрямую зависит от соотношения сторон. Истинным 4К в данном случае называют DCI 4К, используемый в кинематографе. Однако соотношение сторон такого формата не подходило для мониторов и телевизоров. Именно поэтому Ассоциация потребительской электроники (CEA) в 2012 году утвердила единый 4К формат для цифровой электроники, который и получил название Ultra HD 4K.

Это означает, если на коробке монитора или телевизора указано 4К, то согласно принятой спецификации он будет иметь разрешение именно 3840х2160.

Аналогичная ситуация и с 2К — истинным считается DCI 2K 2048×1080, однако среди мониторов и телевизоров под 2К понимают форматы UWHD (2560×1080) или QHD (2560×1440).

По аналогии с уже установившимися 2К и 4К, формату 8К соответствует разрешение 7680×4320 пикселей.

Соотношение сторон экрана

Соотношение сторон показывает отношение горизонтальной и вертикальной стороны экрана друг к другу. Например, формат 1:1 — квадратное изображение. Как правило, конкретным разрешениям соответствуют определенные соотношения сторон.

Какое соотношение лучше — зависит непосредственно от формата фильма или игры. С играми обычно проблем не бывает, поскольку они легко адаптируются под разные форматы, а вот при просмотре кино неподходящего разрешения по краям экрана могут появиться черные линии.

Самые популярные соотношения сторон, под которые адаптирована большая часть мультимедийного контента — 16:10 и 16:9.

Про разрешения экрана смартфонов

С мобильной электроникой все намного сложнее, поскольку разнообразия форм-факторов куда больше. Если рассмотреть линейку смартфонов от Apple, то здесь ситуация следующая:

Разрешения FullHD 1920х1080 разработчикам удалось добиться при диагонали 5,5 дюйма, а максимальное 2688х1242 доступно на смартфонах диагональю 6,5 дюйма. Условно его можно назвать приближенным к 2К.

Для Android-гаджетов все еще сложнее, поскольку рынок представляют сотни разнообразных моделей. Условно можно выделить общую классификацию из пяти категорий:

Выпускаются и смартфоны с 4К дисплеем. Например, Xperia XZ2 Premium оснащен IPS-дисплеем с диагональю 5,8 дюйма и разрешением 3840×2160. Фактически, это «классический телевизионный» стандарт Ultra HD 4K, а плотность пикселей доходит до впечатляющих 765 ppi. Если вы ожидаете беспрецедентной четкости, то вас может ждать разочарование. Проблема в том, что увидеть разницу между FHD+ и 4К практически невозможно, особенно, в рамках дисплеев на 5-6 дюймов.

При подборе монитора для гейминга согласовывайте разрешение с железом. Не стоит гнаться за 2К и 4К мониторами, если у вас слабая видеокарта и процессор. Телевизоры для просмотра кино лучше брать с разрешением от 2К и соотношением сторон 16:9 или 16:10, чтобы в полной мере наслаждаться детализированной картинкой.

При покупке смартфона определяющим является плотность пикселей на дюйм, поскольку дисплей всегда находится перед глазами и «зернистость» увидеть проще всего. Ищите смартфоны с 300-450 ppi. Большую плотность ваш глаз уже не различит.

Источник