Артем Кашканов, 2016
Для измерения размера фотографий применяются по меньшей мере три параметра — разрешение цифрового изображения (в пикселях), размер отпечатка (в сантиметрах) и разрешение при печати (dpi — точки на дюйм). Пользователю, который впервые столкнулся с задачей преобразования изображения, подготовкой его к печати иногда сложно разобраться с этими настройками, приходится действовать наобум и идти к желаемому результату путем проб и ошибок, тратя уйму времени и бумаги.
Приведем простой пример задачи. Вам нужно сделать фотографию на документы. Можно пойти двумя путями — сходить в фотоателье и сфотографироваться там, отдав за 4 маленьких фотографии, напечатанных на листе 10*15 см рублей 150. Второй вариант — сфотографироваться дома, подготовить к печати лист А4, на который втиснуть столько своих фотографий разных размеров, что хватит на несколько лет вперед. Потом идете в фотоателье и печатаете свое творение на листе А4 рублей за 30. Вроде бы с одного заказа выгода смехотворная, но если нужно распечатать фотографии сразу для нескольких человек (например, когда вся семья фотографируется на визу перед путешествием в другую странц), то можно сэкономить более существенную сумму. И это лишь один из примеров. Другой вопрос — как соблюсти размеры фотографий, чтобы на отпечатке они были ровно 4*5 см (или каким-то другим размером). Для того, чтобы подогнать размер отпечатка к требуемому, нужно разобраться в связи сантиметров, пикселей и точек на дюйм.
Содержание
- Создание собственного фото на документы — пошаговая инструкция
- Что есть на самом деле разрешение?
- Стойте! А какой размер одного пикселя?
- Сколько выбрать DPI при печати?
- DPI, PPI и изменение размеров
- DPI/PPI экранов
- Retina и HiDPI экраны
Пиксели
Пиксель — это одна точка, из которых состоит изображение. Также пикселем называется ячейка изображения на мониторе или жк-телевизоре. Рассмотрите монитор вблизи и вы увидите едва заметную сеточку, одна ячейка этой сетки — и есть пиксель. Фотография, которую вы скачали с фотоаппарата имеет разрешение несколько мегапикселей, то есть, например, 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 сокращение английской фразы 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 сантиметров. При себе желательно иметь линейку, чтобы проверить размеры отпечатков.
Всем привет, с Вами автор блога matrixblog.ru. Большинство пользователей, которые пользуются компьютером, графическими редакторами, сканером и цифровым фотоаппаратом, так или иначе, сталкиваются с такими понятиями, как DPI, пиксели и разрешение. А есть ещё масса других терминов. В целом, все эти термины воспринимаются как факт, и надобности в них разбираться нет. Однако, ситуация может измениться, если человеку приходится сталкиваться с заказами на печать, покупкой монитора или телевизора. В этом случае, терминология может сыграть плохую шутку. Так если мы покупает новый телевизор, размером со слона, и у него в характеристике заявлено что-то в стиле Full HD, то это не значит, что все фильмы будут воспроизводится в идеальном качестве, это относится и к изображением. Но, давайте разберемся по порядку во всём.
Начнем с наиболее простых терминов – разрешение и пиксель. Я не буду вникать в технические моменты, а постараюсь всё пояснить простыми словами.
Пиксели и разрешение – по сути, пиксель – это единица измерения высоты и ширины изображения или видео. С пикселями работает практически вся цифровая аппаратура – выражение 640 на 480 пикселей применимо и к цифровому изображению, и к разрешению монитора, и к возможностям цифрового фотоаппарата. Если провести параллель, то можно сказать, что мы для измерения объектов, используем метры, сантиметры, километры и так далее, а компьютер (цифровая техника для вывода и захвата картинки) – пиксели. Как правило, один пиксель – это квадрат, который полностью закрашен одним сплошным цветов. Если открыть любое изображение на компьютере в любом графическом редакторе, то приближая его, можно в определенный момент увидеть отдельные пиксели.
Как я сказал выше, понятие пиксель не применимо к природе, и то, сколько мельчайших деталей, окружающей нас среды, мы увидим, ограничивается лишь возможностями зрения и цифровой техники.
По сути, чем большого разрешении можно получить снимок, тем больше мелких деталей можно рассмотреть при приближении – ярким примером является номерной знак автомобиля, который надо разглядеть.
Однако, могут возникнуть логические вопросы:
- Почему так часто используются термины 800 на 600 пикселей, 640 на 480 или 1024 на 768.
- Как разрешение картинки связано с её реальными размерами.
Что есть на самом деле разрешение?
Если вы работаете на компьютере или ноутбуке, то в настройках операционной системы можете указать разрешение экрана. Для примера, минимальное разрешение, которое поддерживает моя видеокарта, составляет 800 на 600 точек (пикселей), а максимальное – 1366 на 768 . При низком разрешении, значки на рабочем столе будут больше размером, чем при большом разрешении. Логика понятна, если размер значка 32 на 32 пикселя, то при разрешении в 800 на 600, их может уместить по горизонтали 800/32=25 штук. Увеличивая разрешение, мы увеличиваем количество отображаемых пикселей. Но стойте. Значков действительно можно много отобразить на рабочем столе, но – они становятся меньше. Тут нет никакого подвоха, достаточно сделать скриншот экрана при разрешении 800 на 600 и при разрешении 1366 на 768 пикселей. Открыть рисунки в Фотошопе и установить в окне просмотра 100% и будет видно, что значки одного размера.
По сути, меняя разрешение и соотношение сторон, мы просто отдаляем или растягиваем картинку. Сами размеры изображения остаются прежними.
Ещё раз повторюсь – для природы не существует разрешения и каких-то там пикселей. Это мы вынуждены создавать границы обзора из-за несовершенства нашего зрения. Если бы для нас не создавало проблем различать предметы на расстоянии километров, то и разрешение экрана 14 диагонали было бы логично задавать в 50 000 на 30 000 пикселей. Понятно, что чем больше размер монитора, тем большее разрешение есть смысл устанавливать.
Сами разрешения в 800 на 600 или 1366 на 768 никак не влияют на реальность – размеры монитора остаются прежними. Каждый устанавливает такое разрешение, какое больше всего подходит для его зрения и восприятия.
Стойте! А какой размер одного пикселя?
Если взять тот же Фотошоп, и открыть картинку, то можно легко изменить её размеры, но разрешение сохранить прежним – нужно просто убрать галочку с пункта Интерполяция. Как не странно, но размеры изображения и его вес ничуть не изменится. Это и понятно, компьютер работает с пикселями, а не с сантиметрами.
И тут снова возникает логический вопрос:
Если компьютеру без разницы реальные размеры изображения, то зачем они нужны? Дело в том, что размер снимка начинает играть роль при попытке его распечатать. Тут на сцену выходят новые термины DPI или PPI.
Любопытная математика может выйти и с размером пикселя. Так, если задаться вопросом – какой размер одного пикселя, то утвердительно ответа не будет. Как было сказано выше, меняя разрешение экрана, мы меняем и количество отображаемых пикселей. Если брать во внимание. Что значки на рабочем столе уменьшаются в размерах, то логично предположить, что и пиксели уменьшились в размерах. Но тут снова злую шутку играет наше восприятие.
Возьмем конкретный пример:
Есть небольшой календарь размером 10 см на 7 см. Попробуем его отсканировать.
Масштаб 50%, сканированная картинка размером 10 на 7 см при 300 DPI
Указываем при сканировании 300 DPI – после завершения сканирования, открываем файл изображения в Фотошопе и видим, что его размер действительно 7 на 10 см, значение DPI 300, а разрешение 1181 на 827 пиксели.
Масштаб 100%, сканированная картинка размером 10 на 7 см при 150 DPI
Указываем при сканировании 150 DPI – после завершения сканирования, открываем файл изображения в Фотошопе и видим, что его размер действительно 7 на 10 см, значение DPI 150, а разрешение 591 на 413 пиксели. Видим, что разрешение почти в два раза меньше, поскольку и DPI уменьшилось в 2 раза. Конечно, Фотошоп немного округляет значения под себя, но это не влияет на суть дела.
Что бы понять, сколько в миллиметрах или сантиметрах будет размер пикселя, просто из каждого изображения вырежем по одному квадратику размером 1 на 1 пиксель и посмотрим, что покажут свойства (значение DPI не меняем. ). Просто вырезаем, далее Файл/Создать (Фотошоп автоматически предложит размер рисунка 1 на 1 пиксель и первичное DPI).
То, что разрешение картинок разное видно сразу, поскольку они отличаются по качеству. Попробуем, не подглядывая посчитать, сколько теоретически должен быть размер пикселя в первом и во втором случае. Понятно, что если пиксель квадратный, то и размеры должны быть соответствующими.
Прежде чем подглядывать в свойства рисунка, попробуем сами всё посчитать логическим путём:
300 DPI – если у нас 1181 пикселей равно10 (100 мм) см, то размер 1 пикселя равен 100/1181=0,08467 мм. Для 827 пикселей мы имеем 7 см (70мм), тогда 70/827=0,08464 мм. Как видим, значения практически равны. Логично предположить, что один пиксель будет иметь размер 0,085 на 0,085 мм. В свойствах мы видим, 0,09мм на 0,09 мм. Мелкие погрешности на суть не влияют. Как видим, как говорится, дебет с кредитом сошелся.
150 DPI – тут можно сразу посмотреть в свойства, и увидеть, что один пиксель равен 0,17 на 0,17 мм.
Что из этого следует:
Разрешение сканируемой картинки будет зависеть от заданного DPI и размеров самой картинки. Значения 640 на 480 или 1366 на 768 лишь значения, и к конкретному рисунку не имеют отношения.
Размер пикселя зависит от разрешения картинки и её реальных размеров. Размер пикселя не является постоянным.
Закрываем танцы с бубнами
- dpi = dots per inch (точек на дюйм, разрешение печатающего устройства).
- lpi = lines per inch (линий на дюйм, так называемая полутоновая печать).
- ppi = pixels per inch (пикселей на дюйм, разрешение растровых изображений).
- spi = samples per inch (образцы на дюйм, разрешение дискретизация сканирующих устройств).
Иногда встречается метрические вариации, где вместо дюймов используются сантиметры – dpc, lpc, ppc и spc.
Краткая схема определения:
Spi – данный параметр всё реже используется для определения разрешения сканированных изображений. Еще несколько лет назад были распространены услуги сканирования многотоновых материалов (слайд-шоу, диапозитив, фотопечати) на профессиональных сканерах, имеющих очень точную оптику. Это позволяло получать очень высокого качества растровые изображения. Количество spi, определяет, сколько выборок на дюйм сканер должен выполнить.
Ppi – это просто разрешение файла изображения, которое выражается в количестве пикселей на дюйм. Что такое пиксели, каждый знает – достаточно соответственно увеличить на мониторе любое изображение, и вы увидите квадратики, из которых состоит изображение.
Dpi — это величина, которая определяет, насколько маленькую точку устройство (принтер, плоттер) может "нарисовать". То есть – упрощенно говоря – как точно происходит печатать. Поэтому первая мысль – чем больше, тем лучше. Да, но до определенного уровня. Мы обсудим это далее.
Lpi – определяет, по сути, плотность расположения растровых точек в одном дюйме в длину.
Скажу сразу, это всего лишь термины, и не надо создавать панику в стиле: "Идиот! Надо указывать 300 PPI а не 300 DPI". Вся суть в том, что данные термины остаются лишь терминами, и результат зависит от устройства. Мы привыкли указывать размеры изображения в сантиметрах (как пример), в других странах говорят про дюймы, всегда можно перевести одну систему измерения в другую.
Сколько выбрать DPI при печати?
Некоторые указывают на необходимость различать смысл аббревиатуры PPI и DPI. Когда мы говорим о пикселях, мы должны иметь в виду, "точку", отображаемую на экране монитора. Очки, в свою очередь, "точки", которые принтер печатает на бумаге. С технической точки зрения, различия между этими двумя типами «точек» невелики. И часто говоря про DPI, многие подразумевают PPI.
Мы знаем, что 1 дюйм равен 2,54см. Выше, при сканировании картинки размером 7 на 10 см мы указали значение в 300 DPI и получили разрешение в 827 на 1181 пикселей. Проведем математические расчеты:
300 DPI – это 300 точек (пикселей) на 2,54см (1 см). Тогда, 7см будет содержать в себе – 7*300/2,54 = 826,77 пикселей. Всё сходится, если округлить – на компьютере вышло 827 пикселей. Просто, пиксели не указываются в дробных значениях.
Хорошо, но зачем тогда вводить два термина DPI и PPI, если люди и так под ними подразумевают одно и то же? Тут вопросы больше к полиграфии. А полиграфия – очень запутанная вещь. Если говорить про струйный принтер, то у него один метод печати, а у лазерного – совсем другой. В отношении пикселей можно проследить четкую границу, но вот с точками (пятнами) краски такого не сделаешь, да и маленькие квадратики там не получаться.
Судите сами, у вас есть цифровое изображение (файл) разрешением 3000 на 1000 пикселей. Вы хотите его напечатать, и…. возникает проблема, суть которой заключается в решении следующих задач:
- Размер изображения. Если мы отсканировали календарик размером 7 на 10 см при DPI в1200 и его можно спокойно лицезреть на мониторе шириной полтора метра, и качество детализации хорошее, то логично предположить, что календарик можно распечатать спокойно на четырех листах формата A4, и даже больше. По сути, максимальный размер печатаемого рисунка будет зависеть от его разрешения.
- Качество картинки – и снова разрешение, понятно, что если разрешение маленькое, то и качество на формате А4 будет не очень.
Если мы хотим распечатать фотографию у себя дома на принтере, то проблем нет, дело личное. Но вот с отправкой в полиграфию – это совсем другое дело. Ведь от качества, а точнее, от плотности печати будет зависеть и цена заказа.
Тут снова на сцену выходит DPI, только будет не пикселей на дюйм, а точек на дюйм. Давайте снова посчитаем:
Мы отсканировали картинку размером 7 на 10 см при DPI 300, и получили разрешение в 827 на 1181 пикселей. Давайте посмотрим, в каких размерах можно напечатать картинку при том или ином значении DPI:
- 10 DPI – в данном случае, плотность печати составляет 10 точек на 1 дюйм (2,54см). У нас есть 1181 точка в ширину, тогда: 1181*2,54/10 = 300 см (я округлил). В высоту мы получим 827*2,54/10=210 см.
- 100 DPI – сможем распечатать рисунок размером 30 на 21 см.
- 300 DPI – мы сможем максимально распечатать картинку в её оригинальных размерах.
Данная математика хоть и работает, но всё же. Помним, что DPI – это количество точек на один дюйм, а PPI – количество пикселей на один дюйм. DPI применимо к печати, PPI применимо для растровых изображений. Но, всё это условности, поскольку роль всегда играет конкретное разрешение картинки.
Какая разница между DPI и PPI?
Помним, что термин DPI определяет количество точек на один дюйм (2,54см), и применим к печати. PPI определяет количество пикселей на дюйм (2,54см) и применим к растровым изображениям. Для компьютера, значение PPI не играет роли, поскольку важно лишь разрешение изображения (например, 640 на 480). Неважно, путаете вы эти термины или нет, но ваша картинка на компьютере как имела разрешение 640 на 480 пикселей, так и будет иметь. Пиксели – квадратные, точки – нет. Принтер и компьютер используют разную технологию вывода изображения – точки (не квадратные) и пиксели (квадратные). Для рядового пользователя разницы между DPI и PPI нет.
Какое значение DPI указывать при сканировании?
От значения DPI будет зависеть исходное разрешение картинки.
- Если DPI 300, а размер картинки 25,4 см на 50,8 см, то на компьютере у нас будет изображение размером 25,4*300/2,54=3000 пикселей на 50,8*300/2,54=6000 пикселей. Если на выходе получится дробное число пикселей, то компьютер их округлит.
- Если DPI 1200, а размер картинки 25,4 см на 50,8 см, то на компьютере у нас будет изображение размером 25,4*1200/2,54=12000 пикселей на 50,8*1200/2,54=24000 пикселей. Если на выходе получится дробное число пикселей, то компьютер их округлит.
Чем больше DPI при сканировании, тем больше разрешение, и тем больше можно просмотреть мелких деталей при приближении.
Какое значение DPI указывать при отправке в полиграфию?
Всё зависит от исходного разрешения картинки и того, каких размеров надо напечатать снимок (маленький календарик, большой баннер).
- Если разрешение картинки 1600 на 1200, то при DPI 300 можно напечатать рисунок размером 1600*2,54/300 = 13,5 см на 1200*2,54/300=10 см (я округлили).
- Если разрешение картинки 1600 на 1200, то при DPI 100 можно напечатать рисунок размером 1600*2,54/100 = 40,6 см на 1200*2,54/100=30,5 см.
Если DPI не играет роли для цифрового изображения, то почему при его изменении в Фотошопе меняется и разрешение?
При снятой галочке с пункта Интерполяция, разрешение не изменяется
Фотошоп позволяет изменить размер изображения несколькими способами. Если стоит галочка возле пункта Интерполяция, то при изменении значения DPI будет происходить и смена разрешения. Это удобно, поскольку позволяет быстро изменить разрешение в нужное число раз, без необходимости производить расчет. Есть разрешение 300 на 100 пикселей и DPI 72, хотим его увеличить в два раза, просто ставим DPI 142. Однако, интерполяция нужна в первую очередь для сглаживания рисунка при изменении его размеров.
Если мы снимем галочку с пункта Интерполяция, то разрешение не будет меняться при изменении DPI, качество и размер файла при разных DPI будут одинаковым.
Исполнитель хочет 300 DPI, а в изображении 72 DPI, Как быть?
Как было показано выше, зная разрешение и количество печатаемых точек на 2,54см (DPI), можно понять, какого размера будет напечатана картинка. Если исполнитель знает своё дело, то он должен выяснить, какого разрешения у вас картинка, какого размера вы хотите получить распечатку и какого качества. Всё, значение DPI – это уже проблема исполнителя, пусть считает себе сколько хочет. Максимум, что вы можете сделать – изменить разрешение картинки, как было показано выше. Если хотите, можете изменить DPI – с галочкой Интерполяция будет меняться и разрешение, без галочки – разрешение и размер останутся прежними, но в свойствах файла уже будет не 72DPI, а 300DPI.
Спасибо за внимание. Автор блога Владимир Баталий
Советую ещё почитать:
Ещё 7 сервисов для проверки позиций сайта в поисковой выдаче
Ещё 7 сервисов для проверки позиций сайта в поисковой выдаче
История современных настенных часов
История современных настенных часов- Основные свойства света и его роль в создании фотографий
Основные свойства света и его роль в создании фотографий
Начнём с главного: растровые изображения состоят из пикселей. На этом можно было закончить данную статью, но не всем этого достаточно, поэтому поговорим о заблуждениях и мифах, которые я встречал на практике.
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. Но это другая история.
«>
