Оптимизация JPEG

Cтатья взята с http://artlebedev.ru

Многие считают, что оптимизация формата JPEG — это банальный подбор соотношения качества и размера файла, а в сложных случаях — выборочное сжатие. Существует большое количество программ, позволяющих в одно действие уменьшить картинку до очень малых размеров. Но не стоит надеяться, что с помощью какой-то волшебной кнопки можно добиться столь же волшебного результата. Лучше разобраться, что происходит при сохранении JPEG, а потом найти простой и эффективный способ получения лучшего изображения при меньшем объеме файла.

Например, путем размещения прямоугольных объектов по восьмипиксельной сетке.
Рассмотрим пример:

32×32, Quality: 10 (Photoshop), 396 байт 

Несмотря на низкое значение параметра «Качество», верхний квадрат ровный и чистый, а нижний — «замусоренный»: 

Оба белых квадрата имеют одинаковый размер — 8х8 пикселей. Первый размещен ровно по сетке, а второй смещен на два пикселя вправо и вниз. 

Хозяйке на заметку При сохранении изображение разбивается на блоки 8×8 пикселей, и уже в них происходит оптимизация. Так как нижний квадрат не совпадает с ячейками сетки, оптимизатор подбирает «усредненные» цветовые значения между черным и белым цветами (в JPEGе каждый блок 8×8 кодируется набором коэффициентов для синусоиды). Из-за этого вокруг квадрата появляется «мусор».

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

13,51 КБ  

12,65 КБ

А вот так это выглядит при увеличении (красным отмечены границы ячеек восьмипиксельной сетки):

В некоторых статьях по оптимизации 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 КБ за полторы минуты работы с изображением, не потеряв при этом в качестве.

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

Несколько советов насчет оптимизации JPEG.

1. Указывая качество сжатия изображения, всегда называйте программу, в которой оптимизируете. Дело в том, что стандарт JPEG не содержит строгих правил: он всего лишь описывает,как допустимо преобразовать изображение, чтобы получить наименьший объем. А что именно станет делать оптимизатор, решает разработчик.

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

Единственный критерий, по которому следует сравнивать работу оптимизаторов, — соотношение качество/объем файла. Если сохранить изображение с качеством 55-60 в Фотошопе, оно будет выглядеть так же, как и в других программах при качестве 80, и иметь тот же размер.

2. Никогда не сохраняйте изображение с качеством 100. Это не максимальное качество, а математический предел оптимизации, при котором изображение будет весить неоправданно много. Качества 95 вполне хватит, чтобы сохранить изображение практически без потерь.

3. Следует помнить, что в Фотошопе при качестве ниже 50 включается дополнительный алгоритм оптимизации — color downsampling. Суть его заключается в том, что дополнительно усредняется цвет в соседних восьмипиксельных блоках:

48×48, quality 50, 530 байт

48×48, quality 51, 484 байта

Поэтому если на изображении присутствуют очень мелкие контрастные детали, не следует выставлять качество ниже 51.