Блог

Что скриншот хранит помимо пикселей

Автор InSnap · Опубликовано · screenshot, colour profile, icc, png metadata, display p3

Что скриншот хранит помимо пикселей

Скриншот — не просто картинка: в файле лежат цветовой профиль, значение DPI и пиксельная сетка. Что делает каждый из них, как это проверить и когда это важно.

Скриншот обычно описывают его размером: 1920 в ширину, 1080 в высоту, 2,1 МБ. Но это лишь одна из вещей, которые хранит файл. Под картинкой каждый скриншот несёт ещё пиксельную сетку, число DPI и — на современном Mac или на ноутбуке с Windows и широким цветовым охватом — цветовой профиль. Ничто из этого не меняет содержимое изображения. Зато всё это меняет то, как оно отображается в другом месте.

Большая часть путаницы вокруг скриншотов — «здесь выглядит иначе», «вставилось мельче», «цвета не те» — идёт от одного из этих трёх, а не от пикселей.

Пиксельная сетка на первом месте

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

На Mac с Retina вёрстка измеряется в точках, но отрисовывается вдвое большим числом пикселей, поэтому выделение 400 × 300 точек сохраняется как изображение 800 × 600 пикселей. Windows при масштабе 150 % — та же идея: вёрстка 1920 × 1080 снимается как 2880 × 1620 физических пикселей. Снимок не «слишком большой». В нём столько пикселей, сколько их реально было на экране.

Практическое правило: проверьте настоящее число пикселей, прежде чем решать, что что-то не так. В Finder выберите файл и нажмите Command-I. В Windows откройте «Свойства». Если изображение примерно вдвое больше ожидаемого, это снимок высокой плотности, и проблема, если она есть, дальше по цепочке.

ПРОСМОТР СНИМКА ПРИ СИЛЬНОМ УВЕЛИЧЕНИИ ПОКАЗЫВАЕТ, НАСТОЯЩАЯ ЛИ ДЕТАЛИЗАЦИЯ ИЛИ ОНА ПЕРЕСЭМПЛИРОВАНА

Число DPI и почему оно обычно врёт

Рядом с пикселями файл хранит значение разрешения, обычно 72 или 144 DPI. Это метаданные, а не настройка. Они говорят программам: «если тебе придётся это печатать или ставить в макет, считай, что здесь столько точек на дюйм».

Почти ни одна экранная программа не использует его, чтобы выбрать размер отображения, но некоторые — да. Программы вёрстки, Word, Keynote и часть экспортёров PDF прочитают его и отмасштабируют изображение соответственно. Поэтому один и тот же PNG вставляется в одном месте удобного размера, а в другом — вдвое крупнее: с пикселями ничего не произошло, изменилось лишь число, которому принимающее приложение решило верить.

Встроенный инструмент скриншотов macOS пишет 72 DPI независимо от дисплея, как и большинство программ захвата, включая InSnap. Поэтому снимок с Retina приходит как большое изображение с обычным числом DPI. Именно из-за этого сочетания презентация, которая уважает DPI, показывает его вдвое крупнее: она видит «72 точки на дюйм» и считает арифметику от реального числа пикселей.

Цветовой профиль — то, что чаще всего упускают

Это та часть, которая невидима, пока вдруг не станет заметной.

На дисплее с широким цветовым охватом — Mac с панелью P3 или ноутбук с Windows и широким цветовым охватом экрана — система не хранит цвета как обычный sRGB. Она хранит их закодированными для пространства Display P3 и прикрепляет к файлу профиль ICC, описывающий, какое это пространство. Программа, которая читает профиль, переводит цвета обратно в то, что вы видели. Программа, которая профиль игнорирует, читает сырые числа и показывает немного другое.

Насколько другое — зависит от цвета. Нейтральные серые почти не сдвигаются, потому что белый и чёрный находятся в одной и той же точке в обоих пространствах. Насыщенные цвета сдвигаются сильно: насыщенный синий может уехать больше чем на 50 из 255 по одному каналу.

Один и тот же цвет: хранится один раз, а показывается тремя способами

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

Насыщенные оттенки уплывают сильнее всего там, где профиль игнорируют

Что на самом деле делает правка с пересохранением

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

Проверка та же, что выше: до и после правки посмотрите, остался ли в файле встроенный профиль. На Mac это видно в Preview через «Инструменты › Показать инспектор», строка ICC Profile. Если до было «sRGB IEC61966-2.1» и после тоже — всё в порядке. Если до было «Display P3», а после пусто, инструмент его выбросил.

Что на самом деле меняет в файле правка с пересохранением

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

Что из трёх действительно важно

МетаданныеКогда важныКогда нет
Размеры в пикселяхВсегда; они определяют изображениеНикогда — они не меняются
Значение DPIВставка в макеты, Word, PDFПросмотр на экране, загрузка
Цветовой профильДисплеи с широким охватом, проверка цвета, передача дизайнаСнимки плоского интерфейса, чёрно-белый текст

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

Как InSnap обходится с каждым

InSnap снимает реальные пиксели устройства, поэтому на дисплее Retina выделение 400 × 300 точек сохраняется с тем числом пикселей, которое реально было на экране. Снимки конвертируются в sRGB в момент захвата, так что сохраняемые пиксели — это цвета, которые вы видели на своём дисплее, и любой просмотрщик трактует их одинаково. Отдельного переключателя «конвертировать в sRGB» нет, потому что конвертировать нечего: файл уже в sRGB.

Подпись выделения во время перетаскивания показывает размер в физических пикселях, так что реальное число пикселей видно до копирования или сохранения. Если позже нужна копия поменьше, удобная для макетов, в меню Настройки › Сохранение есть пункт Уменьшать снимки Retina до 1x: он аккуратно уменьшает изображение в момент записи файла.

КОПИРОВАНИЕ В ИСХОДНОМ РАЗМЕРЕ ОСТАВЛЯЕТ ФАЙЛ ЧЕСТНЫМ

Частые вопросы

Почему один и тот же скриншот выглядит по-разному в двух приложениях?

Обычно одна программа читает встроенный цветовой профиль, а другая его игнорирует. Если файл несёт профиль Display P3, а просмотрщик трактует его как sRGB без конвертации, насыщенные цвета выглядят иначе. Плоские белые, чёрные и серые области остаются прежними.

Ломает ли изменение размера цветовой профиль скриншота?

Само по себе — нет. Большинство инструментов изменения размера сохраняют профиль, если переносят его дальше. Плохой случай — инструмент, который полностью срезает метаданные при сохранении; это часто бывает в простых редакторах и некоторых веб-загрузчиках. Посмотрите строку ICC Profile в Preview или любом инспекторе до и после.

Почему снимок с Retina вставляется в презентацию вдвое крупнее?

В файле реальное число пикселей 2x-дисплея — примерно вчетверо больше площади в точках. Некоторые инструменты вёрстки читают метаданные DPI и уменьшают его, многие — нет. Экспорт из InSnap с включённым пунктом «Уменьшать снимки Retina до 1x» даёт для таких инструментов копию размера 1x.

PNG с профилем P3 больше того же PNG в sRGB?

Немного. Профиль ICC добавляет несколько килобайт. Данные пикселей обычно того же размера, потому что PNG сжимает и то и другое похоже. Эта разница — не повод срезать профиль.

Хранить скриншоты в sRGB или в широком охвате дисплея?

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

Следующий скриншот — в одном сочетании клавиш.

macOS 14.4+ (Apple Silicon и Intel) · Windows 10+ (64-разрядная)