Вопрос Почему это изображение PNG отличается по-разному в Chrome & Firefox, чем в Safari и IE?


Проверьте это изображение:

Apple or Pear

В Chrome и Firefox он будет отображаться как груша. Теперь попробуйте сохранить его и посмотреть на него, сохраненное на рабочем столе. Кроме того, попробуйте просмотреть в Сафари или Интернет эксплорер, Он будет отображаться как яблоко!

Попробуйте щелкнуть изображение и переместить его. Вы заметите, что появляется яблоко.

Почему это происходит?


663
2018-04-07 03:32


происхождения


если я попытаюсь немного перетащить изображение на firefox, прозрачно перетаскиваемое изображение сделает форму яблока aPear - ajax333221
Как вы создали эту фотографию? Можете ли вы указать мне сайт? - tumchaaditya
Для будущих читателей это, похоже, исправлено в текущих версиях IE. - Kat
Но вы все равно можете загрузить его на свой рабочий стол и увидеть там яблоко, и просмотреть его в Firefox, Chrome, как груша. - Jet


ответы:


Это происходит потому, что некоторые браузеры выполняют гамма-коррекцию, указанную в файле изображения.

Вот нескорректированное изображение. «Бело-белые» пиксели в изображении яблока содержат изображение груши, которое хранится при гораздо более высокой интенсивности, то есть очень яркой.

Вот изображение с гамма-коррекцией. «Черно-ишевые» пиксели на грушевом изображении содержат изображение яблока, которое хранится при довольно нормальной интенсивности, но уменьшено до почти черного с гамма-коррекцией.

На моем экране я вижу грушу слабо среди белых пикселей на первом изображении, но на втором изображении яблоко неотличимо от черных пикселей вокруг него.

(Вы также можете увидеть некоторую цветопередачу на гамма-исправленной груше, потому что нескорректированное изображение использует гораздо меньший диапазон цветовых каналов.)

Файл изображения PNG содержит блок gAMA, определяющий значение гаммы файла 0,02. При отображении без гамма-коррекции зритель видит яблоко с «белыми» пикселями вкрапленными, которые на самом деле являются грушей при ее первоначальной (высокой) интенсивности.

Когда отображается с гамма-коррекцией, зритель видит окрашенную цветом грушу с «черными» пикселями, которые на самом деле представляют собой яблоко с гораздо меньшим гамма-значением.

Браузеры, отображающие грушу, выполняют гамма-коррекцию на изображении, в то время как браузеры, отображающие яблоко, не выполняют гамма-коррекцию, а просто показывают ее с ее буквальными значениями цвета.


524
2018-04-07 05:23



Рекомендуемое чтение по теме: знаменитая статья Эрика Брассера «Гамма-ошибка при масштабировании изображения, - ulidtko
@ulidtko Это сейчас 404. Вот копировать на веб-архив, - Cole Johnson


Это было слишком много для комментария, но, надеюсь, это помогает.

Итак, я уверен, что этот вопрос касается того, как браузеры интерпретируют гамма-информацию с помощью PNG. Это довольно забавная проблема и в первую очередь касается двусмысленности гамма-информации.

Статья Печальная история PNG Gamma «Коррекция» дает очень хорошее резюме проблем, средств защиты и других интересных фактов.

С учетом сказанного мы можем фактически удалить гамма-информацию из изображения, используя pngcrush

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

Так что с гамма-информацией и без нее:

pear an apple

На самом деле я бы не сказал, что это «ответ», но, если возможно, это, вероятно, в правильном направлении. Я уверен, что кто-то с большим количеством знаний о цветовых профилях и т. Д. Придет вместе с более формальным ответом.


227
2018-04-07 04:34



эти два изображения выглядят одинаково для меня, мерцая между яблоком и грушей, как и оригинал в вопросе. Я использую Safari 6.0.2 - Fraser Graham
Обратите внимание, что последние два элемента команды, представленные здесь, являются infile а также outfile: pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png, Больше информации: hsivonen.fi/png-gamma - fredrivett


Изменение гаммы (γ) изображения состоит в изменении значения гамма в:

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

который дает выходной цвет пикселя (R ', G', B '), отображаемый на экране после применения гамма-функции к начальным значениям пикселей (R, G, B) (учитывая, что R, G и B нормализованы между 0 и 1 ).

Теперь давайте возьмем красный канал, например.
Если R = R0 + R1 , вы получите
R '= (R0 + R1)γ = R0γ * (1 + R1 / R0)γ

Если R0 намного больше R1, то у вас есть
(1 + R 1 / R 0)γ ≈ 1 + γR 1 / R 0,
так R '≈ R0γ + γ


40
2018-04-07 05:38





Это не округление пикселей, а цветовые профили ICC не являются проблемой.

Это трюк, и некоторые браузеры отображают PNG без гамма-данных. Для этих браузеров вы видите одно, а для других браузеров вы видите полное изображение (с грушей, скрытой в фоновом режиме).

Я вижу изображение трюка яблоко / груша, или я просто вижу грушу, в зависимости от того, поддерживает ли браузер эти гамма-данные.


9
2018-04-07 05:41





так как это происходит, вы можете увидеть более подробную информацию на фотографиях с соответствующим откалиброванным дисплеем и если гамма / яркость / контрастность являются высокими, вы можете видеть, что одно изображение на картинке скрытый Больше


1
2018-03-11 01:49