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

675

Lihat gambar ini:

Apple atau Pear

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?

etree
sumber
5
jika saya mencoba untuk menyeret gambar pada firefox sedikit saja, gambar yang diseret secara transparan akan membuat bentuk apel menjadi seperti pir
ajax333221
1
Bagaimana Anda membuat gambar ini? Bisakah Anda mengarahkan saya ke situs web?
tumchaaditya
10
Untuk pembaca masa depan, ini tampaknya diperbaiki di versi IE saat ini.
Kat
2
Tetapi Anda masih bisa mengunduhnya ke desktop dan melihat apel di sana, dan melihatnya di Firefox, Chrome sebagai pir.
Jet

Jawaban:

534

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.

mwfearnley
sumber
14
Bacaan yang disarankan pada topik: artikel terkenal oleh Eric Brasseur disebut "Kesalahan Gamma dalam penskalaan gambar .
ulidtko
1
@ulidtko Sekarang 404. Ini salinan di Web Archive-nya .
Cole Johnson
229

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:

pir sebuah apel

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.

Justin Van Horne
sumber
3
dua gambar itu terlihat sama bagiku, berkelip di antara apel dan pir seperti aslinya dalam pertanyaan. Saya menggunakan Safari 6.0.2
Fraser Graham
1
Perhatikan bahwa dua elemen terakhir dari perintah yang disediakan di sini adalah infiledan outfile: mis pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png. Info lebih lanjut: hsivonen.fi/png-gamma
fredrivett
40

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).

WhitAngl
sumber
9

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.

Jodo
sumber
1

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

nwgat
sumber