В этой статье мы научимся на практике применять каналы и маски для оптимизации изображений в формате PNG.
Первое, на что хочется обратить внимание, так это на игнорируемые многими разработчиками маски влияния на цветовое распределение и на смешивание в окне Save for Web:
Давайте посмотрим, как это может помочь нам в оптимизации PNG-изображения. Возьмем исходник:
Попробуем сохранить его в PNG8 со следующими настройками: Color reduction: Adaptive, Dither: No dithering, Colors: 256. Не будем рассуждать, насколько целесообразно сохранять такое изображение в PNG (мы ведь тренируемся), лучше посмотрим на то, что получилось:
42 КБ
Первое, что мне бросается в глаза — «побитый» маятник. На общем фоне это очень яркое пятно, которое притягивает взгляд зрителя, и это же пятно выглядит очень некрасиво. Попробуем сгладить цветовые переходы маятника, выставив в параметрах сохранения Dither: 100%.
46 КБ
Маятник выглядит немного лучше, чего не скажешь о всем остальном изображении: вес файла увеличился на 4 КБ и на однородном фоне появился шум:
Зачастую от шума можно избавиться, снизив значение параметра Dither, но и качество самого изображения может пострадать.
Исходя из этих проблем, попробуем совершить невероятное: сделаем так, чтобы изображение выглядело лучше при меньшем количестве цветов и весе изображения. Для этого нам помогут отмеченные выше маски влияния.
Начнем с цвета. Переходим в палитру Channels и создаем новый канал под названием color. Мы уже определили, что проблемной областью является маятник, поэтому в нужном месте рисуем белый кружок (для удобства лучше включить канал RGB):
Переходим в диалоговое окно Save for Web и выставляем там следующие параметры: Color reduction: Adaptive, Dither: No, Colors: 128 (как видите, количество цветов делаем в 2 раза меньше). Теперь надо выбрать маску влияния на цвет: жмем на иконку 
рядом с Color reduction и в списке выбираем канал color. Смотрим:
Сейчас вы увидели маску влияния в действии: маятник выглядит прекрасно, чего не скажешь о всем остальном. По сути, мы сказали фотошопу: «Область маятника очень важна, поэтому постарайся сделать так, чтобы там сохранилось как можно больше цветов». Маска влияния работает точно так же, как и обычная маска: белый цвет означает максимальный приоритет области пикселей в основном изображении, черный — минимальный. Все промежуточные оттенки пропорционально влияют на приоритет области.
Маятник перетащил одеяло на себя, поэтому нужно снизить интенсивность цвета белого кружка, чтобы остальные области не были обделены цветом. Закрываем окно Save for Web, выделяем канал color и применяем к нему Levels (Ctrl+L или ⌘+L). Ставим нижнему белому ползунку в Output levels значение 50. Таким образом мы снизили интенсивность цвета в маске, сказав, что самый яркий цвет должен быть не больше 50:
Пробуем еще раз сохранить с теми же параметрами:
Уже лучше, но появились другие проблемные области, которые тоже нужно исправить:
Думаю, вы уже поняли, как работают маски влияния. Вы подсказываете фотошопу, каким именно областям изображения нужно уделить больше внимания при снижении количества цветов. Чем ярче цвет в маске, тем больше цветов из этой области старается сохранить фотошоп. Методом проб и ошибок у меня получилась вот такая маска (вы можете скопировать изображение себе, чтобы проверить в действии):
Маска влияния на смешивание (dithering) работает точно так же: вы указываете, как сильно нужно смешать пиксели в указанных областях. Помните, что при смешивании образуются нерегулярные структуры цветов, которые плохо сжимаются PNG-упаковщиком (поэтому изображение с включенным смешиванием, как правило, весит больше, чем без него). С помощью маски можно указать, какие именно области нуждаются в смешивании, сократив, тем самым, итоговый вес файла.
У меня получилась вот такая маска:
Соединив все вместе получим такое изображение (параметры сохранения: Adaptive, 128 цветов):
Вполне неплохо для 128 цветов, не находите? Сделаем последние штрихи: увеличим количество цветов до 180, а верхнюю границу смешивания снизим до 80%. В итоге наш модельный ряд выглядит следующим образом:
256 цветов, без смешивания, без оптимизации
42 КБ
180 цветов
34 КБ
128 цветов
31 КБ
Попробуйте немного поиграться с этими масками, чтобы понять, как они работают и когда их стоит применять. В следующей части рассмотрим, как с помощью масок можно оптимизировать полупрозрачные PNG.
. Особенно с учетом того, что текст растягивается и можно менять размеры шрифта.
