Dlaczego kolory zdjęć i grafik wyglądają inaczej na mojej stronie?

Zacznij od trzech wersji tego samego obrazu

Zdjęcie wygląda dobrze w edytorze, ale na stronie jego kolory się zmieniają. Możesz mieć ochotę od razu je rozjaśnić lub zwiększyć intensywność kolorów. Najpierw jednak sprawdź, czy przyczyna leży w pliku, stronie czy ekranie.

Porównasz trzy wersje: oryginał, kopię zapisaną na potrzeby strony oraz obraz, który strona rzeczywiście wyświetla. Zapisywanie gotowej kopii z edytora często nazywa się eksportowaniem. Strona może później utworzyć własną, mniejszą lub bardziej skompresowaną wersję.

1. Zachowaj oryginał. Punktem odniesienia powinno być oryginalne zdjęcie lub plik projektu, który można edytować. Pracuj na kopiach, aby zawsze móc wrócić do oryginału.
2. Sprawdź zapisaną kopię. Otwórz ją w edytorze obok oryginału. Następnie przeciągnij zapisany plik do karty przeglądarki i sprawdź, jak wygląda.
3. Sprawdź kopię ze strony. Na komputerze kliknij obraz na opublikowanej stronie prawym przyciskiem myszy. Poszukaj opcji Otwórz grafikę w nowej karcie lub podobnej. Poniżej znajdziesz instrukcję na wypadek, gdyby taka opcja była niedostępna.
4. Porównuj ten sam fragment. Użyj tego samego ekranu, podobnej wielkości obrazu i podobnego tła. Wybierz fragment, na którym różnicę dobrze widać, na przykład tkaninę na zdjęciu produktu lub jednolity obszar logo.

Na razie nie zmieniaj jasności ani innych ustawień ekranu. Porównywanie jednej wersji na telefonie z drugą na laptopie utrudnia ustalenie, czy różnica wynika z pliku, czy z wyświetlacza.

Wybierz kolejny krok na podstawie tego, co widzisz

Czym jest profil kolorów i dlaczego ma znaczenie?

Obraz przechowuje kolory w postaci liczb. Profil kolorów mówi programowi, jak te liczby powinny zostać wyświetlone. Gdy profil jest zapisany wewnątrz pliku obrazu, nazywa się go profilem osadzonym. Możesz też spotkać określenie profil ICC, które odnosi się do standardu takich profili. Ich działanie opisuje FAQ organizacji International Color Consortium.

sRGB to powszechnie stosowany sposób określania kolorów obrazów na stronach internetowych. Możesz go traktować jako wspólny zestaw instrukcji dotyczących kolorów. To praktyczny wybór dla zwykłych zdjęć i grafik wyświetlanych na wielu różnych urządzeniach. Adobe RGB i Display P3 określają inne, szersze zakresy kolorów.

Jeśli brakuje informacji o kolorach lub program odczytuje je nieprawidłowo, obraz może wyglądać inaczej. Sam brak profilu nie oznacza jednak, że plik jest błędny. Obraz przygotowany wcześniej w sRGB może nadal wyglądać zgodnie z zamierzeniem. Problem pojawia się wtedy, gdy program przyjmuje niewłaściwe instrukcje dla zapisanych kolorów. Więcej wyjaśnia poradnik Adobe dotyczący profili obrazów.

Wyświetlacz również ma własny profil, który opisuje sposób odtwarzania kolorów na tym ekranie. To co innego niż profil obrazu: profil twojego monitora nie jest profilem, który należy dołączać do grafik dla wszystkich odwiedzających stronę.

Konwertuj kolory, zamiast tylko przypisywać inny profil

Edytory mogą udostępniać zarówno polecenie Assign Profile (przypisz profil), jak i Convert to Profile (konwertuj do profilu). Te polecenia działają inaczej:

• Assign Profile nadaje istniejącym wartościom kolorów inną interpretację. Liczby pozostają takie same, ale wygląd obrazu może się zmienić.
• Convert to Profile zmienia wartości liczbowe zgodnie z nowymi instrukcjami dotyczącymi kolorów, starając się zachować wygląd obrazu.

Aby utworzyć kopię sRGB obrazu, którego prawidłowo rozpoznanym profilem jest Adobe RGB, użyj konwersji. Samo przypisanie sRGB może zmienić kolory. Niektórych bardzo intensywnych kolorów nie da się dokładnie odtworzyć w węższym zakresie sRGB, dlatego sprawdź wynik. Oba polecenia opisuje instrukcja Adobe dotycząca zmiany profilu.

