เหตุใดรูปภาพ PNG นี้จึงแสดงใน Chrome & Firefox แตกต่างจากใน Safari และ IE

ลองดูภาพนี้:

ใน Chrome และ Firefox มันจะแสดงเป็นลูกแพร์ ตอนนี้ลองบันทึกแล้วดูที่บันทึกไว้บนเดสก์ท็อปของคุณ ยังพยายามดูในSafariหรือInternet Explorer มันจะแสดงเป็นแอปเปิ้ล!

ลองคลิกที่ภาพแล้วเลื่อนไปรอบ ๆ คุณจะสังเกตเห็นแอปเปิ้ลปรากฏขึ้น

ทำไมสิ่งนี้ถึงเกิดขึ้น

มันเกิดขึ้นเพราะเบราว์เซอร์บางตัวทำการแก้ไขแกมม่าตามที่ระบุในไฟล์ภาพ

นี่คือภาพที่ไม่ถูกแก้ไข พิกเซล "white-ish" ในภาพแอปเปิ้ลมีรูปลูกแพร์ที่เก็บไว้ที่ความเข้มสูงกว่ามากเช่นสว่างมาก

นี่คือรูปภาพที่แก้ไขแกมม่า พิกเซล "black-ish" ในภาพลูกแพร์มีรูปภาพของแอปเปิ้ลซึ่งเก็บไว้ที่ระดับความเข้มปกติค่อนข้างมาก แต่ลดขนาดลงจนใกล้สีดำด้วยการแก้ไขแกมม่า

บนหน้าจอของฉันฉันเห็นลูกแพร์เบา ๆ ท่ามกลางพิกเซลสีขาวในภาพแรก แต่ในภาพที่สองแอปเปิ้ลแยกไม่ออกจากพิกเซลสีดำรอบ ๆ

(คุณอาจเห็นแถบสีบางส่วนบนลูกแพร์ที่แก้ไขด้วยแกมม่าเนื่องจากรูปภาพที่ไม่ถูกแก้ไขกำลังใช้ช่วงสีที่มีขนาดเล็กกว่ามาก)

ไฟล์ภาพ PNG มีก้อนไฟล์ gAMA ซึ่งระบุค่าแกมม่าไฟล์เป็น 0.02 เมื่อแสดงโดยไม่มีการแก้ไขแกมม่าผู้ชมจะเห็นแอปเปิ้ลที่มีพิกเซล "สีขาว" กระจายอยู่ซึ่งจริง ๆ แล้วเป็นลูกแพร์ที่ระดับความเข้มดั้งเดิม (สูง)

เมื่อแสดงด้วยการแก้ไขแกมม่าผู้ชมจะเห็นลูกแพร์ที่แก้ไขสีด้วยพิกเซล "ดำ" ซึ่งจริงๆแล้วแอปเปิ้ลแสดงผลด้วยค่าแกมม่าที่ต่ำกว่ามาก

เบราว์เซอร์ที่แสดงลูกแพร์กำลังทำการแก้ไขแกมม่าบนภาพในขณะที่เบราว์เซอร์ที่แสดงแอปเปิ้ลไม่ทำการแก้ไขแกมมา แต่แสดงด้วยค่าสีที่แท้จริง

นี่เป็นความคิดเห็นเล็ก ๆ น้อย ๆ แต่หวังว่ามันจะช่วยได้

ดังนั้นฉันค่อนข้างมั่นใจว่าปัญหานี้เกี่ยวข้องกับวิธีที่เบราว์เซอร์ตีความข้อมูลแกมม่าด้วย PNG มันเป็นปัญหาที่ค่อนข้างสนุกและเกี่ยวข้องกับความคลุมเครือของข้อมูลแกมม่าตั้งแต่แรก

บทความThe Sad Story ของ PNG Gamma“ การแก้ไข” นำเสนอบทสรุปที่ดีมากของปัญหาการเยียวยาและข้อเท็จจริงสนุกสนานอื่น ๆ

จากที่กล่าวมาเราสามารถดึงข้อมูลแกมม่าออกจากภาพโดยใช้ pngcrush

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

ดังนั้นด้วยข้อมูลแกมมาและไม่มี:

ฉันจะไม่พูดว่านี่คือ "คำตอบ" แต่หากมีสิ่งใดที่อาจเป็นไปในทิศทางที่ถูกต้อง ฉันแน่ใจว่าคนที่มีความรู้มากมายเกี่ยวกับโปรไฟล์สีและอื่น ๆ จะมาพร้อมกับการตอบสนองที่เป็นทางการมากขึ้น

การเปลี่ยนแกมม่า ( γ ) ของภาพนั้นประกอบไปด้วยการปรับเปลี่ยนแกมม่าตามค่าใน:

(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 = องค์ประกอบสีแดงของแอปเปิลได้โดยตรงด้วย R0 ที่มีขนาดใหญ่กว่า R1 และคุณจะได้รับรูปแบบที่ต้องการเมื่อเปลี่ยนแกมม่าของ จอภาพของคุณ (หรือกราฟแกมม่าเฉพาะที่แต่ละซอฟต์แวร์ใช้)

ไม่ใช่การปัดเศษพิกเซลและโปรไฟล์สี ICC ไม่ใช่ปัญหา

มันเป็นภาพลวงและเบราว์เซอร์บางตัวแสดง PNGs โดยไม่มีข้อมูลแกมม่า สำหรับเบราว์เซอร์เหล่านั้นคุณจะเห็นสิ่งหนึ่งและสำหรับเบราว์เซอร์อื่น ๆ ที่คุณเห็นภาพเต็ม (โดยที่ลูกแพร์ซ่อนอยู่ในพื้นหลัง)

ฉันเห็นภาพเคล็ดลับแอปเปิ้ล / ลูกแพร์หรือฉันเห็นลูกแพร์ขึ้นอยู่กับว่าเบราว์เซอร์รองรับข้อมูลแกมม่านี้หรือไม่

คุณสามารถดูรายละเอียดเพิ่มเติมในรูปภาพด้วยการปรับเทียบที่เหมาะสมและหากแกมม่า / ความสว่าง / ความเปรียบต่างสูงไปถึงระดับสูงคุณจะเห็นภาพหนึ่งภาพในภาพถูกซ่อนอยู่มากขึ้น