Методы сжатия

Мы в Google постоянно ищем способы ускорить загрузку веб-страниц. Один из способов сделать это — уменьшить веб-изображения. Изображения составляют до 60%-65% байтов на большинстве веб-страниц, и размер страницы является основным фактором общего времени рендеринга. Размер страницы особенно важен для мобильных устройств, где изображения меньшего размера экономят пропускную способность и время автономной работы.

WebP — это новый формат изображений, разработанный Google и поддерживаемый в Chrome, Opera и Android, оптимизированный для более быстрого размещения в Интернете изображений меньшего размера. Изображения WebP примерно на 30 % меньше по размеру по сравнению с изображениями PNG и JPEG с эквивалентным визуальным качеством. Кроме того, формат изображения WebP имеет паритет функций с другими форматами. Он поддерживает:

  • Сжатие с потерями: Сжатие с потерями основано на кодировании ключевых кадров VP8 . VP8 — это формат сжатия видео, созданный On2 Technologies как преемник форматов VP6 и VP7.

  • Сжатие без потерь. Формат сжатия без потерь разработан командой WebP.

  • Прозрачность: 8-битный альфа-канал полезен для графических изображений. Альфа-канал можно использовать вместе с RGB с потерями, функция, которая в настоящее время недоступна ни в одном другом формате.

  • Анимация: поддерживает анимированные изображения с истинным цветом.

  • Метаданные: могут содержать метаданные EXIF ​​и XMP (например, используемые камерами).

  • Цветовой профиль: может иметь встроенный профиль ICC.

Благодаря лучшему сжатию изображений и поддержке всех этих функций WebP может стать отличной заменой для большинства форматов изображений: PNG, JPEG или GIF. Более того, знаете ли вы, что WebP предоставляет новые возможности оптимизации изображений, такие как поддержка изображений с потерями и прозрачностью? Ага! WebP — это швейцарский армейский нож форматов изображений.

Так как же делается это волшебство? Засучим рукава и заглянем под капот.

WebP с потерями

Сжатие с потерями WebP использует ту же методологию, что и VP8 для прогнозирования кадров (видео). VP8 основан на блочном предсказании и, как и любой блочный кодек, VP8 делит кадр на более мелкие сегменты, называемые макроблоками.

В каждом макроблоке кодер может прогнозировать избыточное движение и информацию о цвете на основе ранее обработанных блоков. Кадр изображения является «ключевым» в том смысле, что он использует только уже декодированные пиксели в непосредственной пространственной окрестности каждого из макроблоков и пытается закрасить неизвестную их часть. Это называется прогнозирующим кодированием (см. внутрикадровое кодирование видео VP8 ).

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

После математически обратимого преобразования (знаменитого DCT, что означает дискретное косинусное преобразование) остатки обычно содержат множество нулевых значений, которые можно сжать гораздо эффективнее. Затем результат квантуется и энтропийно кодируется. Забавно, что шаг квантования — единственный, на котором биты отбрасываются с потерями (ищите деление на QPj на диаграмме ниже). Все остальные шаги обратимы и без потерь!

На следующей диаграмме показаны этапы сжатия с потерями WebP. Отличительные особенности по сравнению с JPEG обведены красным.

WebP использует блочное квантование и адаптивно распределяет биты по разным сегментам изображения: меньше битов для сегментов с низкой энтропией и больше битов для сегментов с более высокой энтропией. WebP использует арифметическую энтропийную кодировку , что обеспечивает лучшее сжатие по сравнению с кодировкой Хаффмана, используемой в JPEG.

Режимы внутреннего предсказания VP8

Режимы внутреннего предсказания VP8 используются с тремя типами макроблоков:

  • Яркость 4x4
  • 16x16 яркость
  • цветность 8x8

Эти макроблоки совместно используют четыре общих режима внутреннего предсказания:

  • H_PRED (горизонтальный прогноз). Заполняет каждый столбец блока копией левого столбца L.

  • V_PRED (вертикальный прогноз). Заполняет каждую строку блока копией предыдущей строки A.

  • DC_PRED (предсказание постоянного тока). Заполняет блок одним значением, используя среднее значение пикселей в строке выше A и столбце слева от L.

  • TM_PRED (прогноз TrueMotion). Режим, получивший свое название от технологии сжатия, разработанной On2 Technologies . В дополнение к строке A и столбцу L TM_PRED использует пиксель P выше и левее блока. Горизонтальные различия между пикселями в A (начиная с P) распространяются с использованием пикселей из L для начала каждой строки.

На приведенной ниже диаграмме показаны различные режимы прогнозирования, используемые при сжатии с потерями WebP.