Jeśli nie znasz oryginalnego profilu, poszukaj źródłowego pliku projektu lub zapytaj jego autora. Nie wybieraj profilu tylko dlatego, że kolory stają się bardziej intensywne. Edytor mógł przyjąć jakiś profil podczas otwierania pliku. Profil, który teraz pokazuje, nie dowodzi więc, że właśnie z nim utworzono obraz.

Zapisz kopię na stronę z kolorami sRGB

Dla zwykłego zdjęcia lub grafiki na stronę przygotuj osobną kopię sRGB i zachowaj oryginał. Potrzebujesz edytora obsługującego konwersję kolorów, na przykład Photoshopa. Inny program może mieć opcję Convert to sRGB (konwertuj do sRGB) w ustawieniach eksportu. Nazwy poleceń Photoshopa poniżej pochodzą z jego angielskiej wersji.

1. Sprawdź profil oryginału. Zajrzyj do ustawień kolorów dokumentu. W Photoshopie otwórz Edit → Convert to Profile i sprawdź pole Source Space, czyli przestrzeń źródłową. Jeśli program ostrzega o brakującym profilu, sprawdź ustawienia pliku źródłowego lub zapytaj autora, zamiast wybierać profil na chybił trafił.
2. Wybierz sRGB dla kopii. W oknie konwersji Photoshopa wybierz sRGB IEC61966-2.1 jako profil docelowy. Włącz Preview, czyli podgląd, aby obejrzeć zmianę, a następnie ją zatwierdź. Adobe udostępnia pełną instrukcję dla Photoshopa.
3. Zapisz lub wyeksportuj kopię. Jeśli program ma opcję Embed Color Profile (osadź profil kolorów), dołącz właściwy profil sRGB. Konwersja zmienia wartości kolorów, a osadzenie profilu zapisuje instrukcje potrzebne do ich odczytania.
4. Otwórz ponownie zapisany plik. Sprawdź go w edytorze i przeglądarce przed przesłaniem na stronę. Nadaj kopii inną nazwę, aby łatwo ją rozpoznać.

Jeśli edytor nie udostępnia ustawień profili, sprawdź w jego dokumentacji, jak zapisuje kolory podczas eksportu. Gdy nie możesz samodzielnie zweryfikować ustawień, poproś projektanta o kopię sRGB przeznaczoną na stronę.

Format pliku wybierz osobno. JPG często sprawdza się przy zdjęciach, a PNG przy grafikach wymagających przezroczystego tła. Dostępne opcje opisuje poradnik o formatach obrazów na strony. Sama zmiana JPG na PNG nie naprawi błędnych informacji o kolorach.

Sprawdź, czy strona zmienia obraz

Jeśli zapisany plik wygląda dobrze, a wersja na stronie nie, sprawdź, co dzieje się po przesłaniu pliku. Kreator stron, wtyczka do obrazów lub usługa dostarczająca obrazy odwiedzającym może zmieniać ich wymiary, kompresować je albo zmieniać format.

Zacznij od obrazu otwartego w osobnej karcie. Zapisz tę kopię na komputerze i porównaj ją z przesłanym plikiem w tym samym edytorze. Mniejsze wymiary nie są dowodem na problem z kolorami, ale potwierdzają, że możesz porównywać różne wersje.

Jeśli nie możesz otworzyć samego obrazu

Narzędzia deweloperskie przeglądarki pozwalają sprawdzić, jaki plik pobiera strona. Najłatwiej zrobić to na komputerze:

1. Otwórz stronę, a następnie w menu przeglądarki poszukaj opcji Narzędzia deweloperskie (Developer tools). Zwykle znajduje się w sekcji Więcej narzędzi (More tools).
2. Wybierz kartę Sieć (Network) i odśwież stronę. Zobaczysz listę plików pobieranych przez stronę.
3. Włącz filtr obrazów, zwykle oznaczony jako Img lub Images. Wybierz plik i sprawdź kartę Podgląd (Preview), aby odnaleźć właściwy obraz.
4. Kliknij jego pozycję na liście prawym przyciskiem myszy i wybierz Otwórz w nowej karcie, jeśli ta opcja jest dostępna. W przeciwnym razie skopiuj adres pliku, nazywany też adresem URL, i wklej go do nowej karty przeglądarki. Zapisz obraz do porównania.

Działanie tych narzędzi pokazuje poradnik dotyczący panelu Network w Chrome. Nazwy i układ opcji mogą się różnić zależnie od przeglądarki i języka interfejsu.

Strona może wybierać inny plik na telefonie niż na komputerze. Więcej wyjaśnia poradnik o obrazach dostosowanych do różnych ekranów.

