ARTLEBEDEV
  • Техногрет
  • Оптимизация JPEG. Часть вторая

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Сергей Чикуенок

    6 июня 2005


    В некоторых статьях по оптимизации JPEG, попадавшихся мне в интернете, авторы все-таки пытаются пойти дальше параметров Quality и Progressive и описывают такой важный показатель, как цвет. Однако все рекомендации на этот счет стандартны: «поменьше цветов» и «добавьте немного блюра». Попробуем разобраться, что можно сделать с цветом для получения меньшего объема файла.

    В значительной степени на объем JPEG-файла влияет цветовая модель YCbCr, в которой хранится изображение. Она похожа на знакомую дизайнерам модель HSV, где изображение состоит из трех компонентов: оттенок, насыщенность, яркость. Наиболее информативным и важным для человеческого глаза является последний компонент, поэтому оптимизаторы стараются сжимать цветовые каналы, минимально затрагивая яркость. В Photoshop есть цветовой режим Lab, с помощью которого мы можем помочь оптимизатору лучше справиться со своей работой.

    Возьмем для примера уже знакомую по первой части микроволновку Sweetheart. У нее на дверце есть мелкая сетка, которая идеально подходит для цветовой оптимизации. После простого сжатия с качеством 55 картинка весит 64,39 КБ.

    990×405, Quality: 55 (Photoshop), 64,39 КБ
    (нажмите, чтобы рассмотреть)


    Откроем оригинал в Фотошопе и переключимся в цветовой режим Lab: Image → Mode → Lab Color.

    Хозяйке на заметку

    Режим Lab близок по идеологии к HSV и YCbCr, но не является их копией. Канал Lightness содержит информацию о яркости изображения, канал a показывает, насколько оно красное или зеленое, канал b — насколько синее или желтое. Несмотря на такие различия, этот режим поможет нам избавиться от ненужной цветовой информации.


    Перейдем в палитру Channels и посмотрим на каналы a и b. В них отчетливо видна текстура сетки, причем эта сетка заметно делится на три блока, отличающихся по яркости.


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

    Нашей целью будет поочередное сглаживание этих блоков в разных цветовых каналах.

    Хозяйке на заметку

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


    Переходим в канал а, поочередно выделяем каждый блок и применяем к каждому фильтр Median (Filter → Noise → Median). Значение параметра Radius должно быть минимально допустимым (при котором пропадает текстура), чтобы не сильно искажать блики. У меня получились следующие значения: для первого блока — 4, для второго — 2, для третьего — 4. Теперь дверца печки выглядит так:

    (Нажмите, чтобы рассмотреть)


    Она стала менее насыщенной, и нам нужно это исправить. Чтобы сразу видеть все изменения цвета, продублируем текущее окно: Window → Arrange → New Window for имя документа. В новом окне кликнем на канал Lab, чтобы видеть само изображение. В результате рабочее пространство должно выглядеть примерно так:

    Справа — оригинал,
    слева — дубликат оптимизируемого документа,
    внизу — рабочая область

    Выделяем сразу все три блока канала a в рабочей области и вызываем окно Levels (Ctrl+L или Image → Adjustments → Levels). Перетаскиваем средний ползунок левее, чтобы цвет внутренностей микроволновки на дубликате совпадал с оригинальным (у меня получилось значение 1,08).

    Проделываем те же операции с каналом b и смотрим на результат:

    990×405, Quality: 55 (Photoshop), 59,29 КБ
    (Нажмите, чтобы рассмотреть)

    Я сэкономил 5 КБ за полторы минуты работы с изображением, не потеряв при этом в качестве.

    Хочу добавить, что этот метод не универсален, он годится только для изображений с контрастной мелкой текстурой (например, мелкий темный текст на светлом фоне). Для крупной текстуры выиграть в объеме не получится, а неконтрастные объекты заметно окрасятся в цвет фона.

    1
    2
    3