Цвет фона PNG в IE8

Question

У меня есть следующий логотип, который отображается в том же цвете фона, что и тело HTML в FF3, Chrome (# 363636).

Но в IE8 он отображает другой, более темный цвет.

Это FF3 / Chrome, прощающий мой PNG, или просто еще одна ошибка IE (я думал, что они исправили поддержку PNG в IE7)?

Обновление : я все еще получаю эту проблему, и аргументы pngcrush, которые я использую для ее исправления:

pngcrush -replace_gamma 0.5181347 infile.png outfile.png

Двоичная ссылка Win32 здесь .

Answer 1

В вашем PNG есть структура информации о гамма-коррекции (порция gAMA). Это нормально, если вы работаете с фотографиями, для которых требуется гамма-коррекция, но для Интернета это не совсем так.

В Интернете браузеры, как правило, не применяют гамма-коррекцию к цветам HTML / CSS или другим изображениям, поэтому, если вы используете гамма-коррекцию, вы получите результаты в формате PNG, которые не соответствуют остальной части страницы. Некоторые браузеры не применяют PNG-гамму именно по этой причине, поэтому вы получаете переменные результаты.

Загрузите логотип в редактор изображений и сохраните его без информации о чанке gAMA. Подробнее .

Answer 2

Ответ с самым высоким рейтингом здесь предлагает причудливый сброс до значения гаммы 0,5181347 с помощью pngcrush. Это может работать в некоторых вселенных, но в нашем случае вам лучше всего удалить всю информацию о цветовом пространстве из PNG, чтобы она отображалась исключительно в том же нейтральном RGB-триплетном пространстве, которое браузеры используют для цветов в CSS:

pngcrush -rem cHRM -rem gAMA -rem iCCP -rem sRGB infile.png outfile.png

Что означает для настоящих цветовых головок то, что оригинальный цвет, который вы разработали, может не совпадать на другом мониторе или в операционной системе, но все ваши цвета с одинаковыми значениями RGB будут отображаться одинаково для каждого пользователя в соответствии браузер + ОС они включены. В частности, фон или смежные цвета, примыкающие к PNG, будут совпадать, поэтому вы можете создать свой сайт с помощью взаимосвязанных изображений и цветов.

Answer 3

Я обсуждал проблему цвета PNG в Internet Explorer и ее решение с помощью снимков экрана. Решение заключается в удалении гамма-фрагмента из изображения PNG (например, с помощью утилиты TweakPNG). Это заставляет изображения отображать правильные оттенки в Internet Explorer. Некоторые необычные браузеры могут по-прежнему работать с ошибками.

Answer 4

Для других может быть полезно знать, что использование Yahoo Smushit для оптимизации изображений для Интернета исправило эту проблему для меня (и в целом это хорошая идея, чтобы пропустить ваши изображения через это или нечто подобное ).

Answer 5

Это единственное решение, которое сработало для меня: http://forum.jquery.com/topic/transparent-png-shows-black-edges-in-ie8

Answer 6

Я заметил эту проблему во всех IE - 6, 7, 8. Некоторые изображения PNG будут иметь черные контуры вокруг них в прозрачных областях. Оказалось, что мне пришлось открыть Gimp (мой бесплатный кроссплатформенный редактор изображений), открыть PNG, в котором возникла проблема, и использовать инструмент «Нечеткий выбор» на 150%, чтобы повторно выбрать прозрачную область, и нажать «Удалить». Затем сохраните. Это обычно решало пятнистость вокруг PNG в прозрачных областях примерно на 98%.

Если это не сработало, перезагрузите Gimp, установите фон на белый, выберите «Свести изображение», установите порог «Нечеткий выбор» на 3%, выберите фон, который вы хотите удалить, выберите «Удалить (очистить)», затем снова выберите Еще раз фон с порогом в 150%, удалите, а затем сохраните изображение.

Примечание по моему инструменту Fuzzy Select. В моих настройках Gimp были установлены флажки «Сглаживание», сняты флажки «Перья краев», отмечен флажок «Выбрать прозрачные области», снят флажок «Образец объединен» и «Выбор составным».

Да, похоже, это ошибка IE с изображениями PNG с прозрачным фоном. Ни один из других браузеров - Opera, Safari, Firefox, Chrome - не имеют этой проблемы. Я подозреваю, что некоторые графические программы устанавливают прозрачность 50% как часть сглаживания по краям, потому что проблемы возникают только с краями. Я думаю, что браузеры без IE обрабатывают 50% прозрачности на пикселе, но IE может понимать только как 100% прозрачность на пикселе - просто догадка.

Answer 7

Вам нужно удалить фрагменты gAMA и sRGB из вашего PNG. Кроме того, вам необходимо удалить любой цвет / цветовой профиль ICC, прикрепленный к изображению.

Photoshop «Сохранить в Интернете» добавляет стандартный профиль ICC sRGB - который отлично подходит для контента изображений, но совершенно не подходит для стилизации изображений, где вам нужно соответствовать цветам CSS.

Это особенно заметно в Safari - о котором у меня есть сообщение в блоге .