Jeśli nie zajmujesz się technicznymi ustawieniami strony, przekaż osobie odpowiedzialnej za nie zarówno przesłany plik, jak i kopię pobraną ze strony. Poproś o sprawdzenie, czy przetwarzanie usuwa profil kolorów lub nieprawidłowo konwertuje kolory. Po naprawie może być konieczne ponowne wygenerowanie kopii obrazów i wyczyszczenie pamięci podręcznej, w której strona przechowuje wcześniej utworzone pliki. Upewnij się, że oglądasz nową wersję.

Informacje o kolorach to co innego niż prywatne dane, takie jak lokalizacja GPS zdjęcia. Usunięcie wszystkich metadanych, czyli informacji zapisanych razem z obrazem, może usunąć również profil kolorów. Przygotowując kopię do udostępnienia, sprawdź zarówno prywatność, jak i wygląd. Ten proces opisuje poradnik o metadanych zdjęć.

Sprawdź efekty na stronie i jej tło

Jeśli obraz ze strony wygląda dobrze w osobnej karcie, ale inaczej na samej stronie, przyczyna może leżeć w jej wyglądzie. Przełącz stronę między jasnym i ciemnym motywem. Sprawdź też, czy obraz zmienia się po najechaniu na niego kursorem.

• Efekty zmieniające kolory lub jasność: motyw może przyciemniać obrazy, zmniejszać intensywność kolorów lub wyświetlać je w odcieniach szarości. Takie efekty często nazywa się filtrami. Ich działanie pokazuje opis filtrów w MDN.
• Częściowa przezroczystość: przez obraz lub otaczającą go sekcję może prześwitywać tło, przez co kolory wyglądają na wyblakłe. Odpowiada za to ustawienie krycia, czyli opacity. Może wpływać na obraz także wtedy, gdy zastosowano je do otaczającej go sekcji. Zobacz wyjaśnienie opacity w MDN.
• Warstwa nad obrazem: kolorowa nakładka lub efekt po najechaniu kursorem może zmieniać odcień obrazu bez zmiany jego pliku.
• Inne tło: obszary przezroczyste i częściowo przezroczyste łączą się wizualnie z tłem strony. Nawet jednolity, nieprzezroczysty kolor może być odbierany inaczej na białym tle niż na ciemnoszarym.

Obraz z przezroczystością porównuj na tym samym tle, którego użyto w projekcie. Jeśli wygląda źle tylko na konkretnym tle, sprawdź, czy projekt pasuje do tego miejsca. Możliwości opisuje poradnik o przezroczystym tle.

Poszukaj efektów dla obrazów w edytorze strony lub ustawieniach motywu. Jeśli potrzebujesz pomocy, powiedz twórcy strony, że sam obraz wygląda prawidłowo, i poproś o sprawdzenie filtrów, krycia oraz nakładek. Może tymczasowo wyłączać poszczególne reguły stylów, aby znaleźć przyczynę. Tę metodę opisuje poradnik MDN dotyczący diagnozowania problemów z CSS.

Porównuj ekrany w podobnych warunkach

Jeśli ten sam plik wygląda inaczej na dwóch ekranach, nie zmieniaj go podczas sprawdzania wyświetlaczy. Na wygląd wpływają między innymi ustawienia jasności, oświetlenie pomieszczenia i możliwości ekranu.

Tymczasowo wyłącz ustawienia, które celowo zmieniają wygląd ekranu. Funkcja Apple Night Shift nadaje mu cieplejszy odcień, a True Tone dostosowuje kolory i intensywność do światła w otoczeniu. Zobacz instrukcję Apple dotyczącą ustawień wyświetlacza. Na innych urządzeniach poszukaj filtra światła niebieskiego, trybu nocnego lub trybu żywych kolorów.

Jeśli cała strona ma cieplejsze lub bardziej intensywne kolory, warto zacząć od ustawień wyświetlacza. Jeśli różni się tylko jedno zdjęcie, wróć do jego informacji o kolorach i sprawdź, czy jest to obraz HDR. Więcej o HDR znajdziesz w odpowiedziach na pytania poniżej.

Gdy kolory produktów muszą być wiarygodne, lepszym punktem odniesienia jest skalibrowany wyświetlacz. Kalibracja dostosowuje ekran do określonego wzorca, a profil wyświetlacza opisuje sposób odtwarzania kolorów. Te zadania wyjaśnia FAQ organizacji ICC. Prawidłowe przygotowanie obrazu pomaga uzyskać spójny wygląd, ale nie sprawi, że ekran każdego odwiedzającego będzie pokazywał dokładnie to samo.

Przykład: zdjęcie produktu ma przygaszone kolory w przeglądarce

Wyobraź sobie zdjęcie produktu, którego oryginalny plik ma znany profil Adobe RGB. W edytorze wygląda prawidłowo, ale zapisana kopia ma przygaszone kolory w przeglądarce. To przykład hipotetyczny: utrata profilu nie wpływa na każdy obraz w ten sam sposób.