Для блоков яркости 4x4 имеется шесть дополнительных внутренних режимов, подобных V_PRED и H_PRED, но соответствующих предсказанию пикселей в разных направлениях. Подробнее об этих режимах можно узнать в Руководстве по битовому потоку VP8 .

Адаптивная блочная квантизация

Чтобы улучшить качество изображения, изображение сегментируется на области, имеющие визуально схожие характеристики. Для каждого из этих сегментов параметры сжатия (шаги квантования, сила фильтрации и т. д.) настраиваются независимо. Это обеспечивает эффективное сжатие за счет перераспределения битов туда, где они наиболее полезны. VP8 допускает максимум четыре сегмента (ограничение битового потока VP8).

Почему WebP (с потерями) лучше, чем JPEG

Кодирование с предсказанием — главная причина, по которой WebP побеждает JPEG. Блочное адаптивное квантование также имеет большое значение. Фильтрация помогает на средних/низких битрейтах. Логическое арифметическое кодирование обеспечивает увеличение сжатия на 5-10% по сравнению с кодированием Хаффмана.

WebP без потерь

Кодирование WebP без потерь основано на преобразовании изображения с использованием нескольких различных методов. Затем выполняется энтропийное кодирование параметров преобразования и преобразованных данных изображения. Преобразования, применяемые к изображению, включают пространственное предсказание пикселей, преобразование цветового пространства, использование локально возникающих палитр, упаковку нескольких пикселей в один пиксель и замену альфа-канала. Для энтропийного кодирования мы используем вариант кодирования LZ77-Хаффмана, который использует двумерное кодирование значений расстояния и компактных разреженных значений.

Предикторное (пространственное) преобразование

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

Существует 13 различных возможных режимов предсказания. Наиболее распространены левые, верхние, верхние левые и верхние правые пиксели. Остальные представляют собой комбинации (средние значения) левого, верхнего, верхнего левого и верхнего правого.

Цвет (декорреляция) Преобразование

Целью преобразования цвета является декорреляция значений R, G и B каждого пикселя. Преобразование цвета сохраняет значение зеленого (G) как есть, преобразует красный (R) на основе зеленого и преобразует синий (B) на основе зеленого, а затем на основе красного.

Как и в случае преобразования предиктора, сначала изображение делится на блоки, и один и тот же режим преобразования используется для всех пикселей в блоке. Для каждого блока существует три типа элементов преобразования цвета: зеленый_в_красный, зеленый_в_синий и красный_в_синий.

Вычесть зеленое преобразование

«Преобразование вычитания зеленого» вычитает значения зеленого из значений красного и синего каждого пикселя. Когда присутствует это преобразование, декодеру необходимо добавить значение зеленого как к красному, так и к синему. Это частный случай приведенного выше общего преобразования цветовой декорреляции, достаточно частого, чтобы гарантировать отсечку.

Цветовая индексация (палитры) Преобразование

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

Кодирование цветового кэша

Сжатие WebP без потерь использует уже просмотренные фрагменты изображения для восстановления новых пикселей. Он также может использовать локальную палитру, если не найдено ничего интересного. Эта палитра постоянно обновляется для повторного использования последних цветов. На изображении ниже вы можете видеть, как локальный кэш цветов в действии постепенно обновляется 32 недавно использованными цветами по мере сканирования вниз.

LZ77 Обратная ссылка

Обратные ссылки представляют собой кортежи длины и кода расстояния. Длина указывает, сколько пикселей в порядке строк сканирования должно быть скопировано. Код расстояния — это число, указывающее положение ранее увиденного пикселя, из которого пиксели должны быть скопированы. Значения длины и расстояния сохраняются с использованием префиксного кодирования LZ77.

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

На приведенной ниже диаграмме показан LZ77 (вариант 2D) с сопоставлением слов (вместо пикселей).

WebP с потерями с альфа-каналом

Помимо WebP с потерями (цвета RGB) и WebP без потерь (RGB без потерь с альфа-каналом), существует еще один режим WebP, который позволяет кодировать с потерями для каналов RGB и кодировать без потерь для альфа-канала. Такая возможность (RGB с потерями и альфа без потерь) сегодня недоступна ни для одного из существующих форматов изображений. Сегодня веб-мастера, которым нужна прозрачность, должны без потерь кодировать изображения в формате PNG, что приводит к значительному увеличению размера. WebP alpha кодирует изображения с низким битрейтом на пиксель и обеспечивает эффективный способ уменьшения размера таких изображений. Сжатие без потерь альфа-канала добавляет всего 22% байтов по сравнению с кодированием с потерями (качество 90) WebP.

В целом, замена прозрачного PNG на WebP с потерями и альфа-каналом дает в среднем 60-70% экономии размера. Было подтверждено, что это очень привлекательная функция для мобильных сайтов с большим количеством значков (например, Everything.me).