Часть 2
В первой части мы разобрали, как изображение представлено в виде данных: от пикселей и массивов байтов до контейнеров, декодеров и видеопамяти.
Теперь переходим к самому сложному и интересному этапу — как кодеки уменьшают эти данные в десятки раз, сохраняя визуальное качество.
Почти все современные кодеки используют одни и те же фундаментальные идеи, но реализуют их по-разному. Разберём эти идеи последовательно — от самых простых до математически сложных.
🔄 Сжатие с потерями и без потерь
Существует два базовых подхода к сжатию изображений.
🟢 Lossless (без потерь)
- изображение восстанавливается полностью
- ни один пиксель не изменяется
- подходит для графики, UI, скриншотов
🔴 Lossy (с потерями)
- часть информации отбрасывается
- визуально изменения часто незаметны
- позволяет уменьшать размер файлов в разы
💡Современные форматы (WebP, AVIF, JPEG XL) могут комбинировать оба подхода.
Например, альфа-канал кодируется без потерь, а цвет — с потерями.
🎨 Хрома-субдискретизация (Chroma Subsampling)
Человеческий глаз гораздо чувствительнее к яркости, чем к цвету.
На этом основано цветовое пространство YCbCr, где:
- Y— яркость (luma)
- Cb / Cr — цветовая информация (chroma)
Вместо хранения полной цветовой информации для каждого пикселя кодек может хранить цвет реже, а затем восстанавливать его на этапе декодирования.
Популярные схемы:
- 4:4:4 — без субдискретизации, цвет сохраняется полностью
- 4:2:2 — половина цветовой информации отбрасывается
- 4:2:0 — сохраняется только четверть исходных цветовых данных
Это необратимое преобразование, но при этом изображение остаётся визуально качественным и значительно легче по весу.
🧠 Пространственная локальность (Spatial Locality)
Рассмотрим два изображения одинакового размера:
- первое — полностью случайный шум
- второе — заливка одним цветом
Даже при одинаковом разрешении:
- шумное изображение будет весить десятки килобайт
- однотонное — сотни байт
Почему? — Ответ кроется в форматах изображений, кодеках и инструментах сжатия
Потому что в реальных изображениях соседние пиксели обычно связаны между собой:
- одинаковый цвет
- плавный градиент
- повторяющийся узор
Это свойство называется пространственной локальностью.
Кодеки активно используют его, разбивая изображение на регионы и сжимая каждый регион отдельно.
🧱 Блочное кодирование
Большинство кодеков работают не с целым изображением, а с блоками.
Примеры:
- JPEG всегда использует блоки 8×8
- AVIF поддерживает блоки от 4×4 до 128×128
📌 Блоки выбираются кратными степеням двойки, чтобы упростить вычисления.
Для однотонного неба выгодно использовать крупные блоки,
для сложных текстур — мелкие.
🌳 Superblocks и Quadtree
Современные кодеки (например, AVIF) используют иерархическое разбиение изображения.
Процесс выглядит так:
- изображение делится на большие блоки — superblocks
- каждый блок анализируется
- если блок слишком «сложный», он делится дальше
- если однородный — остаётся крупным
Для управления этим процессом используется структура данных quadtree.
💡 Quadtree также применяются:
- в картах
- в игровых движках
- в геопространственных системах
🔮 Режимы предсказания (Prediction Modes)
Кодеки не хранят пиксели напрямую.
Они пытаются предсказать содержимое блока, а затем сохраняют разницу между предсказанием и реальностью.
Примеры предсказаний:
- усреднение соседних пикселей
- повторение пикселей по направлению
- использование верхней строки и левого столбца блока
- учёт координат пикселя внутри блока
Чем точнее предсказание — тем меньше данных нужно сохранить.
🎨 Chroma from Luma
В некоторых кодеках (AVIF, JPEG XL) цветовые каналы могут предсказываться на основе яркости.
Идея проста:
- яркость часто коррелирует с цветом
- значит, цвет можно восстановить из luma
Это дополнительно снижает объём данных без заметной потери качества.
📋 Копирование блоков
Вместо хранения пикселей кодек может сохранить инструкцию:
«Скопировать содержимое другого блока»
Это особенно эффективно для:
- скриншотов
- интерфейсов
- изображений с повторяющимися элементами
🔢 Преобразования (Transforms)
После предсказания кодек получает остатки (residuals) — разницу между прогнозом и реальными пикселями.
Чтобы эффективно их хранить, применяются математические преобразования, чаще всего DCT (дискретное косинусное преобразование).
DCT:
- разделяет изображение на частотные компоненты
- выделяет низкие и высокие частоты
- позволяет отбрасывать детали, малозаметные глазу
📌 Современные кодеки:
- используют быстрые алгоритмы (Fast DCT)
- применяют SIMD-инструкции
- могут выполнять трансформации на GPU
- иногда используют альтернативные преобразования (например, синусное)
🔍 Квантование (Quantization)
После преобразования коэффициенты:
- округляются
- делятся на специальные значения
- превращаются в целые числа
Цель — получить как можно больше нулей, потому что нули хорошо сжимаются.
В JPEG используются разные таблицы квантования:
- для яркости
- для цвета
В современных кодеках:
- параметры квантования могут меняться по изображению
- сложные участки сохраняются качественнее
- простые — агрессивнее сжимаются
🖼 Progressive rendering (Interlacing)
Коэффициенты можно сохранить в таком порядке, чтобы изображение появлялось постепенно:
- сначала грубая версия
- затем всё больше деталей
Это называется прогрессивная загрузка и напрямую влияет на производительность сайта.
📌 Для JPEG и AVIF это почти бесплатная оптимизация,
но для PNG прогрессивный режим увеличивает размер файла.
📦 Энтропийное кодирование
Последний шаг — максимально плотная упаковка чисел.
Используются алгоритмы:
- Huffman coding
- Arithmetic coding
- ANS (Asymmetric Numeral Systems)
Идея:
- частые значения → короткие коды
- редкие → длинные
📐 Теоретический предел задаётся энтропией Шеннона — минимальным количеством бит, необходимых для кодирования данных.
Современные кодеки с помощью арифметического кодирования подходят к этому пределу очень близко.
🧼 Пост-обработка и фильтры
Поскольку lossy-сжатие отбрасывает данные, возникают артефакты:
- блочность
- размытые края
- ringing
- цветовые искажения
- «москитный шум»
Чтобы уменьшить их, кодеки применяют пост-процессинг:
- deblocking-фильтры
- Wiener-фильтр
- CDEF (в AV1 / AVIF)
Фильтры применяются в строгом порядке, формируя конвейер обработки.
📌 Итоговые выводы
Современные форматы изображений основаны на одних и тех же принципах:
- изображения — это данные
- кодеки используют предсказания и математику
- нет универсального «лучшего» формата
- качество, размер и сложность — всегда компромисс
Понимание этих процессов помогает:
- ⚡ ускорять загрузку сайтов
- 📉 экономить трафик
- 📊 улучшать Core Web Vitals
- 🎯 осознанно выбирать форматы изображений