1. Znajdź pierwszą różnicę. Zapisany plik różni się już przed przesłaniem na stronę, więc zacznij od ustawień eksportu w edytorze.
2. Sprawdź, co zostało zapisane. W tym przykładzie eksport usunął profil Adobe RGB bez konwersji kolorów do sRGB.
3. Utwórz nową kopię z oryginału. Konwertuj ją do sRGB i zapisz z właściwymi informacjami o profilu.
4. Porównaj przed przesłaniem. Otwórz nową kopię w edytorze i przeglądarce na tym samym ekranie.
5. Sprawdź także stronę. Prześlij kopię i porównaj obraz, którego strona faktycznie używa.

Zwiększenie nasycenia, czyli intensywności kolorów, mogłoby poprawić wygląd pierwszej kopii w jednym programie, ale sprawić, że w innym kolory byłyby zbyt mocne. Poprawienie eksportu usuwa przyczynę problemu i pozwala zachować oryginał do innych zastosowań.

Użyj Pixilo po przygotowaniu kolorów

Gdy zapisana kopia ma już odpowiednie kolory, użyj Pixilo, aby dopasować jej wymiary do strony lub zmniejszyć rozmiar pliku. Zachowaj przygotowaną kopię, aby porównać ją z pobranym wynikiem.

Pixilo pozwala zmieniać wymiary i kompresować obrazy, ale nie ma ustawień do naprawiania lub wybierania profili kolorów. Przy zmianie wymiarów i wielu konwersjach formatów korzysta z przeglądarki, która ponownie rysuje obraz. Jeśli zależy ci na zachowaniu Display P3 lub właściwości HDR, dokładnie sprawdź wynik. Nie zakładaj, że każda operacja je zachowuje.

Zanim przetworzysz całą grupę, zacznij od jednego obrazu. Po pobraniu sprawdź ważne kolory i szczegóły, a następnie obejrzyj wynik na opublikowanej stronie. Jeśli różnica pojawia się dopiero po przesłaniu pliku, sprawdź przetwarzanie przez stronę lub efekty na niej.

Najczęściej zadawane pytania

Czy zawsze trzeba konwertować obrazy Display P3 do sRGB?

Nie. Display P3 obejmuje szerszy zakres kolorów i może być przydatny, gdy obsługują go strona oraz urządzenia odbiorców. Jeśli nie wiesz, jak twoja strona go przetwarza, kopia sRGB jest prostszym punktem wyjścia do zwykłej publikacji. Zachowaj oryginał. WebKit wyjaśnia, jak obrazy z profilami są dopasowywane do wyświetlacza.

Dlaczego najjaśniejsze obszary zdjęcia z telefonu stają się ciemniejsze?

Oryginał może być obrazem HDR, czyli mieć wysoki zakres dynamiki. Pozwala on pokazać większą różnicę między ciemnymi i jasnymi obszarami. Standardowa kopia może nie zachować tego wyglądu. Poszukaj opcji eksportu do standardowego zakresu dynamiki, określanego też jako SDR. Edytor może nazywać takie dostosowanie mapowaniem tonów (tone mapping): dopasowuje ono jasność HDR do standardowego zakresu. Obejrzyj wynik, zwłaszcza najjaśniejsze obszary i cienie. Sama zmiana profilu kolorów tego nie zrobi. Możliwości wyświetlania opisuje omówienie HDR w WebKit.

Czy PNG gwarantuje prawidłowe kolory?

Nie. PNG może zachować zapisane wartości pikseli bez zmian, ale program nadal musi je poprawnie odczytać. Zmiana formatu nie naprawi błędnego ani nieznanego profilu kolorów.

Co zrobić, jeśli projektant przesłał obraz CMYK?

CMYK wykorzystuje cyjan, magentę, żółty i czarny w druku. RGB wykorzystuje czerwony, zielony i niebieski w obrazach wyświetlanych na ekranie. Poproś o osobną kopię sRGB na stronę lub utwórz ją w edytorze obsługującym konwersję kolorów. Zachowaj oryginał przeznaczony do druku. Różnicę wyjaśnia poradnik Adobe o trybach kolorów.

Dlaczego logo nie pasuje do kodu koloru na stronie?

Zapis taki jak #336699 jest szesnastkowym kodem koloru. Na stronie internetowej określa kolor sRGB. Logo przygotowane według innych instrukcji dotyczących kolorów może wyglądać inaczej. Sprawdź też przezroczystość i efekty na stronie. Porównuj jednolity obszar wewnątrz logo, ponieważ wzdłuż jego krawędzi mogą występować częściowo przezroczyste piksele. Ten zapis opisuje dokumentacja kodów kolorów w MDN.