Tại sao hình ảnh PNG này hiển thị khác nhau trong Chrome & Firefox so với Safari và IE?

Kiểm tra hình ảnh này:

Trên Chrome và Firefox, nó sẽ hiển thị dưới dạng một quả lê. Bây giờ, hãy thử lưu nó và xem nó được lưu trên máy tính để bàn của bạn. Ngoài ra, hãy thử xem trong Safari hoặc Internet Explorer . Nó sẽ hiển thị như một quả táo!

Hãy thử nhấp vào hình ảnh và di chuyển nó xung quanh. Bạn sẽ nhận thấy quả táo xuất hiện.

Lý do tại sao điều này xảy ra?

Nó xảy ra vì một số trình duyệt thực hiện chỉnh sửa gamma như được chỉ định trong tệp hình ảnh.

Đây là hình ảnh chưa được quan tâm. Các pixel "trắng-ish" trong ảnh táo chứa hình ảnh quả lê, được lưu trữ ở cường độ cao hơn nhiều, tức là rất sáng.

Đây là hình ảnh chỉnh sửa gamma. Các pixel "đen-ish" trong hình quả lê chứa hình ảnh của một quả táo, được lưu trữ ở cường độ khá bình thường, nhưng được thu nhỏ lại thành gần màu đen với hiệu chỉnh gamma.

Trên màn hình của tôi, tôi có thể thấy quả lê mờ nhạt giữa các pixel trắng trong hình ảnh đầu tiên, nhưng trong hình ảnh thứ hai, quả táo không thể phân biệt được với các pixel đen xung quanh nó.

(Bạn cũng có thể thấy một số dải màu trên quả lê đã được hiệu chỉnh gamma, bởi vì hình ảnh không được xử lý đang sử dụng phạm vi nhỏ hơn nhiều của các kênh màu.)

Tệp hình ảnh PNG chứa một đoạn gAMA chỉ định giá trị gamma của tệp là 0,02. Khi được hiển thị mà không hiệu chỉnh gamma, người xem sẽ thấy một quả táo với các pixel "trắng" xen kẽ, thực sự là quả lê ở cường độ ban đầu (cao).

Khi được hiển thị với hiệu chỉnh gamma, người xem sẽ thấy một quả lê được sửa màu với các pixel "đen" thực sự là quả táo được hiển thị ở giá trị gamma thấp hơn nhiều.

Các trình duyệt hiển thị quả lê đang thực hiện hiệu chỉnh gamma trên hình ảnh, trong khi các trình duyệt hiển thị quả táo không thực hiện hiệu chỉnh gamma, mà chỉ hiển thị nó với các giá trị màu theo nghĩa đen của nó.

Đây là một chút quá nhiều cho một bình luận, nhưng hy vọng nó sẽ giúp.

Vì vậy, tôi khá chắc chắn rằng vấn đề này liên quan đến cách các trình duyệt diễn giải thông tin gamma bằng PNG. Đó là một vấn đề khá thú vị và giải quyết sự mơ hồ về thông tin gamma ngay từ đầu.

Bài viết Câu chuyện buồn về PNG Gamma Hồi Correction Cung cấp một bản tóm tắt rất hay về các vấn đề, biện pháp khắc phục và các sự kiện thú vị khác.

Như đã nói, chúng ta thực sự có thể loại bỏ thông tin gamma từ một hình ảnh bằng cách sử dụng pngcrush

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

Vì vậy, với thông tin gamma và không có nó:

Tôi thực sự sẽ không nói đây là "câu trả lời", nhưng nếu bất cứ điều gì có lẽ nó đang đi đúng hướng. Tôi chắc chắn rằng ai đó có nhiều kiến ​​thức liên quan đến hồ sơ màu sắc và như vậy sẽ đi kèm với một phản ứng chính thức hơn.

Thay đổi gamma ( γ ) của hình ảnh bao gồm sửa đổi gamma giá trị trong:

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

sẽ cho màu pixel đầu ra (R ', G', B ') hiển thị trên màn hình sau khi áp dụng chức năng gamma cho các giá trị pixel ban đầu (R, G, B) (xem xét R, G và B được chuẩn hóa từ 0 đến 1 ).

Bây giờ, hãy lấy kênh màu đỏ làm ví dụ.
Nếu R = R0 + R1 , bạn sẽ nhận được
R'= (R0 + R1) ^γ = R0 ^γ * (1 + R1 / R0) ^γ

Nếu R0 là lớn hơn nhiều so với R1, sau đó bạn có
(1 + R1 / R0) ^γ ≈ 1 + γ R1 / R0 ,
nên R0 R' ≈ ^γ + γ R1 * R0 ^γ-1

Điều này có nghĩa là đối với gamma gần bằng 0, R0 ^γ chiếm ưu thế. Với = 1, bạn nhận được
R 'R0 + R1

Với một gamma lớn, thuật ngữ thứ hai chiếm ưu thế, do đó bạn có thể trực tiếp thiết lập R0 = thành phần màu đỏ của quả lê và R1 = thành phần màu đỏ của quả táo, với R0 lớn hơn nhiều so với R1 và bạn sẽ có được các biến thể mong muốn khi thay đổi gamma màn hình của bạn (hoặc đường cong gamma cụ thể mà mỗi phần mềm sử dụng).

Đó không phải là làm tròn pixel và cấu hình màu ICC không phải là vấn đề.

Đó là một hình ảnh lừa và một số trình duyệt hiển thị PNG mà không có dữ liệu gamma. Đối với các trình duyệt đó, bạn sẽ thấy một điều và đối với các trình duyệt khác, bạn sẽ thấy hình ảnh đầy đủ (với quả lê ẩn dưới nền).

Tôi thấy hình ảnh lừa táo / lê hoặc tôi chỉ thấy quả lê, tùy thuộc vào việc trình duyệt có hỗ trợ dữ liệu gamma này hay không.

cũng như nó rất vui, bạn có thể xem thêm chi tiết trong ảnh với màn hình được hiệu chỉnh phù hợp và nếu gamma / độ sáng / độ tương phản cao, bạn có thể thấy một hình ảnh trong ảnh bị ẩn đi nhiều hơn