ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Categories:

GIMP, формат PNG, утилита pngcrush

В одном из предыдущих постов я разбирал постановку задачи в учебнике по JavaScript. Авторы задачи создали тестовую HTML-страницу, на которой использовалась картинка в формате PNG размером 380 × 260 пикселей. Я описал несколько недостатков и ошибок, допущенных художником. После решения той задачи я решил почистить картинку, избавить ее от некоторых из перечисленных ошибок и недостатков. Вот эта картинка:



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

Уже довольно давно для обработки изображений я пользуюсь растровым графическим редактором «GIMP»:

https://ru.wikipedia.org/wiki/GIMP
https://www.gimp.org

Сначала (с 1995 года) эта программа разрабатывалась для операционной системы «Linux», но потом появилась и версия для «Microsoft Windows», которая так и называется: «GIMP for Windows». Я использую именно ее. Программа бесплатная, у нее имеется перевод интерфейса на русский язык. По возможностям, конечно, уступает флагману жанра, программе «Adobe Photoshop». Скачать программу можно с ее официального сайта, ссылка указана выше.

У меня на компьютере стояла версия 2.8.10 программы «GIMP for Windows». Это довольно старая версия, вышедшая где-то в 2013 году (то есть 8 лет назад). Но она меня полностью устраивала, и я не испытывал потребности в ее обновлении.

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

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

С этими задачами я более-менее справился и сохранил итоговое изображение в формате PNG. И тут оказалось, что на выходе у меня получился файл примерно раза в полтора больше исходного. Исходный файл имеет размер в 55,3 килобайт, а у меня получился файл около 86 килобайт.

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

* * *

Я решил немного поэкспериментировать с графическим редактором. И в первую очередь просто открыл исходную картинку, а потом сохранил ее в другом файле, никак не изменяя. И вот оно: размер файла картинки увеличился в полтора раза. Значит, виновником увеличения был не я (не мои действия, изменяющие картинку), а сам графический редактор.

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

Точно так же графический редактор, когда открывает картинку в формате PNG из файла, распаковывает ее. Затем картинка импортируется во внутренний формат графического редактора. В этом формате картинку удобнее обрабатывать: в нем можно сохранять свои действия над картинкой, чтобы их можно было «откатить». Также у внутреннего формата есть еще множество других возможностей. Внутренний формат графического редактора «GIMP» называется «XCF», в нем можно сохранять картинку на промежуточных этапах работы над нею. Вот статья об этом формате в википедии:

https://ru.wikipedia.org/wiki/XCF

Чтобы сохранить окончательный результат обработки обратно в файл формата PNG, картинку следует не «сохранять», а «экспортировать» (в меню редактора «GIMP» это разные пункты).

* * *

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

Текущая версия программы «GIMP for Windows» — 2.10.54 от 28.03.2021 года.

Но обновление не помогло. Несколько увеличились возможности импорта и экспорта картинок.

Например, при импорте картинки из файла формата PNG графический редактор выдает вопрос о преобразовании цветового пространства (цветового профиля) картинки (этот вопрос может и не выдаваться, его можно отключить в настройках редактора). В связи с этим в википедии есть несколько подходящих статей:

https://ru.wikipedia.org/wiki/Цветовое_пространство
https://ru.wikipedia.org/wiki/Цветовая_модель
https://ru.wikipedia.org/wiki/ICC-профиль

В оригинальной картинке содержится цветовой профиль «sRGB IEC61966-2.1», на который, как там написано, есть авторские права у американской компании «Hewlett-Packard». Редактор «GIMP» предлагает преобразовать указанный цифровой профиль в цифровой профиль «GIMP built-in sRGB», который передан в общественное достояние (по-английски «Public Domain»). Однако, всё это мало влияет на итоговый размер файла картинки в формате PNG (я пробовал использовать оба этих цифровых профиля).

В новой версии графического редактора обновлен диалог экспорта картинки в файл формата PNG.

Например, добавился раскрывающийся список, в котором по умолчанию выбрано значение «Автовыбор формата пикселей», а если этот список раскрыть, то в нем есть 8 пунктов, например «8 бит на канал RGB», «8 бит на канал GRAY» и так далее. Да, с помощью этого списка можно регулировать размер итогового файла формата PNG, но эти пункты (я их проверил) меняют изображение так, что разница становится видна невооруженным глазом, а мне этого не нужно (я хотел, чтобы качество картинки осталось примерно таким же, как и на исходной картинке). Например, если из этих пунктов выбрать вариант без буквы «A» на конце, то с картинки исчезнет прозрачность в нужных местах (будет удален так называемый «альфа-канал», как я понимаю). Ни один из этих пунктов так и не дал уменьшения файла картинки до нужного размера с одновременным сохранением нужного качества.

Еще в новой версии редактора в этом диалоге внизу добавилось пять флагов: «Сохранить данные Exif», «Сохранить данные XMP» и так далее. Это дополнительные данные к картинке формата PNG и они, как я понимаю, не влияют на само изображение. Я отключил все эти пять флагов, но в моем случае это не дало уменьшения итогового файла картинки.

* * *

