Чому це зображення у форматі PNG відображається по-іншому в Chrome & Firefox, ніж у Safari та IE?

Перевірте це зображення:

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

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

Чому це відбувається?

Це відбувається тому, що деякі браузери виконують корекцію гамми, як зазначено у файлі зображення.

Ось непоправлене зображення. Пікселі "біло-іш" на зображенні яблука містять зображення груші, що зберігається значно більшою інтенсивністю, тобто дуже яскравою.

Ось зображення, виправлене гаммою. Пікселі "чорно-іш" на зображенні груші містять зображення яблука, яке зберігається досить нормальної інтенсивності, але зменшується до майже чорного з гамма-корекцією.

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

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

Файл зображення PNG містить фрагмент GAMA із зазначенням значення гамми файлу 0,02. Коли відображається без корекції гамми, глядач бачить яблуко з "білими" пікселями, що перетинаються, які насправді є грушею за початковою (високою) інтенсивністю.

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

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

Це було трохи забагато для коментаря, але, сподіваємось, це допомагає.

Отже, я досить впевнений, що це питання стосується того, як браузери інтерпретують гамма-інформацію з PNG. Це досить весела проблема і в першу чергу має справу з неоднозначністю гамма-інформації.

Стаття Сумна історія PNG Gamma «Виправлення» містить дуже приємний підсумок питань, засобів захисту та інших цікавих фактів.

Зважаючи на це, ми можемо фактично позбавити гамма-інформацію з зображення, використовуючи pngcrush

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

Тож із гамма-інформацією та без неї:

Я б не сказав, що це "відповідь", але якщо що-небудь, це, мабуть, у правильному напрямку. Я впевнений, що хтось, хто має багато знань щодо кольорових профілів тощо, прийде разом з більш формальною відповіддю.

Зміна гамми ( γ ) зображення полягає у зміні значення гамми у:

(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, і ви отримаєте бажані зміни при зміні гами ваш монітор (або конкретна гамма-крива, яку використовує кожне програмне забезпечення).

Це не пікселі для округлення, а кольорові профілі ICC - це не проблема.

Це трюкове зображення, і деякі браузери відображають PNG без гамма-даних. Для цих браузерів ви бачите одне, а для інших браузерів ви бачите повне зображення (із грушею, прихованою на задньому плані).

Я бачу зображення яблуко / грушевого фокусу, або я просто бачу грушу, залежно від того, підтримує браузер ці дані гамми.

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