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


675

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

Яблоко или груша

На Chrome и Firefox это покажет как груша. Теперь попробуйте сохранить его и посмотреть на него на рабочем столе. Также попробуйте просмотреть в Safari или Internet Explorer . Это будет отображаться как яблоко!

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

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


5
если я попытаюсь немного перетащить изображение на firefox, прозрачно перетаскиваемое изображение примет форму яблока aPear
ajax333221

1
Как вы создали эту картину? Можете ли вы указать мне на сайт?
тумчаадитья

10
Для будущих читателей это, кажется, исправлено в текущих версиях IE.
Kat

2
Но вы все равно можете загрузить его на свой рабочий стол, увидеть там яблоко и просмотреть его в Firefox, Chrome как грушу.
Jet

Ответы:


534

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

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

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

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

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

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

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

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


14
Рекомендуемое чтение по этой теме: знаменитая статья Эрика Брассера под названием «Гамма-ошибка при масштабировании изображения» .
ulidtko

1
@ulidtko Теперь это 404. Вот копия веб-архива .
Коул Джонсон

229

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

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

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

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

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

Итак, с информацией о гамме и без нее:

груша яблоко

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


3
эти два изображения выглядят одинаково для меня, мерцающие между яблоком и грушей, как оригинал в вопросе. Я использую Safari 6.0.2
Fraser Graham

1
Обратите внимание, что последние два элемента команды, представленные здесь, это infileи outfile: например pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png. Больше информации: hsivonen.fi/png-gamma
fredrivett

40

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

(R ', G', B ') = (R γ , G γ , 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 + R1 / R0) γ ≈ 1 + γ R1 / R0 ,
поэтому R '≈ R0 γ + γ
R1 * R0 γ-1

Это означает, что для гаммы, близкой к 0, R0 γ доминирует. Для γ = 1 вы получите
R '≈ R0 + R1

Для большой гаммы доминирует второй член, так что вы можете непосредственно установить R0 = красный компонент груши и R1 = красный компонент яблока, причем R0 намного больше, чем R1, и вы получите желаемые вариации при изменении гаммы ваш монитор (или конкретная гамма-кривая, используемая каждым программным обеспечением).


9

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

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

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


1

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.