Блог: статьи

PNG gamma: хотели, как лучше, получилось, как всегда

Дмитрий ЖуковАвтор: Дмитрий Жуков
22 августа 2006

Казалось, соседство в одном офисе двух разных платформ — Macintosh и PC — уже давно перестало быть источником проблем. Никто не мог и предположить, что в наш век глобализации и открытых границ мы напоремся на новый подводный камень в таком несложном деле, как подготовка картинок для демонстрации промежуточных результатов клиенту. Усаживаемся поудобнее и читаем в оба глазика новую поучительную историю.

В прошлом веке у нас было всего два способа показать промежуточный результат работы клиенту:

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

В новом веке на смену сладкой парочке на гнедом коне въехал формат Портативной Сетевой Графики, попросту — PNG. Стандарт во всех отношениях прогрессивный: палитра может быть любая, потери качества нет, объем файлов умеренный, да еще и альфа канал поддерживает. Не формат, а бальзам на душу дизайнера.

Во времена стародавние цвета из компьютеров прямо в мониторы аналоговые, как есть в RGB передавались. Все цвета из трех основных складывались. И разработчики разные по-своему все делали. Так получилось, что одни и те же цвета в Mac OS и Windows отображаются по-разному. А все из-за различного значения параметра Gamma, который составляет 1,8 и 2,2 в Mac OS и Windows соответственно.

Разработчикам формата PNG показалось неправильным, что одни и те же картинки на разных системах выглядят по-разному, и все из-за какой-то гаммы. Решив помочь всем и каждому, они не придумали ничего лучше, чем записывать в каждый PNG-файл значение параметра Gamma, выставленное в операционной системе, под которой этот файл был создан. Сделано это было, безусловно, из лучших побуждений, чтобы все видели картинку приблизительно так, как ее задумывал автор. По идее, программа, выводящая картинку на экран, должна брать два параметра Gamma (из PNG-файла и из операционной системы) и путем несложных операций приводить цвета изображения к должному виду.

Может и не узнали бы мы об этом никогда. Да вот только пришлось макет одного сайта редактировать поочередно то на Windows, то на Mac OS, передавая при этом друг другу то PSD, то PNG, а то и вовсе снимки экрана. Хорошо, что у нас есть Егор. Именно он обратил внимание на изменение цветов относительно первоначального варианта. Стали разбираться, что к чему. Досталось на орехи всем: и Safari, и Firefox, и Mac OS, и Windows. Долго бы еще виноватых искали, но попалась на просторах интернета статья «The Sad Story of PNG Gamma «Correction». Пожалуйста, не думайте, что это очередная куча малополезных символов! Очень даже наоборот. Настоятельно рекомендую вчитаться всем, кто так или иначе имеет отношение к верстке html и css. Я прочитал пять раз!

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

К примеру, у дизайнера Macintosh, а у заказчика PC. Дизайнер рисует сайт, используя корпоративные цвета, определенные в пространстве RGB. Ввиду различного значения пресловутого параметра Gamma эти цвета на Macintosh выглядят не совсем так, как на PC. Предположим, дизайнер демонстрирует результат своей работы заказчику в виде старомодного JPEG-файла. Заказчик, в свою очередь, на своем PC видит цвета не совсем так, как их видел дизайнер — зато они полностью совпадают с корпоративной палитрой! Все счастливы. Что же происходит, если дизайнер решает вместо JPEG применить прогрессивный формат PNG? Получив от дизайнера файл, заказчик видит, что цвета отнюдь не совпадают с корпоративной палитрой! Ведь чересчур «умный» браузер заказчика старается показать картинку точно такой, какой видел ее дизайнер на Macintosh.

Другой пример. Допустим, вы сверстали сайт на PC. Некоторые картинки сделали GIF’ами, а некоторые — PNG. Кое-где в CSS указан цвет фона в RGB. На сайт заходит счастливый пользователь Mac OS и видит, что в местах стыковки PNG с GIF’ами или с фоном страницы цвета не совпадают. Сообразительный читатель уже догадался, в чем дело: браузер корректирует цвета в PNG в соответствии с прописанным в файле значением Gamma, но при этом сохраняет цвета в GIF’ах и в CSS в неприкосновенности.

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

Прием первый и самый надежный — не использовать PNG вообще.

Прием второй, менее надежный и связанный с дополнительными временными затратами. Надо удалить параметр Gamma из вашего PNG-файла. Вы непременно спросите, как же нам, простым смертным, это сделать. Для вас, мои юные друзья, любители бесплатного и свободнораспространяемого кода написали программу pngcrush. Пользователи Mac OS могут скачать версию, перекомпиленную под Darvin. Запускаем программу со следующими параметрами:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem tEXt infile. png outfile. png
  • infile.png — это имя вашего файла
  • outfile.png — имя выходного файла

Обратите внимание на размер файлов до и после обработки. Они становятся меньше процентов на 15 без какой бы то ни было потери качества. Скажите спасибо компании Adobe, которая, очевидно, не научилась использовать весь заложенный в PNG потенциал.

Для закрепления материала, ссылочки по теме:

  1. The Sad Story of PNG Gamma «Correction».
  2. Программа для оптимизации PNG через консоль — Pngcrush.
  3. Программа для тонкой настройки PNG файлов для Windows — TweakPNG.
  4. Тестирование в разных браузерах на соответствие цветов PNG и цветов в HTML/CSS.

Условия использования

Данные материалы можно использовать в некоммерческих целях, с обязательным указанием автора.

Комментарии

а еще без Pngcrush’a PNG сохраненный шопом в ИЕ выглядит иначе, чем в других броузерах. Из-за этой же проблемы.

Ответить tyv, 22 августа 2006

Работаю только на PC. При экспорте из фотошопа IE показывает не тот цвет, что Firefox и Opera – отсюда получаю описанные Вами проблемы при стыковке разноформатных элементов. Решаю просто (уже давно): пережимаю при помощи Xat.com Image Optimizer – и жмёт отлично и от проблем избавляет. Одна неприятность – не сохраняет он в 24-х битной палитре (ну и альфа канал разумеется не используешь), да не так уж и надо.

Ответить Олег, 22 августа 2006

Полезная статья. Ждем еще.

Ответить Hunter, 23 августа 2006

Хорошая статья. Полезная.

Ответить Gonzo, 23 августа 2006

Еще есть софтина, которая корректно сохраняет PNG. PixBuilder называется. Вроде отсюда скачать можно http://www.wnsoft.com. Сохранять PNG в шопе с альфой, а потом в ней как надо. Еще и размер меньше будет.

Ответить Pavel, 5 сентября 2006

Я для этих целей держу на компьютере Gimp. Перезаписываю проблемные PNG-шки в нем.

Ответить Dmitry Baranovskiy, 14 сентября 2006

На основе Статьи был написан спецальный батник, который может брать из одной папки все PNG файлы и конвертить их в новые очищенные в другую папку на полном автомате.

http://phenix.stsland.ru/Multi_Pngcrush.rar
Никаких вирусов :)

Ответить Phenix_H_K, 15 сентября 2006

Жжоте. Давеча несколько часов на это убил, пока не догадался кинуть в gif.

Ответить X, 21 сентября 2006

Лично я уже давно сделал вывод, что с учетом вышенаписанного (это не новость) и кривой поддержки PNG в Internet Explorer, лучще избегать применения этого формата для тех работ, где важна точность цветопередачи.

Ответить Николай, 6 октября 2006

О, то что нужно! TweakPNG довершил решение проблемы с отображением png в IE.

Ответить Вовка Соловьёв, 20 октября 2006

И когда сделают «PNG 2.0»? Хорошая штука получилась бы.

Ответить Александр Ксейр, 4 ноября 2006

Как быть с тем, что прозрачность у PNG в Сафари другая?

Ответить Smash, 21 ноября 2006

Как другая?! Все вроде так же…

Ответить joukov, 21 ноября 2006

Полезная статья, продолжайте в том же духе!

Ответить Yuzle, 1 апреля 2007

Есть ничо так GUI аналог краша – http://entropymine.com/jason/tweakpng/

Ответить Smash, 4 апреля 2007

Smash, спасибо за ссылку. Мы активно используем tweak png на Windows. Он удобнее, чем краш именно благодаря интерфейсу.

Ответить joukov, 4 апреля 2007

Огромное спасибо автору статьи, я долго не мог понять почему когда я у клиента то не видно многих светлых элементов… Рисовалось все дизайнером на PC, у клиента Mac… Теперь разобрались)) Еще раз респект) Пишите еще))))
Отдельное спасибо от дизайнера за ссылки на хорошие программки!)

Ответить Rapida, 24 мая 2008

Ну, если вдруг интересно, то оптимайзилка png-шек «CQ» by x128 умеет приводить гамму в чувство. Она читает картинку, учитывая гамму, а при записи её удаляет.

(Хотя, собственно говоря, программа не для этого; её основная цель – супер-пупер оптимизация палитры при конвертации true color => 8 bit).

Раздают слонов тут: http://pj2k.livejournal.com/1728.html

Ответить pirojoke.oneid.ru, 18 августа 2009

Кстати Fireworks сохраняет пнгшки меньшего размера чем аналогичные изображения сохраняет Photoshop.

Ответить p1xel, 20 марта 2010

Замечено, что FW (по крайней мере версии до CS1 включительно) портит картинки, он искусственно уменьшает к-во цветов, это настройка у него по умолчанию.

* * *

PNG в целом – формат ущербный. Его идеология построена через задницу: хорошо жмёт маленькие картинки (которые и так не нуждаются в сжатии), но плохо жмёт большие (где сжатие как раз ох как нужно). Доходит до маразма: разрезаем картинку на две половинки (вся информация с картинок до пикселя сохраняется), сжимаем их по отлельности – и результат получается сжат СИЛЬНЕЕ, чем если бы картинка была отдим файлом. Это – fail, это – маразм.

Ответить http://pirojoke.oneid.ru/, 1 марта 2011

Напишите комментарий

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

Connect with Facebook

Если у вас есть OpenID (например, myopenid.com), воспользуйтесь им для авторизации.

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

Закрыть