Чому фото виглядають блідими після завантаження

Ви редагуєте фото товару, червоний збігається з реальним светром, ви завантажуєте його у свою вітрину — і червоний повертається цегляним. Зелені стають оливковими. Відкрийте оригінал на тому самому екрані: досі бездоганний.

Це не стиснення, і платформа не «псує» ваші зображення. Звична причина — невідповідність колірного профілю: файл описує свої кольори однією мовою, а сторінка читає ті самі числа іншою.

Чому ті самі числа дають два різні кольори

Піксель — це три числа, і 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: відкрийте файл у Preview і натисніть кнопку Info на панелі інструментів (або Command-I), а тоді подивіться на вкладку More info, де вказано колірний профіль зображення.
• Photoshop: натисніть стрілку в рядку стану документа й виберіть Document Profile.
• Lightroom: випадний список Colour Space у діалозі експорту — це те, що ви насправді відправили.
• Будь-що, будь-яка платформа: ExifTool його виводить — exiftool -ProfileDescription photo.jpg.

Для вебу підозрюваним є будь-що, крім sRGB. Свіжі iPhone знімають фото в широкому колірному охопленні й відповідно тегують файл — Apple вказує «wide color capture for photos and Live Photos» у характеристиках камери. Деякі Android-телефони теж пропонують зйомку з широким колірним охопленням, тож перевіряйте файл.

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

Три схожі на слух операції роблять зовсім різні речі.

• Видалити прибирає етикетку й лишає числа як є: широкогамутні дані тепер гарантовано читатимуться як sRGB, а від цього стає тільки гірше.
• Призначити перевішує етикетку без перерахунку, що змінює вигляд, зазвичай на хибний.
• Конвертувати перераховує кожен піксель, щоб колір лишився настільки близьким, наскільки дозволяє менший простір, а тоді додає тег sRGB.

Конвертація — саме те, що вам потрібно: Edit › Convert to Profile у Photoshop або Colour Space, виставлений на sRGB, в експорті Lightroom. Очікуйте, що найнасиченіші кольори трохи зсунуться.

Зворотний випадок: скриншоти, які виглядають надто яскраво

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

Чому це важливо, коли ви замінюєте фон

Тут невідповідний профіль перестає бути дрібницею. Покладіть вирізку на свій фірмовий колір у remover.bg, а тоді поставте це зображення на сторінку поруч із блоком того самого hex у CSS: колір із CSS малюється як sRGB.

Якщо зображення несе інший тег, два відтінки одного кольору стоять поруч і відмовляються збігтися. Конвертація в sRGB перед завантаженням прибирає цю двозначність у самому джерелі.

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

Перед наступним завантаженням

Виставте колірний простір експорту на sRGB один раз — у тому пресеті, яким ви справді користуєтеся, — і проблема перестане повторюватися. Тоді вибірково звірте одне завантаження з оригіналом на одному екрані: якщо кольори тримаються, ваш конвеєр чистий.