Как работает сжатие изображений: объяснение JPEG, PNG и WebP

Последнее обновление: June 27, 2026

Сжатие изображений уменьшает файлы за счет удаления информации, которую ваш глаз плохо видит. Понимание того, какую информацию отбрасывает каждый формат, объясняет, почему JPEG размывает текст, почему PNG остается большим и почему WebP и AVIF выигрывают при работе с фотографиями. Это практическое описание фактических алгоритмов, а не маркетинговое сравнение.

Быстрый ответ: как работает сжатие изображений?

Каждый веб-формат изображения выполняет две задачи: предсказывает значения пикселей, чтобы повторяющиеся данные сжимались, а затем эффективно кодирует ошибки предсказания. Потерища форматы (JPEG, WebP lossy, AVIF) также квантизируют — они округляют высокочастотные детали, которые люди едва замечают. Безпотерьные форматы (PNG, WebP lossless) пропускают квантование и сохраняют каждый пиксель.

Практическое решение:

Для принятия решения о формате прочтите сравнение AVIF vs WebP vs JPEG; эта статья посвящена тому, что происходит внутри каждого кодировщика.

Что отличает сжатие с потерями от безпотерьного?

Сжатие Lossless восстанавливает исходное изображение пиксель за пикселем. Оно работает путем поиска избыточности: последовательностей одинаковых цветов, повторяющихся узоров, предсказуемых градиентов. PNG, GIF и WebP-lossless используют этот подход. Пределом является энтропия изображения — случайный шум практически не сжимается.

Сжатие Lossy необратимо удаляет информацию. Хитрость заключается в том, чтобы удалить ту информацию, которую ваша визуальная система замечает меньше всего: мелкую высокочастотную текстуру и едва заметные цветовые различия. JPEG, WebP-lossy и AVIF делают это. Результатом являются гораздо меньшие файлы — часто на 5–10× меньше, чем безпотерьное сжатие для фотографий.

Форматы используют следующие методы:

Как на самом деле работает сжатие JPEG?

JPEG — это канонический потеряющий конвейер. Пять этапов выполняются в следующем порядке:

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

Вы можете увидеть работу квантования на одном фрагменте с деталью пера. Одна и та же область размером 500×280, закодированная при трех уровнях качества, показывает, что именно теряет ползунок качества:

При q95 перьевые пёрышки остаются различимыми. К q75 тонкие нити начинают сливаться. При q50 блоки 8×8 отчетливо видны, а текстура размазана — файл меньше, но потеря становится чем-то заметным для зрителя.

Как работает сжатие PNG?

PNG является безпотерильным и работает совершенно иначе. Два этапа:

1. Фильтрация строк. Перед сжатием каждая сканирующая линия фильтруется, чтобы сделать ее более предсказуемой. PNG определяет пять фильтров (None, Sub, Up, Average, Paeth); кодировщик выбирает лучший для каждой строки.

2. Сжатие DEFLATE. Отфильтрованные байты проходят через LZ77 (поиск повторяющихся последовательностей, замена на обратные ссылки) плюс кодирование Хаффмана (короткие коды для общих значений) — тот же алгоритм, который используется ZIP.

Советы по оптимизации PNG, которые действительно помогают:

• Используйте PNG-8 (индексированный, ≤256 цветов) для плоской графики — намного меньше, чем PNG-24.
• Удаляйте ненужные чанки: EXIF, неиспользуемые профили ICC, альфа-канал, если изображение непрозрачное.
• Повторно сжимайте с помощью optipng или pngquant (последний преобразует в 8 бит с использованием дitheringa для значительной экономии на фотографиях, которые должны остаться PNG).

Почему WebP меньше обоих?

WebP имеет два независимых режима:

• Lossy WebP заимствует из видеокодека VP8. Он использует блочное предсказание по всему кадру (а не только в пределах блоков 8×8, как у JPEG), преобразования 4×4 и 8×8, а также улучшенное арифметическое энтропийное кодирование. В результате он примерно на 25–34% меньше, чем JPEG при одинаковом качестве.
• Lossless WebP использует до 13 режимов предсказания, преобразование цветового пространства для декореляции каналов и вариант LZ77. Обычно он на ~20–26% меньше, чем PNG для одинакового контента.

AVIF идет дальше, используя инструменты внутрикадрового кодека AV1, превосходя Lossy WebP еще на 20–30%. Цена — скорость кодирования: создание AVIF происходит медленно. Посмотрите руководство TinyPNG alternatives для инструментов, которые выводят WebP и AVIF.

Как измерить качество сжатия?

Доминируют две метрики. Ни одна из них не идеальна; используйте обе.

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

Мозаикское исследование качества JPEG от Mozilla и исследование сжатия WebP от Google публикуют методологию и образцы изображений, если вы хотите воспроизвести сравнения.

Какие настройки качества следует использовать?

Начните с этих значений по умолчанию, а затем настройте их под ваш контент. Это рекомендации, а не правила.

Два правила, которые важнее цифр:

• Сравнивайте при одинаковом визуальном качестве, а не по совпадению числовых значений качества. AVIF q60, WebP q75 и JPEG q85 выглядят примерно одинаково. Сравнение всех трех на "q80" бессмысленно.
• Изменяйте размер перед сжатием. Оригинальное фото камеры в 4000px, сжатое до JPEG q80, по-прежнему будет загрузкой в 4000px. Сначала уменьшите масштаб до размера отображения — это сэкономит больше байтов, чем любая настройка качества.

Кривая «размер против качества» показывает, почему диапазон 75–85 обычно рекомендуется. На одном и том же обрезанном изображении с деталями перьев размер файла сначала резко падает, а затем выравнивается — и видимое снижение качества ускоряется ниже q75. Попытка пройти этот пункт экономит мало байтов, но стоит реальных деталей:

Как эффективно сжимать изображения на практике?

1. Начинайте с правильного мастер-файла. Снимайте в RAW или высококачественный JPEG; сжатие накапливается, поэтому избегайте повторного кодирования файла, который уже является потерями (lossy).
2. Измените размер в первую очередь. Соответствуйте размерам блока на странице с помощью Image Resizer до выполнения любого другого шага.
3. Выбирайте формат в зависимости от контента. Фотография → WebP/AVIF с потерями (lossy); текст/UI → PNG или WebP без потерь (lossless).
4. Кодируйте при разумном качестве. Начните с 75–80 для фотографий в Image Compressor.
5. Удалите метаданные для публичного веба (сохраните EXIF для архивов); Image Converter обрабатывает формат + метаданные за один проход.
6. Проверяйте в размере отображения и предоставляйте резервный вариант с помощью <picture>, чтобы старые клиенты получали JPEG.

Распространенные ошибки

• Повторное сжатие уже сжатых JPEG. Каждое с потерями кодирование добавляет артефакты. Сохраните мастер-копию.
• Игнорирование кромоотсчета для текста. 4:2:0 подходит для фотографий, но смазывает цветной текст. Для графики с большим количеством текста используйте 4:4:4 (или PNG).
• Доверие одному числу качества для всех форматов. Это число означает разные вещи в JPEG, WebP и AVIF.
• Оптимизация до изменения размера. Всегда изменяйте размер сначала — это самая большая экономия байтов.
• Предоставление AVIF/WebP без запасного варианта JPEG. Старые браузеры и почтовые клиенты ничего не отображают.

Связанные руководства

• AVIF vs WebP vs JPEG: Какой формат вам следует использовать?
• Сжатие изображений без потери качества
• Сравнение альтернатив TinyPNG
• Контрольный список оптимизации изображений для SEO
• Полный контрольный список оптимизации изображений

Часто задаваемые вопросы

Как работает сжатие изображений?

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

В чем разница между сжатием с потерями и без потерь?

Сжатие без потерь сохраняет каждый пиксель в точности и идеально обратимо (PNG, lossless WebP). Сжатие с потерями отбрасывает детали для уменьшения размера файла и не является обратимым (JPEG, lossy WebP). Для фотографий выигрывает размер (lossy); для графики и мастер-копий — качество (lossless).

Какой формат лучше всего сжимает фотографии?

AVIF (самый маленький, для современных браузеров), затем WebP, затем JPEG. PNG самый большой для фотографий, потому что он без потерь. Для доставки в вебе безопасным вариантом по умолчанию является WebP; используйте AVIF, если можете его закодировать и ваша аудитория использует современные браузеры.

Уменьшает ли сжатие качество?

Сжатие с потерями — да, но при качестве 80–85 потери невидимы в размере просмотра. Ловушка заключается в многократном повторном сжатии файла с потерями (потери поколения), что усугубляет артефакты. Сжимайте один раз из исходного мастер-файла без потерь.

Источники изображений

• Обложка — Исходный код на мониторе, фото от Leonid Altman на Pexels (конвертировано в WebP).
• Лестница качества JPEG и кривая размера в зависимости от качества — сгенерировано автором из фотографии перья ара (Pexels #36720663, фото от Kaca Skok) для демонстрации реального измеренного вывода JPEG на разных уровнях качества.