यह PNG छवि Chrome और Firefox में Safari और IE की तुलना में अलग-अलग क्यों प्रदर्शित होती है?


676

इस छवि को देखें:

सेब या नाशपाती

क्रोम और फ़ायरफ़ॉक्स पर यह एक नाशपाती के रूप में दिखाई देगा। अब, इसे सहेजने का प्रयास करें और इसे अपने डेस्कटॉप पर सहेज कर देखें। इसके अलावा, सफारी या इंटरनेट एक्सप्लोरर में देखने का प्रयास करें । यह एक सेब के रूप में प्रदर्शित होगा!

छवि पर क्लिक करें और इसे चारों ओर ले जाने का प्रयास करें। आप देखेंगे कि सेब दिखाई देता है।

ऐसा क्यों होता है?


5
अगर मैं फ़ायरफ़ॉक्स पर छवि को बस थोड़ा खींचने की कोशिश करता हूं, तो पारदर्शी रूप से खींची गई छवि सेब के आकार को बनाएगी aPear
ajax333221

1
आपने यह चित्र कैसे बनाया? क्या आप मुझे किसी वेबसाइट की ओर इशारा कर सकते हैं?
तामचादित्य

10
भविष्य के पाठकों के लिए, यह IE के वर्तमान संस्करणों में तय किया गया लगता है।
कैट

2
लेकिन आप अभी भी इसे अपने डेस्कटॉप पर डाउनलोड कर सकते हैं और वहां सेब देख सकते हैं, और इसे फ़ायरफ़ॉक्स, क्रोम में नाशपाती के रूप में देख सकते हैं।
जेट

जवाबों:


535

ऐसा इसलिए होता है क्योंकि कुछ ब्राउज़र इमेज फाइल में बताए अनुसार गामा करेक्शन करते हैं।

यहाँ की अचूक छवि है। ऐप्पल तस्वीर में "व्हाइट-ईश" पिक्सल में नाशपाती की तस्वीर होती है, जो बहुत अधिक तीव्रता पर संग्रहीत होती है, अर्थात बहुत उज्ज्वल होती है।

यहाँ गामा-सुधारित छवि है। नाशपाती तस्वीर में "ब्लैक-ईश" पिक्सल में एक सेब की तस्वीर होती है, जिसे काफी सामान्य तीव्रता से संग्रहीत किया जाता है, लेकिन गामा सुधार के साथ काले रंग के करीब पहुंच जाता है।

मेरी स्क्रीन पर, मैं पहले चित्र में सफ़ेद पिक्सेल के बीच नाशपाती को देख सकता हूं, लेकिन दूसरी छवि में, ऐप्पल इसके चारों ओर काले पिक्सेल से अप्रभेद्य है।

(आप गामा-सही किए गए नाशपाती पर कुछ रंग बैंडिंग भी देख सकते हैं, क्योंकि अनधिकृत छवि रंग चैनलों की एक छोटी श्रृंखला का उपयोग कर रही है।)

PNG छवि फ़ाइल में 0.02 का एक फ़ाइल गामा मान निर्दिष्ट करने वाला एक गामा चंक होता है। जब गामा सुधार के बिना प्रदर्शित किया जाता है, तो दर्शक "व्हाइट" पिक्सल के साथ एक सेब को देखता है, जो वास्तव में इसकी मूल (उच्च) तीव्रता पर नाशपाती है।

जब गामा सुधार के साथ प्रदर्शित किया जाता है, तो दर्शक "ब्लैक" पिक्सल के साथ एक रंग-सुधारा हुआ नाशपाती देखता है जो वास्तव में बहुत कम गामा मूल्य पर प्रदान किया गया सेब है।

नाशपाती प्रदर्शित करने वाले ब्राउजर छवि पर गामा सुधार कर रहे हैं, जबकि सेब प्रदर्शित करने वाले ब्राउज़र गामा सुधार नहीं कर रहे हैं, लेकिन सिर्फ इसे अपने शाब्दिक रंग मूल्यों के साथ दिखा रहे हैं।


14
विषय पर एक पढ़ने की सिफारिश की: एरिक
ब्रास्सुर

