Рассчитать размер пикселя

Физический размер пикселя не является постоянной величиной. Один и тот же элемент в 100 px может занимать 2 мм на смартфоне и 20 мм на проекторе. Чтобы понять реальные габариты изображения, необходимо рассчитать размер пикселя с учётом плотности экрана или требований печати.

Основная единица измерения плотности – PPI (Pixels Per Inch). Она определяет, сколько точек укладывается в один дюйм (25,4 мм). Ниже представлен калькулятор для быстрого перевода пикселей в миллиметры и сантиметры, а также формулы для ручного расчёта.

Формула расчёта размера пикселя

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

Формула выглядит так:

Где:

• 25,4 – количество миллиметров в одном дюйме.
• PPI – плотность пикселей экрана или файла.

Если нужно рассчитать размер изображения целиком, умножьте результат на количество пикселей в ширине или высоте:

Пример: стандартный монитор У монитора диагональю 24 дюйма с разрешением 1920×1080 плотность составляет примерно 92 PPI. Размер одного пикселя: $25{,}4 / 92 \approx 0{,}27$ мм. Изображение шириной 500 px будет occupy $\approx 135$ мм (13,5 см).

От чего зависит размер пикселя на экране?

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

1. Аппаратный пиксель – физическая ячейка матрицы дисплея. Его размер неизменен для конкретного устройства.
2. CSS-пиксель (логический) – относительная единица, используемая вёрсткой.

На экранах высокой чёткости (Retina, OLED) один CSS-пиксель кодируется несколькими аппаратными пикселями (2×2 или 3×3). Это свойство называется Device Pixel Ratio (DPR).

Для дизайнера важнее учитывать CSS-пиксели, так как именно они определяют отображение на сайте. Если файл создан с плотностью 72 PPI, он будет отображаться корректно на большинстве десктопов. Для мобильных устройств плотность исходного макета часто удваивают или утраивают (@2x, @3x), чтобы при сжатии до размера CSS-пикселя не терялась детализация.

Стандартные значения плотности пикселей

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

При экспорте изображений из Photoshop или Figma для веба сохраняйте файл в 72 PPI или 96 PPI. Это метаданные для браузера; реальный размер определяется количеством пикселей по вертикали и горизонтали. Для печати значение 300 PPI критично – при меньшем значении появятся «лесенки» и размытие на бумажном носителе.

Примеры расчёта для задач дизайна

Визитка 90×50 мм

Чтобы узнать, сколько пикселей нужно заложить в макет для качественной печати:

1. Переводим миллиметры в дюймы: $90 / 25{,}4 \approx 3{,}54$ дюйма (ширина).
2. Умножаем на стандарт печати 300 DPI: $3{,}54 \times 300 \approx 1063$ пикселя.
3. Итоговое разрешение файла должно быть не менее 1063×591 px.

Иконка для iOS/Android

Платформы требуют предоставления наборов иконок для разных масштабов. Если базовый размер иконки 48×48 CSS-px:

• @1x (обычный экран): Файл 48×48 px.
• @2x (Retina): Файл 96×96 px.
• @3x (Super Retina): Файл 144×144 px.

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

Ошибки при работе с разрешением

Избегание распространённых ошибок поможет сохранить качество графики.

• Растягивание растрового изображения. Если увеличить картинку в редакторе без изменения количества пикселей (интерполяции), плотность PPI упадёт. При печати это приведёт к потере качества.
• Путаница с 72 DPI. В старых версиях ПО 72 DPI воспринималось как физическая константа. В 2026 году экраны имеют разную плотность. Сравнивайте картинки только по их размерам в пикселях (1920×1080), а не по значению DPI в свойствах файла.
• Сжатие для веба с потерей PPI-меток. При загрузке фото на сайт некоторые CMS удаляют метаданные. Это нормально, так как браузеры игнорируют PPI и отображают изображение исходя из контейнера в коде страницы и количества пикселей.

Для проверки реальных размеров вашего экрана можно воспользоваться скриптами анализа характеристик устройства, указанными в документации W3C о медиа-запросах 1.