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

676

Sprawdź ten obraz:

Jabłko lub Gruszka

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?

etree
źródło
5
jeśli spróbuję trochę przeciągnąć obraz na Firefox, przezroczysty przeciągnięty obraz zmieni kształt jabłka aPear
ajax333221,
1
Jak stworzyłeś to zdjęcie? Czy możesz wskazać mi stronę internetową?
tumchaaditya
10
Dla przyszłych czytelników wydaje się, że zostało to naprawione w bieżących wersjach IE.
Kat
2
Ale nadal możesz pobrać go na pulpit i zobaczyć tam jabłko i przeglądać w Firefox, Chrome jak gruszka.
Jet

Odpowiedzi:

535

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.

mwfearnley
źródło
14
Zalecana lektura na ten temat: słynny artykuł Erica Brasseura zatytułowany „Błąd gamma w skalowaniu obrazu .
ulidtko
1
@ulidtko To jest teraz 404. Oto kopia w archiwum internetowym .
Cole Johnson
229

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:

Gruszka jabłko

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.

Justin Van Horne
źródło
3
te dwa obrazy wyglądają dla mnie tak samo, migocząc między jabłkiem i gruszką, tak jak oryginał w pytaniu. Korzystam z Safari 6.0.2
Fraser Graham,
1
Zauważ, że dwa ostatnie elementy podanego tutaj polecenia to infilei outfile: np pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png. Więcej informacji: hsivonen.fi/png-gamma
fredrivett
40

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).

WhitAngl
źródło
9

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.

Jodo
źródło
1

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

nwgat
źródło