1
@ulidtko यह अब 404 है। यहाँ पर वेब आर्काइव पर एक प्रति है
कोल जॉनसन

229

यह एक टिप्पणी के लिए थोड़ा बहुत था, लेकिन उम्मीद है कि यह मदद करता है।

इसलिए, मैं काफी निश्चित हूं कि यह मुद्दा पीएनजी के साथ गामा जानकारी की व्याख्या करने के तरीके से संबंधित है। यह एक बहुत ही मजेदार समस्या है और पहली जगह में गामा जानकारी की अस्पष्टता से संबंधित है।

लेख पीएनजी गामा "सुधार" की दुखद कहानी मुद्दों, उपचार और अन्य मजेदार तथ्यों का एक बहुत अच्छा सारांश प्रदान करता है।

उस के साथ, हम वास्तव में एक छवि से गामा जानकारी का उपयोग कर पट्टी कर सकते हैं pngcrush

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

तो गामा जानकारी के साथ और इसके बिना:

नाशपाती एक सेब

मैं वास्तव में यह नहीं कहूंगा कि यह "उत्तर" है, लेकिन अगर कुछ भी है तो यह सही दिशा में है। मुझे यकीन है कि रंग-प्रोफाइल के विषय में बहुत सारे ज्ञान के साथ कोई और अधिक औपचारिक प्रतिक्रिया के साथ आएगा।


3
उन दो छवियों मुझे एक ही लग रहे हैं, सवाल में मूल की तरह सेब और नाशपाती के बीच टिमटिमा। मैं सफारी 6.0.2 का उपयोग कर रहा हूं
फ्रेजर ग्राहम

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 को 0 और 1 के बीच सामान्यीकृत करता है) पर गामा फ़ंक्शन को लागू करने के बाद स्क्रीन पर प्रदर्शित आउटपुट पिक्सेल रंग (R ', G', B ') देता है। )।

अब, उदाहरण के लिए लाल चैनल लेते हैं।
तो आर = R0 + आर 1 , आप प्राप्त करेंगे
आर '= (R0 + आर 1) γ = R0 γ * (1 + आर 1 / R0) γ

यदि R0 आर 1 की तुलना में बहुत बड़ा है, तो आप
(1 + आर 1 / R0) γ ≈ 1 + γ आर 1 / R0 ,
तो आर '≈ R0 γ + γ
आर 1 * R0 γ-1

इसका मतलब यह है कि गामा 0 के करीब, R0 ma हावी है। = 1 के लिए, आपको
R '+ R0 + R1 मिलता है

एक बड़ा गामा, दूसरा शब्द हावी होता है, ताकि आप सीधे R0 = नाशपाती के लाल घटक और सेब के लाल घटक को सेट कर सकें, R0 R1 से बहुत बड़ा होने के साथ और आप गामा को बदलते समय वांछित बदलाव प्राप्त करेंगे। आपका मॉनिटर (या प्रत्येक सॉफ्टवेयर का उपयोग करने वाला विशेष गामा वक्र)।


9

यह राउंडिंग पिक्सल नहीं है और आईसीसी रंग प्रोफाइल मुद्दा नहीं है।

यह एक ट्रिक इमेज है, और कुछ ब्राउज़र गामा डेटा के बिना PNG प्रदर्शित करते हैं। उन ब्राउज़रों के लिए, आप एक चीज़ देखते हैं, और अन्य ब्राउज़रों के लिए आप पूरी छवि देखते हैं (पृष्ठभूमि में छिपी नाशपाती के साथ)।

मुझे या तो एक ऐप्पल / नाशपाती ट्रिक छवि दिखाई देती है, या मैं केवल नाशपाती देखता हूं, यह निर्भर करता है कि ब्राउज़र इस गामा डेटा का समर्थन करता है या नहीं।


1

साथ ही यह खुश है, आप चित्रों में अधिक विवरण देख सकते हैं एक उचित कैलिब्रेटेड डिस्प्ले के साथ और यदि गामा / चमक / कंट्रास्ट उच्च होने का तरीका है, तो आप देख सकते हैं कि चित्र में एक छवि अधिक छिपी हुई है

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.