이 PNG 이미지가 Chrome 및 Firefox에서 Safari 및 IE와 다르게 표시되는 이유는 무엇입니까?

676

이 이미지를 확인하십시오 :

사과 또는 배

Chrome 및 Firefox에서는 배로 표시됩니다. 이제 저장하고 바탕 화면에 저장된 것을보십시오. 또한 Safari 또는 Internet Explorer 에서보십시오 . 사과로 표시됩니다!

이미지를 클릭하고 이동해보십시오. 사과가 나타납니다.

왜 이런 일이 발생합니까?

png gamma cross-browser

— ethree
소스

5

나는 파이어 폭스에서 이미지를 드래그하려고하면 조금은 투명 이미지가 사과 aPear의 모양 것 드래그

— ajax333221

1

이 사진을 어떻게 만들었습니까? 웹 사이트를 알려주시겠습니까?

— tumchaaditya

10

미래의 독자들에게는 현재 버전의 IE에서 수정 된 것으로 보입니다.

— Kat

2

그러나 여전히 데스크톱에 다운로드하여 사과를 볼 수 있으며 Firefox, Chrome에서 배로 볼 수 있습니다.

— Jet

535

일부 브라우저는 이미지 파일에 지정된대로 감마 보정을 수행하기 때문에 발생합니다.

수정되지 않은 이미지는 다음과 같습니다. 사과 그림의 "백색"픽셀에는 배의 그림이 포함되어 있으며 훨씬 높은 강도, 즉 매우 밝게 저장됩니다.

감마 보정 이미지는 다음과 같습니다. 배 사진의 "검은 색"픽셀은 사과의 사진을 포함하고 있으며, 보통의 강도로 저장되지만 감마 보정을 통해 거의 검은 색으로 축소됩니다.

내 화면에서 첫 번째 이미지의 흰색 픽셀 중 배를 희미하게 볼 수 있지만 두 번째 이미지에서는 사과가 주변의 검은 픽셀과 구별 할 수 없습니다.

(보정되지 않은 이미지는 훨씬 작은 범위의 색상 채널을 사용하기 때문에 감마 보정 된 배에 약간의 색상 밴딩이 나타날 수도 있습니다.)

PNG 이미지 파일에는 파일 감마 값 0.02를 지정하는 gAMA 청크가 포함되어 있습니다. 감마 보정없이 표시하면 뷰어는 "흰색"픽셀이 산재 된 사과를 볼 수 있으며 실제로는 원래의 강도 (강도)의 배입니다.

감마 보정과 함께 표시하면 뷰어에 실제로는 훨씬 낮은 감마 값으로 렌더링 된 사과 인 "검은 색"픽셀이있는 색상으로 보정 된 배가 나타납니다.

배를 표시하는 브라우저는 이미지에서 감마 보정을 수행하는 반면 사과를 표시하는 브라우저는 감마 보정을 수행하지 않고 리터럴 색상 값으로 표시합니다.

— mwfearnley
소스

14

주제에 권장되는 읽기 : 에릭 브라 소로 유명한 문서라는 사진 크기 조정에서 감마 오류 " .

— ulidtko

1

@ulidtko 이제 404입니다. 여기 웹 아카이브에 대한 사본이 있습니다.

— 콜 존슨

229

이것은 의견에 비해 너무 많았지 만 도움이되기를 바랍니다.

따라서이 문제는 브라우저가 감마 정보를 PNG로 해석하는 방식을 처리한다고 확신합니다. 꽤 재미있는 문제이며 처음에는 감마 정보의 모호성을 처리합니다.

PNG 감마“수정의 슬픈 이야기” 기사 는 문제, 치료법 및 기타 재미있는 사실에 대한 아주 좋은 요약을 제공합니다.

이를 통해 실제로 이미지에서 감마 정보를 제거 할 수 있습니다. pngcrush

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

감마 정보와 함께 :

나는 이것이 실제로 "답"이라고 말하지는 않겠지 만, 아마도 올바른 방향 일 것입니다. 색상 프로파일에 대해 많은 지식을 가진 사람이 더 공식적인 답변을 얻을 것이라고 확신합니다.

— 저스틴 반 호른
소스

3

그 두 이미지는 나에게 똑같아 보입니다. 사실에서 사과와 배 사이에서 깜박입니다. Safari 6.0.2

— Fraser Graham을 사용하고 있습니다.

1

여기에 제공된 명령의 마지막 두 요소가 있음을 유의 infile과 outfile: 예 pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png. 더 많은 정보 : hsivonen.fi/png-gamma

— fredrivett

40

이미지 의 감마 ( γ ) 변경은 감마 값을 다음과 같이 수정합니다.

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

초기 픽셀 값 (R, G, B)에 감마 기능을 적용한 후 화면에 표시되는 출력 픽셀 색상 (R ', G', B ')을 제공합니다 (R과 G, B는 0과 1 사이에서 정규화 됨) ).

이제 빨간색 채널을 예로 들어 보겠습니다.
경우 R = R0 + R1 구하여 것이다
R '= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ을

R0가 R1보다 훨씬 더 큰 경우, 당신은
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0 ,
그래서 R '≈ R0의 ^γ + γ R1 * R0 ^γ-1

이것은 0에 가까운 감마의 경우 ^R0γ가 우세 하다는 것을 의미합니다 . γ = 1의 경우
R '≈ R0 + R1

큰 감마의 경우 두 번째 용어가 지배적이므로 R0 = 배의 빨간색 구성 요소 및 R1 = 사과의 빨간색 구성 요소를 R1보다 훨씬 크게 R1보다 크게 설정하여 감마를 변경할 때 원하는 변형을 얻을 수 있습니다. 모니터 (또는 각 소프트웨어가 사용하는 특정 감마 곡선).

— WhitAngl
소스

9

픽셀을 반올림하지 않으며 ICC 색상 프로파일이 문제가되지 않습니다.

트릭 이미지이며 일부 브라우저는 감마 데이터가없는 PNG를 표시합니다. 해당 브라우저의 경우 한 가지가 표시되고 다른 브라우저의 경우 전체 이미지가 표시됩니다 (배는 배경에 숨겨져 있음).

브라우저가이 감마 데이터를 지원하는지에 따라 사과 / 배 트릭 이미지가 표시되거나 배가 표시됩니다.

— 유도
소스

1

뿐만 아니라 적절한 보정 디스플레이로 사진에서 더 자세한 내용을 볼 수 있으며 감마 / 밝기 / 대비가 높을 경우 사진의 한 이미지가 더 보이지 않게됩니다.

— nwgat
소스