Описание шести методик, позволяющих получить меньшие по размеру JPEG-изображения практически без потери качества.
Оптимизация изображений на сегодняшний день занимает ключевое место, когда речь идет о скорости сайта. Хотя все изображения запрашиваются на этапе полной загрузки (уже после отрисовки страницы в браузере), но от 50% до 90% размера страниц сайта - это именно изображения. И грамотная работа с ними (а не только Save for Web в Photoshop) позволяет существенно уменьшить размер сайта и сделать его быстрее для пользователей.
В статье пойдет речь о тех приемах, которые многие, скорее всего, не знают. Не все из них просты в освоении или могут быть автоматизированы, но знание этих приемов позволит сделать изображения меньше по размеру и не потерять в качестве.
Я предполагаю, что вы уже умеете сохранять изображение без избыточной мета-информации в нужном на страницах сайте размере. И даже знаете, чем отличается последовательные (progressive) JPEG-изображения от обычных. Далее будут разобраны дополнительные инструменты и техники, которыми можно дополнить ваш арсенал работы с изображениями.
1. Оптимизация для решетки 8x8
Достаточно известный прием (автор метода - Сергей Чикуёнок), использующий особенность JPEG сжимать изображение квадратами 8x8 (из-за DCT преобразования). Для оптимальной четкости изображения (и понижения его качества без видимого ущерба для картинки) нужно выровнять границы элементов изображения по решетке 8x8.
При переводе в формат JPEG изображение нарезается на квадраты 8x8, которые могут быть независимо оптимизированы (с большим числом деталей - с лучшим качеством, однотонные - с меньшем качеством). Если детали изображения не будут совпадать с решеткой 8x8, то на границе решетки будет существенное размытие деталей (которое, конечно, можно нивелировать за счет более высокого качества сжатия - но это приведет к увеличению размера изображения).
Выигрыш от такой техники обычно составляет 5-10%.
Для автоматизации техники возможно настроить смещение границ изображения на 1-4 пикселя по обоим осям с тем же качеством (и сохранение среди результирующих изображений). Изображения меньшего размера будет лучше оптимизировано под решетку 8x8.
2. Селективная оптимизация
Логичным продолжением оптимизации для решетки 8x8 будет выборочное качество изображения (количество деталей) для разных зон изображения. Техника называется Selective optimization и доступна в нескольких инструментах.
В частности, в Adobe Photoshop необходимо создать одну или несколько масок изображений для лучшего качества (остальное изображение будет сжато сильнее) и применить ее при сохранении JPEG изображения (подробная инструкция). В результате - при том же качестве отображения деталей размер изображения будет меньше.
Эта техника дает выигрыш в 3-20% относительно исходного изображения.
3. Оптимизация цвета и яркости
Еще один прием от Сергея позволяет отбросить цветовую информацию для тех частей изображения, которые комбинируют черный и другой цвет в мелких текстурах. За счет уменьшения информации о смене цвета JPEG получается меньше по размеру, но на качестве изображения это не отражается (ведь все равно, какая нулевая яркость у цвета, если он черный).
Прием достаточно сложен в освоении: нужно переключиться в режим Lab Color, затем в Channels выбрать цвета, у которых уменьшить детализацию (смазать фон), затем меняем Levels, чтобы цвет изображения остался прежним. (Полная версия руководства доступна здесь).
Выигрыш от таких манипуляций с изображением может достигать еще 10-15%.
4. Оптимизация субвыборки
В качестве более автоматизируемой альтернативы уменьшению цветовой информации с сохранением яркости изображения можно рассмотреть технику Chroma subsampling (субвыборка яркости). Если кратко, то при сохранении канала яркости в YCbCr-представлении изображения (Y - яркость, Cb - один цвет (синий), Cr - второй цвет (красный)) уменьшаются различия в цветах соседних пикселей. 1x1 subsampling означает отсутствие каких-либо изменений в цвете, 2x1 и 1x2 усредняют информацию только по одному измерению (горизонтали или вертикали, соответственно). 2x2 subsampling усредняет информацию сразу в 4 пикселях.
В другом представлении схемы - J:a:b (например, 4:2:2) - первая цифра означает ширину области усреднения (в данном случае 4 пикселя), вторая цифра - число результирующих значений цветов в первой строке, третья цифра - число результирующих цветов во второй строке. Всего строк 2 (высота области - 4 пикселя). Таким образом, схема 4:2:2 соответствует 2x1 subsampling, 4:4:4 - 1x1 subsampling, 4:2:0 - 2x2 subsampling, 4:4:0 - 1x2 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 изображения с тем же качеством.
