Почему фото становятся блёклыми после загрузки

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

Это не сжатие, и площадка не «портит» ваши изображения. Обычная причина — несовпадение цветовых профилей: файл описывает свои цвета на одном языке, а страница читает эти числа на другом.

Почему одни и те же числа дают два разных цвета

Пиксель — это три числа, и 200, 40, 40 становится конкретным красным только тогда, когда известно, какое цветовое пространство их измеряет. Display P3 отодвигает основной красный дальше, чем sRGB (x 0,68 против 0,64), поэтому та же тройка описывает более глубокий красный. Adobe RGB (1998) сохраняет ровно те же основные красный и синий, что и sRGB, а растягивает вместо этого зелёный, так что его дополнительный запас лежит в зелёных и голубых. В любом случае для браузера, который предполагает sRGB, эти числа значат совсем другое.

Профиль — это пометка о том, какой линейкой мерили, и без неё веб жёстко берёт значение по умолчанию. CSS Color Module Level 4 говорит об этом прямо: ради совместимости цвета, заданные в HTML, и изображения без встроенного профиля следует считать принадлежащими цветовому пространству sRGB, если не указано иное. Ваш загруженный файл без профиля иного не указывает — значит, sRGB.

Поэтому, если файл экспортирован в Adobe RGB или Display P3, а профиль по дороге потерялся — конвейер, который перекодирует, конвертер, который вырезает метаданные, — эти числа с широким цветовым охватом прочитаются как sRGB. Втиснутые в более узкое допущение, они выходят обесцвеченными — это и есть ваша блёклая картинка. Какие именно цвета пострадают, зависит от источника: файл Adobe RGB, прочитанный как sRGB, теряет силу в зелёных и голубых, а файл Display P3 вдобавок роняет насыщенные красные. Нейтральные тона почти не двигаются: на сером пэкшоте — ничего, на коралловом купальнике — катастрофа.

Убедитесь, что дело в файле, а не в вашем экране

Поставьте оригинал и загруженную копию рядом в одном окне браузера.

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

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

Узнайте, какой профиль несёт файл

• macOS: откройте файл в «Просмотре» и нажмите на панели инструментов кнопку информации (или Command-I), затем перейдите на вкладку «Подробнее» — там указан цветовой профиль изображения.
• Photoshop: нажмите стрелку в строке состояния документа и выберите «Профиль документа».
• Lightroom: выпадающий список «Цветовое пространство» в диалоге экспорта и есть то, что вы на самом деле отдали.
• Что угодно, любая платформа: ExifTool покажет его — exiftool -ProfileDescription photo.jpg.

Для веба подозрительно всё, кроме sRGB. Свежие iPhone снимают в расширенном цветовом охвате и соответственно помечают файл — в характеристиках камеры Apple указывает «съёмку фото и Live Photos в расширенном цвете». У некоторых Android-телефонов тоже есть режим съёмки с широким охватом, так что проверьте файл.

Конвертируйте в sRGB — не удаляйте профиль и не назначайте его

Три похожие по названию операции делают совершенно разные вещи.

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

Нужна вам именно конвертация: в Photoshop это «Редактирование › Преобразовать в профиль», в Lightroom — «Цветовое пространство» экспорта, выставленное в sRGB. Будьте готовы, что самые насыщенные цвета слегка сдвинутся.

Обратный случай: скриншоты выглядят слишком яркими

Тот же механизм, только в обратную сторону. Скриншот с экрана с широким цветовым охватом записывает цветовые значения в пространстве этого экрана. Скриншоты, сделанные в macOS, обычно сохраняются вместе с профилем дисплея; другие программы захвата могут его и не приложить. Прочитанные обратно как sRGB, те же числа рисуются более насыщенными, чем то, что вы видели: неоновая зелень, обгоревшая на солнце кожа. Лечится так же.

Почему это важно, когда вы заменяете фон

Здесь несовпадение профиля перестаёт быть незаметным. Поставьте вырезку на свой фирменный цвет в remover.bg, а потом положите это изображение на страницу рядом с блоком того же hex-кода в CSS: цвет из CSS отрисуется как sRGB.

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

Чистый белый переживает конвертацию без изменений, так что одно только несовпадение не завалит требования маркетплейса к белому фону — страдают именно цвета товара. И формат тут не спасение: PNG, JPEG и WebP несут профили все, и все прочитываются неверно, когда тег теряется, включая прозрачные вырезки в PNG.

Перед следующей загрузкой

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