Mengapa gambar PNG ini ditampilkan secara berbeda di Chrome & Firefox daripada di Safari dan IE?

Lihat gambar ini:

Di Chrome dan Firefox itu akan ditampilkan sebagai pir. Sekarang, cobalah untuk menyimpannya dan melihatnya tersimpan di desktop Anda. Juga, coba lihat di Safari atau Internet Explorer . Ini akan ditampilkan sebagai apel!

Coba klik gambar dan pindahkan. Anda akan melihat apel muncul.

Mengapa ini terjadi?

Itu terjadi karena beberapa browser melakukan koreksi gamma seperti yang ditentukan dalam file gambar.

Inilah gambar yang tidak dikoreksi. Piksel "putih-ish" dalam gambar apel berisi gambar pir, disimpan pada intensitas yang jauh lebih tinggi, yaitu sangat cerah.

Inilah gambar yang dikoreksi gamma. Piksel "hitam-ish" dalam gambar pir berisi gambar apel, disimpan pada intensitas yang cukup normal, tetapi diperkecil menjadi hampir hitam dengan koreksi gamma.

Di layar saya, saya bisa melihat pir samar-samar di antara piksel putih pada gambar pertama, tetapi pada gambar kedua, apel tidak dapat dibedakan dari piksel hitam di sekitarnya.

(Anda juga dapat melihat beberapa garis warna pada pir yang dikoreksi gamma, karena gambar yang tidak dikoreksi menggunakan rentang saluran warna yang jauh lebih kecil.)

File gambar PNG berisi potongan gAMA yang menetapkan nilai gamma file 0,02. Ketika ditampilkan tanpa koreksi gamma, pemirsa melihat sebuah apel dengan piksel "putih" diselingi, yang sebenarnya adalah pir dengan intensitas aslinya (tinggi).

Saat ditampilkan dengan koreksi gamma, pemirsa melihat pir yang dikoreksi warna dengan piksel "hitam" yang sebenarnya merupakan apel yang dihasilkan dengan nilai gamma yang jauh lebih rendah.

Browser yang menampilkan pir sedang melakukan koreksi gamma pada gambar, sementara browser yang menampilkan apel tidak melakukan koreksi gamma, tetapi hanya menunjukkannya dengan nilai warna literalnya.

Ini agak terlalu banyak untuk komentar, tapi mudah-mudahan ini membantu.

Jadi, saya cukup yakin bahwa masalah ini berkaitan dengan cara browser menginterpretasikan informasi gamma dengan PNG. Ini masalah yang cukup menyenangkan dan berkaitan dengan ambiguitas informasi gamma.

Artikel Kisah Sedih PNG Gamma "Koreksi" memberikan ringkasan yang sangat bagus tentang masalah, solusi, dan fakta menyenangkan lainnya.

Dengan itu, kita sebenarnya dapat menghapus informasi gamma dari suatu gambar menggunakan pngcrush

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

Jadi dengan informasi gamma dan tanpa itu:

Saya tidak akan benar-benar mengatakan ini adalah "jawabannya", tetapi jika ada, itu mungkin ke arah yang benar. Saya yakin seseorang dengan banyak pengetahuan tentang profil warna dan seterusnya akan datang dengan respons yang lebih formal.

Mengubah gamma ( γ ) dari suatu gambar terdiri dari memodifikasi nilai gamma di:

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

yang memberikan warna piksel keluaran (R ', G', B ') yang ditampilkan di layar setelah menerapkan fungsi gamma ke nilai piksel awal (R, G, B) (mengingat R, G, dan B dinormalisasi antara 0 dan 1 ).

Sekarang, mari kita ambil saluran merah sebagai contoh.
Jika R = R0 + R1 , Anda akan mendapatkan
R '= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ

Jika R0 jauh lebih besar dari R1, maka Anda memiliki
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0 ,
jadi R '≈ R0 ^γ + γ R1 * R0 ^γ-1

Ini berarti bahwa untuk gamma yang mendekati 0, R0 ^γ mendominasi. Untuk γ = 1, Anda mendapatkan
R '≈ R0 + R1

Untuk gamma besar, istilah kedua mendominasi, sehingga Anda dapat langsung mengatur R0 = komponen merah pir dan R1 = komponen merah apel, dengan R0 jauh lebih besar dari R1 dan Anda akan mendapatkan variasi yang diinginkan ketika mengubah gamma dari monitor Anda (atau kurva gamma tertentu yang digunakan setiap perangkat lunak).

Ini bukan pembulatan piksel dan profil warna ICC bukan masalahnya.

Ini adalah gambar trik, dan beberapa browser menampilkan PNG tanpa data gamma. Untuk peramban itu, Anda melihat satu hal, dan untuk peramban lain Anda melihat gambar lengkap (dengan pir tersembunyi di latar belakang).

Saya melihat gambar trik apel / pir, atau saya hanya melihat pir, tergantung pada apakah browser mendukung data gamma ini.

sebaik itu terjadi, Anda dapat melihat lebih detail dalam gambar dengan tampilan terkalibrasi yang tepat dan jika gamma / kecerahan / kontras adalah cara ke tinggi, Anda dapat melihat satu gambar dalam gambar lebih tersembunyi