6 секретных техник оптимизации JPEG-изображений

Оптимизация изображений на сегодняшний день занимает ключевое место, когда речь идет о скорости сайта. Хотя все изображения запрашиваются на этапе полной загрузки (уже после отрисовки страницы в браузере), но от 50% до 90% размера страниц сайта — это именно изображения. И грамотная работа с ними (а не только Save for Web в Photoshop) позволяет существенно уменьшить размер сайта и сделать его быстрее для пользователей.

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

Я предполагаю, что вы уже умеете сохранять изображение без избыточной мета-информации в нужном на страницах сайте размере. И даже знаете, чем отличается последовательные (progressive) JPEG-изображения от обычных. Далее будут разобраны дополнительные инструменты и техники, которыми можно дополнить ваш арсенал работы с изображениями.

1. Оптимизация для решетки 8×8

Достаточно известный прием (автор метода — Сергей Чикуёнок), использующий особенность JPEG сжимать изображение квадратами 8×8 (из-за DCT преобразования). Для оптимальной четкости изображения (и понижения его качества без видимого ущерба для картинки) нужно выровнять границы элементов изображения по решетке 8×8.

При переводе в формат JPEG изображение нарезается на квадраты 8×8, которые могут быть независимо оптимизированы (с большим числом деталей — с лучшим качеством, однотонные — с меньшем качеством). Если детали изображения не будут совпадать с решеткой 8×8, то на границе решетки будет существенное размытие деталей (которое, конечно, можно нивелировать за счет более высокого качества сжатия — но это приведет к увеличению размера изображения).

Выигрыш от такой техники обычно составляет 5-10%.

Для автоматизации техники возможно настроить смещение границ изображения на 1-4 пикселя по обоим осям с тем же качеством (и сохранение среди результирующих изображений). Изображения меньшего размера будет лучше оптимизировано под решетку 8×8.

2. Селективная оптимизация

Логичным продолжением оптимизации для решетки 8×8 будет выборочное качество изображения (количество деталей) для разных зон изображения. Техника называется Selective optimization и доступна в нескольких инструментах.

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

Эта техника дает выигрыш в 3-20% относительно исходного изображения.

3. Оптимизация цвета и яркости

Еще один прием от Сергея позволяет отбросить цветовую информацию для тех частей изображения, которые комбинируют черный и другой цвет в мелких текстурах. За счет уменьшения информации о смене цвета JPEG получается меньше по размеру, но на качестве изображения это не отражается (ведь все равно, какая нулевая яркость у цвета, если он черный).

Прием достаточно сложен в освоении: нужно переключиться в режим Lab Color, затем в Channels выбрать цвета, у которых уменьшить детализацию (смазать фон), затем меняем Levels, чтобы цвет изображения остался прежним. (Полная версия руководства доступна здесь).

Выигрыш от таких манипуляций с изображением может достигать еще 10-15%.

4. Оптимизация субвыборки

В качестве более автоматизируемой альтернативы уменьшению цветовой информации с сохранением яркости изображения можно рассмотреть технику Chroma subsampling (субвыборка яркости). Если кратко, то при сохранении канала яркости в YCbCr-представлении изображения (Y — яркость, Cb — один цвет (синий), Cr — второй цвет (красный)) уменьшаются различия в цветах соседних пикселей. 1×1 subsampling означает отсутствие каких-либо изменений в цвете, 2×1 и 1×2 усредняют информацию только по одному измерению (горизонтали или вертикали, соответственно). 2×2 subsampling усредняет информацию сразу в 4 пикселях.

В другом представлении схемы — J:a:b (например, 4:2:2) — первая цифра означает ширину области усреднения (в данном случае 4 пикселя), вторая цифра — число результирующих значений цветов в первой строке, третья цифра — число результирующих цветов во второй строке. Всего строк 2 (высота области — 4 пикселя). Таким образом, схема 4:2:2 соответствует 2×1 subsampling, 4:4:4 — 1×1 subsampling, 4:2:0 — 2×2 subsampling, 4:4:0 — 1×2 subsampling.

Последнюю схему subsampling поддерживает большое количество оборудования и прикладных программ. В частности, ImageMagick (через опцию -sampling-factor) и GIMP. По результативности схема 4:2:0 позволяет выиграть 17%.

5. Качество меньше 100%

«100% качество» не гарантирует отсутствия изменений при сохранении изображения (оно, в любом случае, будет хуже исходного, поскольку используется DCT и таблицы Хаффмана). Но такой режим включает максимальное количество деталей и минимальный радиус фильтров, и это не улучшает качества изображения, а только увеличивает его размер.

Оптимальным будет использование 90-95% максимального качества (в зависимости от вашего редактора или консольной утилиты): это либо 90-95% при максимуме 100%, либо 10-11 при максимуме в 12. В этом случае размер изображения будет меньше при том же визуальном качестве. И из изображения не будут удалены небольшие детали (что может произойти при дополнительных оптимизациях, включаемых в вашем редакторе, по умолчанию, при качестве меньше 90).

6. Оптимизация таблиц Хаффмана

Кодирование Хаффмана позволяет представить цветовую информацию (по разным каналам) в качестве сжимаемой таблицы (с потерей информации). JPEG-файлы используют именно эти таблицы. Оптимальный выбор порядка расположения коэффициентов в такой таблице позволяет существенно сократить ее размер. Этим и пользуются различные варианты утилит для оптимизации таблиц Хаффмана.

Наиболее известной является jpegtran, которая входит в набор libjpeg-progs и во множество утилит редактирования и оптимизации изображения. Менее известным вариантом оптимизатора является набор библиотек libjpeg-turbo, который содержит улучшенные инструкции и дополнительную оптимизацию для таблиц Хаффмана.

И совсем малоизвестным будет пакет mozjpeg, который реализует все наработки libjpeg-turbo и некоторые дополнительные улучшения по производительности. Каждая из описанных библиотек обратно совместима с jpegtran (и может использоваться как полноценная замена этой утилите).

Выигрыш от оптимизированных таблиц Хаффмана составляет 5-20% на изображение.

Описанные 6 методик, без всякого сомнения, дополнят ваш инструментарий и позволят получить меньшие по размеру JPEG изображения с тем же качеством.

Источник: searchengines.ru