Алгоритмы уменьшения изображений

3.3.7. Программа Color quantizer и маска повышения качества

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

На наш взгляд, самая простая и эффективная программа, позволяющая это делать, — Color quantizer (http://x128.ho.ua/). Программа все еще совершенствуется и находится в стадии тестирования, но уже позволяет получать очень хорошие результаты в пределах 256 цветов.

Исходное загруженное изображение занимает 394 Кб в полноцветном PNG и 116,8 Кб с индексированной палитрой.

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

Внизу слева находится выбор алгоритма замещения недостающих цветов, сообщается, что лучше всего работает "Флойд—Штейнберг", хуже всего — "Байер".

увеличить изображение
Рис. 3.12. Color quantizer, редактирование маски повышения качества

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

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

Переключатель "RGB/YUV" следует поставить в первое положение для искусственных изображений и во второе для фотографий. Переключатель "mse/msad/psnr" несет отладочную функцию и для наших целей бесполезен. Кнопка "OK" запускает обработку изображения, и ее нужно нажимать каждый раз, когда хочется увидеть, к чему привели изменения в настройках.

Справа от изображения видны уровни изображения и его текущая палитра, палитру можно отсортировать по количеству использований цвета (Weight), по оттенку (Color) или яркости (Light). На каждый элемент палитры можно кликнуть мышкой, левая клавиша показывает, где на картинке используется цвет, правая — выводит меню, где элемент можно заменить, удалить и так далее.

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

В итоге изображение пчел стало занимать 66,48 Кб, что на 43% лучше, чем предыдущий результат.

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

Еще одно долгожданное улучшение — изменение масштаба рабочей области. Этот инструмент доступен в меню правой клавиши мыши, также масштабом можно управлять клавишами "+" и "-" на цифровой клавиатуре.

3.3.8. Маска влияния в Adobe Photoshop

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

На рисунке показано, где расположен инструмент, включающий маску влияния; доступен он только в режиме PNG-8. Рядом с параметром "Dither" расположен похожий инструмент — он позволяет задавать интенсивность цветового смешивания, которое используется для того, чтобы узором из пикселей имеющихся цветов хоть как-то сымитировать недостающие.

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

Рис. 3.13. Маска влияния на распределение цвета в Photoshop

Открываем наше изображение и в палитре "Channels" создаем новый канал, назовем его "color". Включаем канал "RGB", чтобы видеть само изображение, выбираем инструмент "Кисточка" и прикидываем, какие участки должны выглядеть наиболее качественно. Очевидно, что полупрозрачным крыльям и более темным местам изображения можно уделить меньше внимания, чем теням на светлых полосках пчел.

Сопоставляя таким образом важность, раскрашиваем наше изображение и время от времени переключаемся в "Save for Web" ( Alt+Shift+Ctrl+S ), чтобы увидеть результат. Работа куда более кропотливая, чем при использовании программы Color quantizer, но результат — точнее, а это может дать более впечатляющую экономию.

Уменьшаем детализацию

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

Как видно, в изображении есть полностью прозрачная область вокруг шара и его полупрозрачное отражение. Кликаем с зажатой клавишей Ctrl на миниатюре изображения в палитре "Layers", переходим в "Channels" и нажимаем на кнопку "Save selection as channel" из ряда в низу палитры каналов (рис. 3.15).

Рис. 3.14. Образец для наших экспериментов, отражающийся в "мокром полу" (2,44 Мб)

Рис. 3.15. Создаем канал из выделенного участка

Теперь нам нужно отделить пиксели, которые в изображении наиболее заметны. Для этого снимаем выделение ( Ctrl+D ), инвертируем канал ( Ctrl+I ) и воспользуемся диалогом Threshold ( Image — Adjustments — Threshold ).

Меньшее значение параметра Threshold сохранит меньше деталей, а значит — уменьшит размер файла.

Кликаем с зажатой клавишей Ctrl на миниатюре канала в палитре "Channels" и выбираем фильтр "Median" ( Filter — Noise — Median ). Его значение опять же нужно подобрать вручную; чем больше значение, тем меньше деталей сохранится и тем меньше будет размер файла.

При значениях Threshold, равному 138, и Median, равному 4, размер нашего файла уменьшился на 440 Кб (18%) без заметных глазу потерь.

3.3.10. Невидимое — не значит несуществующее

Редактор Adobe Photoshop имеет одну малоизвестную особенность, иногда сильно увеличивающую размер файла PNG.

Попробуйте открыть в Photoshop какую-нибудь фотографию, выделить любым инструментом (например, "Lasso Tool") любой сложный контур, скопировать его в новый документ, после чего сохранить его через "Save For Web" ( Alt+Shift+Ctrl+S ).

Рис. 3.16. Инструментом "Elliptical Marquee Tool" вырезаем сложный контур

Логично было бы предположить, что полностью прозрачные части заполнены одним прозрачным цветом, чтобы изображение лучше упаковывалось. Оказывается, это не так. Откроем сохраненное изображение программой XnView, в режиме просмотра выбираем "Рисунок" — "Преобразовать в цветное", в появившемся окошке выбираем "Применить".

Рис. 3.17. Результат обработки нашего изображения программой XnView

Как видно, Photoshop оставил в невидимых областях много лишнего. Впрочем, избавиться от этого вполне нам по силам.

Если ваше изображение не содержит полупрозрачных областей, годится следующий простой способ: Ctrl+клик на миниатюре изображения в палитре "Layers", инвертируем выделение ( Ctrl+Shift+I ), удаляем выделенное (клавиша "Delete") и снова сохраняем наше изображение (Alt+Shift+Ctrl+S).

В случае, если полупрозрачные области присутствуют, придется потрудиться немного больше: Ctrl+клик на миниатюре изображения в "Layers", переходим в режим быстрой маски (клавиша "Q"), в диалоге Image — Adjustments — Threshold переставляем бегунок в крайнее левое положение и нажимаем "OK", выходим из режима маски (опять "Q") и инвертируем выделение ( Ctrl+Shift+I ). После чего заливаем выделенную область черным цветом ( Edit — Fill ), снова инвертируем выделение ( Ctrl+Shift+I ) и добавляем к слою маску (иконка "Add Layer Mask" внизу палитры слоев). Изображение можно сохранять.

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

Поэтому хорошая практика — попробовать сохранить оба варианта и выбрать меньший по размеру.

3.3.11. Разделение непрозрачных и прозрачных областей

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

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

Открываем изображение в Photoshop. Если оно состоит из нескольких слоев, то его необходимо слить в один. Далее выделяем объект в слое, кликнув с зажатой клавишей Ctrl на миниатюре в палитре "Layers", переходим в палитру "Channels" и создаем новый канал, кликнув на "Save selection as Channel".

Снимаем выделение ( Ctrl+D ) и вызываем инструмент "Threshold" ( Image — Adjustments — Threshold ), перетаскиваем бегунок в крайнее правое положение. Теперь у нас есть маска для выделения непрозрачных областей.

Кликаем с зажатой клавишей Ctrl на миниатюре в маске Alpha 1, переходим в палитру "Layers", выбираем слой с изображением и выполняем команду "Layers via Cut" ( Shift+Ctrl+J ). Теперь у нас два слоя, которые нужно сохранить в отдельных файлах. Непрозрачные пиксели сохраняем в PNG с индексированной палитрой (или в GIF), при возможности выполняя оптимизацию (например, постеризацию), прозрачные — в полноцветном PNG.

В нашем случае суммарный объем двух получившихся картинок составил 1 Мб, а экономия — 59%.

3.3.12. Резюме

Многообразие формата PNG дает широкий простор для оптимизации. Прежде всего, следует внимательно выбрать тип формата: использовать полноцветный, оттенки серого или индексированную палитру? Можно ли снизить количество цветов или детализацию? Нельзя ли разделить полупрозрачные области и непрозрачные? Если применялся Photoshop, не осталось ли чего-нибудь лишнего в полупрозрачных областях? После всего следует воспользоваться утилитами оптимизации.