Еще я пробовал уменьшить размер итогового файла картинки, переведя ее в так называемый «индексированный режим» (пункт меню «Изображение – Режим – Индексированный...»). Да, таким образом можно очень сильно уменьшить размер итогового файла, но у меня, например, при этом исчезли полупрозрачные тени героев. Полная прозрачность, где она была, осталась, а частично прозрачные пиксели полностью исчезли.

Как я понимаю, при переводе в индексированный режим уменьшается количество используемых цветов в изображении, таким образом и достигается уменьшение размера итогового файла. В оригинальном изображении в моем случае содержится 498 разных цветов (количество цветов в изображении можно определить с помощью пункта меню «Цвет – Инфо – Анализ изображения»). По умолчанию при переходе в индексированный режим количество цветов сокращается до максимум 256. Понятно, что качество картинки при этом ухудшится. Мне такое не подходит. Не знаю, можно ли в индексированном режиме использовать палитру из 498 цветов? Я не смог такого добиться.

* * *

В конце концов, мне помогла серия из 4 статьей от 2007-2008 годов автора, имя которого в именительном падеже звучит как «Сергей Чикуенок» (не знаю, как склонять его фамилию):

https://www.artlebedev.ru/technogrette/img/png-1/
https://www.artlebedev.ru/technogrette/img/png-2/
https://www.artlebedev.ru/technogrette/img/png-3/
https://www.artlebedev.ru/technogrette/img/png-4/

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

Путей, по которым может пойти работа алгоритма сжатия, настолько много, что проверить их все не представляется возможным. Например, в статье Сергея утверждается, что таких способов 5 в степени числа пикселей, содержащихся по высоте картинки. То есть, к примеру, для нашей картинки их 5 в степени 260. Это очень большое число.

Я не знаю, как с этим справляется редактор «GIMP», но по моему случаю видно, что не очень хорошо. Сергей рекомендует пользоваться оптимизирующими утилитами, которые перебирают несколько путей сжатия, выбранных эвристически. (Тут мне в голову пришли шахматные движки, которые уже давно играют лучше шахматистов-людей. Эти движки, ведь, тоже не могут рассчитать все возможные пути развития шахматной партии, потому что их очень много. И эти движки тоже пользуются различными эвристическими уловками, чтобы оценить перспективность путей развития партии и выбрать лучший, не просчитывая пути до конца.)

Я попробовал использовать одну из таких утилит, указанную в списке Сергея первой. Это оказалась утилита с названием «pngcrush» из набора утилит «PNG and MNG tools». Статья в википедии:

https://ru.wikipedia.org/wiki/Pngcrush
https://pmt.sourceforge.io/pngcrush/index.html (страница утилиты)

Утилита бесплатная. Скомпилированные версии утилиты можно скачать отсюда:

https://sourceforge.net/projects/pmt/files/pngcrush-executables/

Я скачал версию 1.8.11 от 16.01.2017 года.

Утилита запускается из командной строки операционной системы «Microsoft Windows» или из программы «Windows PowerShell» той же операционной системы. Я запускал из «Windows PowerShell».

Как сказано на странице утилиты и на странице википедии, посвященной этой утилите, главная цель этой утилиты — уменьшение размера данных секции IDAT в файле формата PNG. Как я понимаю, в этой секции и хранятся, собственно, сжатые данные об изображении (по-английски «image data», сокращенно «IDAT»). Возможные секции (по-английски «chunk») формата PNG описаны в спецификации формата PNG:

https://www.w3.org/TR/PNG/

Команда для запуска утилиты в программе «Windows PowerShell» у меня в компьютере:
PS C:\Илья\PNG crush> .\pngcrush_1_8_11_w64 heroes_gimp.png heroes_pngcrush.png

Здесь PS C:\Илья\PNG crush> — это так называемое «приглашение ко вводу команды», оно содержит адрес местоположения, в котором сейчас находится пользователь (название каталога, в который я поместил утилиту). Символы .\ требуются, чтобы запустить исполняемый файл из текущего каталога (в командной строке они не были нужны). pngcrush_1_8_11_w64 — это название исполняемого файла утилиты «pngcrush».

Я передал утилите два параметра: название входящего файла heroes_gimp.png (этот файл утилита будет анализировать, он должен присутствовать в каталоге) и название исходящего файла heroes_pngcrush.png (утилита создаст файл с таким именем и поместит в него файл в формате PNG уменьшенного размера).

Что у меня получилось? Итоги:

heroes.png — исходный файл, размер: 56 699 байт (55,3 килобайта);
heroes_gimp.png — файл heroes.png после импорта в GIMP и экспорта обратно в файл, размер: 86 404 байта (84,3 килобайта);
heroes_pngcrush.png — результат обработки файла heroes_gimp.png утилитой «pngcrush», размер: 43 697 байт (42,6 килобайта).

Утилита «pngcrush» почти в два раза уменьшила размер переданного ей файла. Естественно, без потери качества изображения, так как меняется только способ сжатия в пределах одного и того же алгоритма сжатия (а формат PNG — это изначально формат сохранения изображения со сжатием без потери качества изображения).
Tags: Инструмент, Образование, Рисунки, Сайтостроение
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments