Если вы пропустили предыдущие публикации в этой серии, начните с Части 1: Модели цветов для человека и устройств и Части 2: Данные пикселей от энкодеров к декодерам. В них рассматривались основы сжатия изображений. Теперь, в этой заключительной части, мы применим более практический подход. Мы проведем несколько экспериментов с различными кодеками и методами сжатия, а также рассмотрим полезные инструменты для создания собственного пайплайна работы с изображениями.
Устроим им соревнование
Давайте рассмотрим популярную тему для обсуждения: «Является ли формат JPEG по-прежнему лучшим для сжатия изображений?»
К сожалению, однозначного ответа нет. У каждой задачи свой уникальный контекст. Хотите ли вы оптимизировать скорость кодирования? Или вам нужно обслуживать фотографии высокого разрешения для профессиональных фотографов? А что если вы храните банк скриншотов или растрированной векторной графики?
При выборе метода сжатия для ваших изображений поэкспериментируйте немного, чтобы найти то, что лучше всего соответствует вашим потребностям. Как и в любой системе, всегда полезно начать с четкого списка требований — как функциональных (что должна делать система), так и нефункциональных (важные метрики системы).
Возможно, вам захочется обдумать следующие вопросы:
- С какими типами изображений вы работаете? Есть ли на них животные (учитывайте шерсть и перья), карты, растрированные элементы HTML или векторная графика? Все они ведут себя по-разному.
- Каков размер вашего изображения? Нужно ли вам показывать крупные изображения (более 1000 пикселей по одной стороне) или миниатюры?
- Кто ваши конечные пользователи и какими устройствами они пользуются? Ориентируетесь ли вы на мобильных пользователей?
- Каков ваш бюджет на обработку изображений? Много ли у вас изображений для обработки?
- Что насчет скорости кодирования? Если вы используете сжатие изображений «на лету», вы можете предпочесть более быстрое кодирование лучшей степени сжатия. Ваш метод сжатия также повлияет на затраты на кодирование. Попробуйте несколько вариантов и сделайте быстрые расчеты «на салфетке».
- Какой уровень качества вам необходим? Если ваше приложение работает с профессиональными изображениями, возможно, вы захотите использовать форматы без потерь или форматы, поддерживающие большую глубину цвета и более богатые цветовые пространства.
- Как выглядит изображение при нужном вам качестве? Например, если вы хотите использовать изображения низкого качества, AVIF может дать впечатляющие результаты. Однако AVIF применяет фильтры, которые могут сглаживать некоторые детали, такие как шерсть или волосы.
- С какими инструментами и системами вы работаете? Если вы обязаны использовать существующую систему или инструмент, подумайте, насколько хорошо они удовлетворяют вашим потребностям. Например, вы можете использовать инструмент обработки изображений, но он может не поддерживать нужный вам формат или параметры.
Примечание: Мы не рассматриваем здесь векторную графику. Она представляет собой совершенно другой мир со своим набором технологий и уникальных задач. В этой статье мы сосредоточимся только на растровых изображениях.
Как правило, вы рассматриваете несколько инструментов, которые могут быть доступны или недоступны для вашего проекта, а затем решаете, какой формат и коде использовать. В этот момент очень важно понимать, что вы подразумеваете под «качеством изображения». Как мы увидим позже, очень сложно присвоить изображению конкретное качество или даже решить, какое изображение лучше.
Вам также необходимо помнить, что результат кодирования зависит от нескольких факторов:
- Само изображение.
- Используемый кодек.
- Параметры, передаваемые в кодек.
Например, как мы видели в предыдущем разделе, любой кодек может легко сжать черный прямоугольник, но для любого кодека сжатие белого шума представляет собой сложную задачу.
Сжатие белки
Давайте разберем пример того, как можно оценить требования, изучить доступные варианты и сделать осознанный выбор (вам не придется погружаться так глубоко для собственного проекта 🙂).
Предположим, у нас есть веб-сайт с изображением белки, и мы хотим показать пользователям наилучшую из возможных его версий. У нас есть исходное изображение размером 2733 × 3727 пикселей с глубиной цвета 16 бит. К сожалению, размер файла составляет около 50 МБ, что немного больше, чем мы ожидали.
Предположим, что по какой-то причине мы можем использовать только JPEG или AVIF.
Давайте попробуем выбрать наилучшее качество и параметры кодека для нашего итогового изображения. На данном этапе мы абсолютно уверены, что не хотим изменять размер изображения.
Чтобы выбрать лучшее качество, мы проведем следующий эксперимент: сожжем это изображение кодеками AVIF и JPEG 100 раз. Каждый раз мы будем увеличивать параметр качества на 1, начиная с 1 и доходя до 100.
Примечание: Делать выводы на основе всего одного изображения — плохая идея. Для получения надежных оценок нам нужен набор данных изображений и статистически значимые результаты для сравнения.
Мы построили график результатов и обнаружили, что AVIF работает намного хуже — он создает файл гораздо большего размера при том же качестве по сравнению с JPEG.
Вы можете заметить несколько проблем в этом выводе. Какие параметры кодека мы использовали? Могло ли наше сравнение быть ошибочным? Давайте посмотрим на логи AVIF-энкодера:
Похоже, мы отключили субдискретизацию и использовали 12-битную глубину цвета. Давайте исправим это и установим 8-битную глубину с субдискретизацией 4:2:0 для обоих кодеков.
Примечание: В реальном сценарии в идеале следует экспериментировать со всеми комбинациями опций, а не просто уменьшать параметры кодека.
Мы видим, что ситуация изменилась, но JPEG все равно побеждает. Как такое возможно?
Если вы читали предыдущие посты в этой серии, то помните, что число, передаваемое энкодеру для AVIF, отличается от такового для JPEG. Мы сравниваем несравнимые вещи.
Таким образом, нам нужна метрика «реального качества». Первая попытка — сравнить изображения пиксель за пикселем. Для этого существует специальная метрика под названием среднеквадратичная ошибка (MSE). Однако она плохо подходит для сравнения результатов сжатия. MSE — это метрика, где «меньше — значит лучше»; 0 означает, что изображения идентичны. К сожалению, MSE работает плохо. Если мы случайно добавим несколько сильно отличающихся пикселей, ошибка становится большой. Она также не учитывает структуру изображения, цвет или яркость и слабо штрафует за большое количество шума.
Существует еще одна метрика под названием пиковое отношение сигнала к шуму (PSNR), которая до сих пор широко используется. Она вычисляется иначе, но страдает теми же проблемами, что и MSE.
Более удачным вариантом является индекс структурного сходства (SSIM). Эта метрика пытается имитировать человеческое восприятие и другие аспекты, которые мы обсуждали в предыдущем разделе. Не вдаваясь в подробности, SSIM делит изображение на небольшие перекрывающиеся блоки. Для каждого блока он оценивает разницу в яркости, контрастности и структуре, а затем усредняет результат для всех фрагментов. SSIM — это метрика, где «больше — значит лучше»; 1 означает, что изображения одинаковы.
Давайте применим эту метрику к нашему эксперименту. Мы с радостью получаем ожидаемые результаты. Согласно графику, AVIF демонстрирует значительное преимущество перед JPEG, особенно для изображений низкого качества. Оранжевая линия (AVIF) расположена выше, что означает более высокий SSIM при том же размере файла. Мы используем логарифмическую шкалу по оси X, чтобы сделать график более читаемым.
Конечно, все эти математические метрики могут не подходить для вашей задачи.
Сжатие вороны
Давайте рассмотрим другой пример. Вот оригинальное изображение вороны:
Вот то же изображение с некоторыми изменениями: первое было изменено, на втором пропала ворона.
Угадайте, у какого из них лучше показатели?
Примечание: как мы уже упоминали, качество — понятие субъективное. Интуитивно я бы проголосовал за то, что первая картинка лучше, потому что главный объект виден. Однако, если шум или другие артефакты на изображении для вас абсолютно неприемлемы, вы можете предпочесть вторую картинку.
Опрос нейронной сети
Вместо того чтобы полагаться исключительно на математически выведенные метрики, мы можем задействовать нейронные сети. Существует множество сторонних методов, которые считаются альтернативой SSIM. Многочисленные исследования показывают, что нейронные сети способны лучше имитировать человеческое восприятие. Кроме того, они обучены на изображениях, размеченных людьми.
Давайте выберем один из этих методов оценки и применим его к проблеме с исчезающей вороной.
Model считает, что изображение с присутствующей вороной лучше (0.52 против 0.47, где результат ближе к 1 — лучше). Теперь давайте используем эту модель в слегка измененном упражнении по сжатию белки. На этот раз мы изменим размер белки до 1000 × 1000 пикселей (и обрежем ее красивый хвост), вот так:
Это тоже ближе к задачам реального мира. Большинство изображений маленькие, хотя кажется, что они сжаты некорректно. Согласно данным HTTP Archive, в 2025 году средний размер изображений составляет около 1 МБ, что соответствует JPEG размером 2000 × 2000 пикселей при среднем качестве.
После создания 100 файлов JPEG и 100 AVIF и сравнения их качества AVIF по-прежнему побеждает.
В качестве завершающего штриха мы выведем несколько примеров наших изображений для их визуального сравнения. Давайте сначала посмотрим на изображения очень низкого качества:
Если вы читали предыдущий раздел, вы уже знаете, почему эти изображения выглядят именно так. В AVIF используются гораздо более крупные тайлы (что приводит к появлению больших цветовых пятен) и фильтры, из-за которых мех получается размытым. На изображении AVIF видно, что оно потеряло всю цветовую детализацию и состоит из крошечных блоков 8x8, которые являются единственными блоками, используемыми в JPEG.
А теперь посмотрите на эти два. Какое из них лучше?
Первое — это AVIF, второе — JPEG. 35 КБ против 97 КБ.
Чтобы проиллюстрировать важность точного выбора кодека, давайте проведем еще несколько сравнений:
Оба изображения представляют собой JPEG с качеством 75. Они выглядят одинаково, ха-ха. Однако первое на 30% меньше. Эти изображения были созданы с помощью разных кодеков. Первое — с помощью MozJPEG, а второе — с помощью встроенного в Chrome кодека.
И последний пример:
Оба изображения были созданы с помощью одного и того же кодека, но с разными параметрами кодека:
Заключение
Имейте в виду следующие советы при сжатии изображений:
- В во многих случаях вам не нужно сжимать изображения самостоятельно. Подумайте об использовании облачных сервисов, которые позволяют обрабатывать изображения «на лету». Они позволяют выбрать нужный размер, качество и формат изображения. Они также позволяют отдавать изображение в нескольких форматах, что может быть весьма экономично. Например, Cloudflare взимает плату за несколько форматов изображений как за один. Вы также получите изменение размера и обрезку из коробки. Изображения, обрабатываемые на лету, по-прежнему настраиваются; вы можете задать параметры кодека, добавив их в URL.
- Если вы никогда раньше не задумывались о сжатии изображений, попробуйте очень простое упражнение: сожмите изображения с помощью MozJPEG, используя параметры Q=75,strip,interlace. Конечно, вы можете настроить качество под свои нужды. Вы, вероятно, будете удивлены тем, как мало места занимают ваши статические файлы.
- На следующем этапе сожмите изображение в другие форматы и сравните результаты. Вы можете отдавать несколько форматов для разных устройств, используя элемент <picture>. Попробуйте более современные форматы, такие как WebP или AVIF.
- Не забывайте использовать прогрессивные изображения, когда это возможно. Тем не менее, не используйте чересстрочные PNG, так как они больше нечересстрочных. Вообще, по возможности избегайте использования PNG. Существуют более эффективные форматы без потерь, такие как WebP или AVIF.
- Когда вы сжимаете изображения, обращайте внимание на используемые кодеки. Вы можете использовать такие инструменты сжатия, как vips или sharp. Не забывайте, что вы можете передавать параметры кодеку или инструменту. Экспериментируйте и находите решение, которое наилучшим образом соответствует вашим потребностям. Вы также можете использовать онлайн-интерфейсы сжатия, такие как Squoosh, или специальные плагины для ваших программ (например, Figma).
- Если изображение не отображается на экране, не загружайте его! Существует несколько полезных методов: от суперпростого атрибута loading="lazy" до более продвинутых, таких как API Intersection Observer.
- Собирайте статистику об использовании ваших изображений. Проактивно отслеживайте и оптимизируйте свои изображения.
Успешного сжатия!