Продолжаем мучить фотошоп в поисках оптимального способа сохранения графики в формате PNG. Сегодня мы рассмотрим способ оптимизации, основанный на восприятии цвета человеческим глазом (йес! давно хотелось написать что-нибудь такое пафосное :). Выражаясь человеческим языком: мы будем снижать детализацию полупрозрачных областей картинки. Именно тех областей, на которые обычный зритель не обращает внимания.
Прежде чем приступать к оптимизации, необходимо разобраться, как сохраняются полупрозрачные PNG (PNG24 в терминологии фотошопа). В этом формате каждый пиксель описывается четырьмя байтами: RGBA (red, green, blue, alpha). Последний байт отвечает за прозрачность.
Возьмем для примера два пикселя в формате RGBA: 123,49,54,0 и 65,130,60,0. Несмотря на то, что значения этих пикселей разные, для зрителя они выглядят абсолютно одинаково: они оба полностью прозрачные. Так как пиксели разные, PNG-упаковщик не сможет их нормально обработать фильтрами. А что будет, если мы оба этих пикселя заменим на 0,0,0,0 и 0,0,0,0? Зритель совершенно ничего не заметит, а вот для упаковщика разница будет огромной: эта последовательность гораздо эффективнее упаковывается фильтрами. Приведенный выше пример можно записать как 0(8), то есть значение 0 повторить 8 раз.
Именно на этом и будет основан наш способ оптимизации — мы будем заменять детализированные полупрозрачные области на менее детализированные, которые будут лучше упаковываться. Для этого урока нам понадобится плагин Remove Transparency.
Откроем исходное изображение в фотошопе:
Оригинал весит 199 КБ. Первое, что бросается в глаза, это тень часов и блики маятника. Продублируем текущий слой и выполним на нем фильтр Photo Wiz → Remove Transparency. Теперь мы видим, что же на самом деле сохранилось в изображении:
Посмотрим поближе на тень:
Отчетливо виден шум, но сама область — полупрозрачная (прозрачность менее 50%), и пользователь его совсем не заметит.
Эта область — наш основной кандидат на оптимизацию. Если бы у нас был исходник, мы бы просто переделали тень, перезалив ее сплошным цветом (вы можете увидеть это в скринкасте). Но что делать, если исходник нам не доступен? Правильно — нам помогут волшебные маски. Наша задача: «упростить» цвета в полупрозрачных областях. Для этого нам пригодится фильтр Median, который сглаживает переходы между пикселями.
Делаем Ctrl+клик или ⌘+клик по слою Layer 0 и создаем на основе выделения маску для слоя Layer 0 copy (если вы не знаете, как это сделать, перечитайте предыдущие уроки). Переходим в палитру Channels и делаем дубликат канала с маской. Теперь необходимо указать область воздействия фильтра Median. Сами часы трогать нельзя, а вот с тенью и бликами можно немного поиграться. Инвертируем маску (Ctrl+I или ⌘+I) и применяем к ней Levels (Ctrl+L или ⌘+L). Передвигаем светлый ползунок влево до значения 75 (подбирается на глаз). Таким образом мы получили маску, которой будет ограничиваться действие фильтра Median:
Выделяем текущий канал (Ctrl+клик или ⌘+клик), переходим в палитру Layers, кликаем на пиктограмме изображения в слое Layer 0 copy (именно на нее, а не на маску) и применяем фильтр Noise → Median. Значение радиуса выбираем на глаз, у меня получилось 3:
Как видите, шум совсем пропал. Попробуем сохранить изображение в формате PNG (не забудьте включить маску, если вы ее отключили).
У меня получилось изображение весом 172 КБ (было 199 КБ) — вполне неплохо за такое короткое время. А умные мальчики и девочки должны сразу догадаться, что можно еще оптимизировать саму маску (например, с помощью Posterize или цветового режима Indexed) и сделать вес картинки еще меньше :).
Я показал простой способ оптимизации полупрозрачные области изображения. Но наибольший эффект достигается при комбинировании этого способа со способом из предыдущего урока. Алгоритм такой: сначала оптимизируете «сердцевину» — непрозрачные пиксели, — перегнав их в индексирванную палитру, затем добавляете полупрозрачные пиксели, снизив им детализацию. Тогда у вас получится такой же результат, как в этом примере: со 199 КБ сможете ужать картинку до 88 КБ без видимых ухудшений.
***
Так получилось, что я пока не знаю, что можно еще написать на тему использования фотошопа для веб-разработки. Можете в комментариях предлагать свои идеи и задавать вопросы, самые интересные и востребованные будут описаны в виде уроков. Это могут быть как общие вопросы (например, как оптимизировать JPEG), так и частные (есть макет, как лучше всего сохранить графику).
