Dlaczego zdjęcia po przesłaniu wyglądają na wyblakłe

Obrabiasz zdjęcie produktu, czerwień zgadza się z prawdziwym swetrem, wysyłasz plik do sklepu — a czerwień wraca jako ceglasta. Zielenie robią się oliwkowe. Otwierasz oryginał na tym samym ekranie: nadal idealny.

To nie kompresja i platforma wcale nie „psuje” Twoich obrazów. Zwykłą przyczyną jest niezgodność profilu koloru: plik opisuje swoje barwy w jednym języku, a strona odczytuje te liczby w innym.

Dlaczego te same liczby dają dwa różne kolory

Piksel to trzy liczby, a 200, 40, 40 jest konkretną czerwienią dopiero wtedy, gdy wiadomo, która przestrzeń barw ją mierzy. Display P3 wypycha czerwoną barwę podstawową dalej niż sRGB (x 0,68 wobec 0,64), więc ta sama trójka liczb opisuje głębszą czerwień. Adobe RGB (1998) zachowuje dokładnie te same czerwoną i niebieską barwę podstawową co sRGB, a rozciąga zieloną, więc jego dodatkowy zasięg leży w zieleniach i cyjanach. Tak czy inaczej dla przeglądarki zakładającej sRGB te liczby znaczą coś innego.

Profil to notatka mówiąca, jakiej miarki użyto, a internet w razie jej braku twardo wraca do wartości domyślnej. CSS Color Module Level 4 mówi to wprost: dla zgodności kolory podane w HTML oraz obrazy bez osadzonego profilu muszą być traktowane tak, jakby należały do przestrzeni sRGB, o ile nie określono inaczej. Twój plik bez etykiety nigdy nie określa inaczej — więc sRGB i już.

Jeśli więc Twój plik został wyeksportowany w Adobe RGB albo Display P3, a profil po drodze przepadł — proces, który przekodowuje obraz, konwerter, który usuwa metadane — te liczby z szerokiej gamy zostaną odczytane jako sRGB. Wciśnięte w węższe założenie wychodzą przygaszone i tak właśnie powstaje ten wyblakły wygląd. Które kolory ucierpią, zależy od źródła: plik w Adobe RGB odczytany jako sRGB traci wyrazistość w zieleniach i cyjanach, a plik w Display P3 gubi dodatkowo nasycone czerwienie. Barwy neutralne prawie się nie ruszają: na packshocie szarego produktu nie widać nic, na koralowym kostiumie kąpielowym — katastrofa.

Sprawdź, czy to plik, a nie Twój ekran

Ustaw oryginał i wysłany plik obok siebie w jednym oknie przeglądarki.

• Dobrze w programie graficznym, wyprane w przeglądarce: problem z profilem.
• Identycznie w przeglądarce, ale inaczej niż w programie graficznym: Twój edytor podgląda plik w przestrzeni roboczej, którą przeglądarka ignoruje.
• Źle tylko na Twoim telefonie albo na laptopie współpracownika: to różnica ekranów, a nie pliku.

Potem przeciągnij oryginał do karty przeglądarki — przeglądarki respektują osadzony profil. Jeśli lokalny plik wygląda dobrze, a przesłany nie, to ścieżka przesyłania odrzuciła etykietę.

Sprawdź, jaki profil niesie plik

• macOS: otwórz plik w Podglądzie i kliknij przycisk informacji na pasku narzędzi (albo naciśnij Command-I), a potem zajrzyj do zakładki Więcej informacji, w której wymieniony jest profil koloru obrazu.
• Photoshop: kliknij strzałkę na pasku stanu dokumentu i wybierz Profil dokumentu.
• Lightroom: lista Przestrzeń kolorów w oknie eksportu pokazuje to, co naprawdę wysłałeś dalej.
• Cokolwiek, na dowolnej platformie: ExifTool to wypisze — exiftool -ProfileDescription photo.jpg.

W internecie podejrzane jest wszystko poza sRGB. Nowsze iPhone'y rejestrują zdjęcia w szerokiej gamie kolorów i odpowiednio etykietują plik — Apple wymienia w specyfikacji aparatu rejestrowanie zdjęć i Live Photos w szerokiej gamie kolorów. Część telefonów z Androidem również oferuje opcję zapisu w szerokiej gamie, więc sprawdź plik.

Konwertuj do sRGB — nie usuwaj profilu i nie przypisuj go

Trzy podobnie brzmiące operacje robią zupełnie różne rzeczy.

• Usunięcie zdejmuje etykietę i zostawia liczby bez zmian: dane z szerokiej gamy na pewno zostaną teraz odczytane jako sRGB, co tylko pogarsza sprawę.
• Przypisanie zmienia etykietę bez przeliczania, przez co zmienia wygląd — zwykle na błędny.
• Konwersja przelicza każdy piksel tak, by kolor pozostał możliwie najbliższy oryginałowi w granicach mniejszej przestrzeni, a potem dołącza etykietę sRGB.

To właśnie konwersji potrzebujesz: w Photoshopie Edycja › Konwertuj do profilu, a w Lightroomie ustawienie Przestrzeń kolorów na sRGB przy eksporcie. Licz się z tym, że najbardziej nasycone barwy nieco się przesuną.

Przypadek odwrotny: zrzuty ekranu wyglądające zbyt jaskrawo

Ten sam mechanizm, tylko w drugą stronę. Zrzut ekranu z monitora o szerokiej gamie kolorów zapisuje wartości koloru w przestrzeni tego ekranu. Zrzuty robione na macOS są zwykle zapisywane z dołączonym profilem ekranu; inne narzędzia do zrzutów mogą go nie dołączać. Odczytane jako sRGB, te same liczby renderują się bardziej nasycone niż to, co widziałeś: neonowe zielenie, poparzona słońcem skóra. Rozwiązanie to samo.

Dlaczego ma to znaczenie przy podmianie tła

Tutaj niezgodny profil przestaje być subtelny. Połóż wycinek na kolorze swojej marki w remover.bg, a potem umieść ten obraz na stronie obok bloku w tym samym kodzie hex zapisanym w CSS: kolor z CSS renderuje się jako sRGB.

Jeśli obraz niesie inną etykietę, dwa odcienie jednego koloru staną obok siebie i nie zechcą się do siebie dopasować. Konwersja do sRGB przed przesłaniem usuwa tę niejednoznaczność u źródła.

Czysta biel przechodzi konwersję bez zmian, więc sama niezgodność nie sprawi, że plik obleje kontrolę białego tła na marketplace — cierpią na tym kolory produktu. Format też niczego nie ratuje: PNG, JPEG i WebP niosą profile i wszystkie zostają źle odczytane, gdy etykieta ginie — łącznie z przezroczystymi wycinkami.

Przed następnym przesłaniem

Ustaw przestrzeń kolorów eksportu na sRGB raz, w tym presecie, którego naprawdę używasz, a problem przestanie wracać. Potem sprawdź wyrywkowo jeden przesłany plik obok oryginału na jednym ekranie: jeśli kolory się trzymają, Twój proces jest czysty.