Защо снимките ви изглеждат избелели след качване

Редактирате продуктова снимка, червеното съвпада с истинския пуловер, качвате я в магазина си — и червеното се връща като керемидено. Зелените стават маслинени. Отваряте оригинала на същия екран: все още перфектен.

Това не е компресия и платформата не „съсипва" изображенията ви. Обичайната причина е несъответствие в цветовия профил: файлът описва цветовете си на един език, а страницата чете тези числа на друг.

Защо едни и същи числа дават два различни цвята

Пикселът е три числа, а 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 — не премахвайте и не присвоявайте

Три сходно звучащи операции правят много различни неща.

• Премахване (strip) маха етикета и оставя числата непокътнати: данни за широк гамут, вече гарантирано четени като sRGB, което влошава нещата.
• Присвояване (assign) сменя етикета без преизчисляване, което променя вида — обикновено в нещо грешно.
• Конвертиране (convert) преизчислява всеки пиксел, така че цветът да остане възможно най-близък в рамките на по-малкото пространство, и след това прикача маркировката sRGB.

Конвертирането е това, което ви трябва: Edit › Convert to Profile в Photoshop или Colour Space, зададено на sRGB при експорт в Lightroom. Очаквайте най-наситените ви цветове да се изместят леко.

Обратният случай: екранни снимки, които изглеждат прекалено ярки

Същият механизъм, обратна посока. Екранна снимка от дисплей с широк гамут записва стойности в пространството на този дисплей. Екранните снимки в macOS обикновено се запазват с прикачен профил на дисплея; други инструменти за заснемане може да не прикачват такъв. Прочетени обратно като sRGB, същите числа се показват по-наситени от това, което сте видели: неоново зелени тонове, изгоряла от слънцето кожа. Същото решение.

Защо това има значение, когато сменяте фона

Тук несъответстващият профил престава да е незабележим. Поставете изрязания обект върху цвета на марката ви в remover.bg, после сложете това изображение на страница до блок със същия hex в CSS: цветът от CSS се показва като sRGB.

Ако изображението носи различна маркировка, два нюанса на един цвят стоят един до друг и отказват да съвпаднат. Конвертирането в sRGB преди качване премахва двусмислието още при източника.

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

Преди следващото ви качване

Задайте цветовото пространство за експорт на sRGB веднъж, в пресета, който реално използвате, и проблемът спира да се повтаря. После проверете едно качено изображение спрямо оригинала на един екран: ако цветовете се запазват, конвейерът ви е чист.