Bu PNG görüntüsü neden Chrome ve Firefox’ta Safari ve IE’den farklı olarak görüntüleniyor?

Bu resmi kontrol et:

Chrome ve Firefox'ta bir armut olarak görünecektir. Şimdi, kaydetmeyi deneyin ve masaüstünüzde kayıtlı olanlara bakın. Ayrıca, Safari veya Internet Explorer’da görüntülemeyi deneyin . Bir elma olarak gösterecektir!

Resme tıklayıp hareket ettirmeyi deneyin. Elmanın göründüğünü fark edeceksiniz.

Bu neden oluyor?

Bunun nedeni, bazı tarayıcıların, görüntü dosyasında belirtildiği şekilde gama düzeltmesini gerçekleştirmesidir.

İşte düzeltilmemiş görüntü. Elma resmindeki "beyaz-ish" pikselleri, çok daha yüksek bir yoğunlukta, yani çok parlak bir şekilde saklanan bir armut resmini içerir.

İşte gama düzeltmeli görüntü. Armut resmindeki "siyah-ish" pikselleri, oldukça normal bir yoğunlukta depolanmış, ancak gama düzeltmesiyle siyaha yakınlaşan bir elmanın resmini içerir.

Ekranımda, ilk resimde beyaz piksellerin arasında hafifçe armut görebiliyorum, ancak ikinci resimde elmanın etrafındaki siyah piksellerden ayırt edilemez.

(Düzeltilmemiş görüntü renk kanallarının çok daha küçük bir aralığını kullandığından, gamma düzeltilmiş armutta da biraz renk bandı görebilirsiniz.)

PNG görüntü dosyası, 0.02 dosya gama değerini belirten bir gAMA yığınını içerir. Gama düzeltmesi olmadan görüntülendiğinde, izleyici, aslında orijinal (yüksek) yoğunluğundaki armut olan "beyaz" pikselleri serpiştirilmiş bir elmayı görür.

Gama düzeltmesi ile görüntülendiğinde, izleyici, aslında daha düşük bir gama değerinde işlenen elma olan "siyah" piksellere sahip renk düzeltmeli bir armut görür.

Armut görüntüleyen tarayıcılar görüntü üzerinde gama düzeltmesi gerçekleştirirken, elmayı görüntüleyen tarayıcılar gama düzeltmesi yapmıyor, sadece gerçek renk değerleri ile gösteriyorlar.

Bu bir yorum için biraz fazla oldu, ama umarım yardımcı olur.

Dolayısıyla, bu sorunun tarayıcıların gama bilgilerini PNG'lerle yorumlama şekilleriyle ilgilendiğinden oldukça eminim. Bu oldukça eğlenceli bir problem ve ilk başta gamma bilgisinin belirsizliği ile ilgileniyor.

PNG Gama Sad Düzeltme makalesi “Düzeltme” , sorunların, çözüm yollarının ve diğer eğlenceli gerçeklerin çok güzel bir özetini sunar.

Bununla, gama bilgisini kullanarak bir görüntüden gerçekten soyabiliriz. pngcrush

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

Yani gama bilgileri ve onsuz:

Gerçekten bunun "cevap" olduğunu söyleyemem, ama bir şey olursa doğru yönde olabilir. Renk profilleri ile ilgili çok fazla bilgisi olan birinin daha resmi bir cevap vereceğinden eminim.

Gama (değiştirme γ bir görüntünün) değeri gama modifiye oluşur:

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

gama fonksiyonunu başlangıç ​​piksel değerlerine (R, G, B) uyguladıktan sonra ekranda görüntülenen çıkış piksel rengini (R ', G', B ') verir (R, G ve B 0 ile 1 arasında normalize edilirse) ).

Şimdi, örneğin kırmızı kanala geçelim.
Eğer R, = R0 + R1 , aşağıdaki sonuçlar elde edilir
R'= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^y

Eğer R0, R1'den çok daha büyükse, o zaman
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0’a sahip olursunuz ,
yani R '≈ R0 ^γ + γ R1 * R0 ^γ-1

Bu, 0'a yakın bir gamma için ^R0'ın baskın olduğu anlamına gelir . Γ = 1 için
R '≈ R0 + R1 olur

Büyük bir gama için, ikinci terim baskın hale gelir, böylece doğrudan R0 = armutun kırmızı bileşenini ve R1 = elmanın kırmızı bileşenini doğrudan R1'den R1'den çok daha büyük olacak şekilde kurabilir ve gama değiştirirken istediğiniz varyasyonları elde edersiniz. monitörünüz (veya her yazılımın kullandığı belirli gama eğrisi).

Yuvarlama pikselleri değil ve ICC renk profilleri sorun değil.

Bu aldatıcı bir görüntü ve bazı tarayıcılar gama verisi olmayan PNG'leri gösteriyor. Bu tarayıcılar için bir şey görürsünüz ve diğer tarayıcılar için tam görüntüyü görürsünüz (arka planda armutla birlikte).

Tarayıcının bu gama verisini destekleyip desteklemediğine bağlı olarak, bir elma / armut numarası görüyorum veya sadece armutu görüyorum.

olduğu gibi, uygun kalibre edilmiş ekrana sahip resimlerde daha fazla ayrıntı görebilirsiniz ve gama / parlaklık / kontrast çok yüksekse, resimdeki bir görüntünün daha gizli olduğunu görebilirsiniz