Dlaczego ten obraz PNG wyświetla się inaczej w Chrome i Firefox niż w Safari i IE?

Sprawdź ten obraz:

W Chrome i Firefox wyświetli się jako gruszka. Teraz spróbuj go zapisać i spójrz na zapisany na pulpicie. Spróbuj także przeglądać w przeglądarce Safari lub Internet Explorer . Wyświetli się jak jabłko!

Spróbuj kliknąć obraz i przenieść go. Zauważysz, że pojawia się jabłko.

Dlaczego to się dzieje?

Dzieje się tak, ponieważ niektóre przeglądarki wykonują korekcję gamma określoną w pliku obrazu.

Oto nieskorygowany obraz. „Białe” piksele na obrazie jabłka zawierają obraz gruszki, przechowywany z dużo większą intensywnością, tj. Bardzo jasną.

Oto obraz z korekcją gamma. „Czarno-czarne” piksele na obrazie gruszki zawierają obraz jabłka, przechowywany z dość normalną intensywnością, ale zmniejszony do niemal czarnego z korekcją gamma.

Na ekranie widzę lekko gruszkę wśród białych pikseli na pierwszym zdjęciu, ale na drugim zdjęciu jabłko jest nieodróżnialne od otaczających go czarnych pikseli.

(Na gruszce z korekcją gamma możesz również zobaczyć paski kolorów, ponieważ nieskorygowany obraz używa znacznie mniejszego zakresu kanałów kolorów).

Plik obrazu PNG zawiera fragment gAMA określający wartość gamma pliku wynoszącą 0,02. Wyświetlany bez korekcji gamma, widz widzi jabłko z przeplatanymi „białymi” pikselami, które w rzeczywistości są gruszką o jej pierwotnej (wysokiej) intensywności.

Podczas wyświetlania z korekcją gamma, widz widzi gruszkę z korekcją koloru z „czarnymi” pikselami, które w rzeczywistości są jabłkiem renderowanym przy znacznie niższej wartości gamma.

Przeglądarki wyświetlające gruszkę przeprowadzają korekcję gamma na obrazie, podczas gdy przeglądarki wyświetlające jabłko nie przeprowadzają korekcji gamma, a jedynie pokazują jej dosłowne wartości kolorów.

To było trochę za dużo na komentarz, ale mam nadzieję, że to pomaga.

Jestem więc całkiem pewien, że ten problem dotyczy sposobu, w jaki przeglądarki interpretują informacje o gamma za pomocą plików PNG. Jest to dość zabawny problem i przede wszystkim dotyczy dwuznaczności informacji gamma.

Artykuł Smutna historia PNG „Korekta” gamma zawiera bardzo ładne podsumowanie problemów, środków zaradczych i innych ciekawych faktów.

Powiedziawszy to, możemy faktycznie usunąć informacje gamma z obrazu za pomocą pngcrush

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB pear.png apple.png

Tak więc z informacjami gamma i bez nich:

Nie powiedziałbym, że to „odpowiedź”, ale jeśli już, to prawdopodobnie jest to właściwy kierunek. Jestem pewien, że ktoś z dużą wiedzą na temat profili kolorów i tak dalej udzieli bardziej formalnej odpowiedzi.

Zmiana gamma ( γ ) obrazu polega na modyfikacji wartości gamma w:

(R ', G', B ') = (R ^γ , G ^γ , B ^γ )

co daje kolor piksela wyjściowego (R ', G', B ') wyświetlany na ekranie po zastosowaniu funkcji gamma do początkowych wartości pikseli (R, G, B) (biorąc pod uwagę R, G i B znormalizowane między 0 a 1 ).

Teraz weźmy na przykład czerwony kanał.
Jeśli R = R0 + R1 , otrzymasz
R '= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ

Jeśli R0 jest znacznie większy niż R1, to masz
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0 ,
więc R '≈ R0 ^γ + γ R1 * R0 ^γ-1

Oznacza to, że dla gamma bliskiego 0 dominuje R0 ^γ . Dla γ = 1 otrzymujesz
R '≈ R0 + R1

W przypadku dużej gamma dominuje drugi termin, dzięki czemu można bezpośrednio ustawić R0 = czerwony składnik gruszki i R1 = czerwony składnik jabłka, z R0 znacznie większym niż R1 i uzyskasz pożądane zmiany przy zmianie gamma monitor (lub konkretną krzywą gamma używaną przez każde oprogramowanie).

Nie zaokrągla pikseli, a profile kolorów ICC nie stanowią problemu.

To podstępny obraz, a niektóre przeglądarki wyświetlają pliki PNG bez danych gamma. W przypadku tych przeglądarek widzisz jedną rzecz, aw przypadku innych przeglądarek pełny obraz (z gruszką ukrytą w tle).

Widzę obraz sztuczki jabłka / gruszki lub po prostu gruszkę, w zależności od tego, czy przeglądarka obsługuje te dane gamma.

tak się dzieje, możesz zobaczyć więcej szczegółów na zdjęciach z odpowiednio skalibrowanym wyświetlaczem, a jeśli gamma / jasność / kontrast jest zbyt wysoka, możesz zobaczyć, że jedno zdjęcie na zdjęciu jest ukryte więcej