Коэффициент сжатия изображений: руководство по качеству и размеру

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

Коэффициент сжатия изображения показывает, насколько меньше стало изображение после экспорта. Это полезно, но только в сочетании с визуальной проверкой. Соотношение 12:1 может быть отличным для фотографии мягкого фона и неприемлемым для скриншота продукта со мелким текстом.

Это руководство предоставляет вам формулу, обычные диапазоны качества и контрольный список для публикации WebP, JPEG, PNG и AVIF. Используйте его, когда вам нужны более компактные страницы, не превращая изображения в «кашу».

Краткий ответ: каково хорошее соотношение сжатия изображения?

Хорошее соотношение сжатия изображения — это максимальное уменьшение объема данных, при котором изображение все равно выглядит чистым в конечном размере отображения. Рассчитать его можно так: размер исходного файла, деленный на размер сжатого файла. Изображение размером 4 MB, сжатое до 500 KB, имеет соотношение 8:1.

Для веб-фотографий практическая цель часто составляет от 5:1 до 12:1 после изменения размера и экспорта в WebP или AVIF. Для скриншотов с большим количеством текста, логотипов и изображений пользовательского интерфейса (UI) нормальны более низкие коэффициенты, поскольку острые края и плоские цвета требуют защиты. Безпотеричный PNG или безпотеричный WebP могут дать только от 1.2:1 до 3:1.

Не оценивайте сжатие только по соотношению. Осмотрите лица, края продуктов, градиенты и мелкий текст. Если пользователи видят блокировку (blocking), кольцевые артефакты (ringing), смазывание (smearing) или полосы (banding), это означает, что коэффициент слишком агрессивен, даже если размер файла выглядит привлекательно.

Как рассчитать коэффициент сжатия изображения?

Используйте исходный байтовый размер и конечный байтовый размер после всех реальных этапов публикации: обрезки, изменения размера, удаления метаданных, преобразования формата и установки качества. Если вы рассчитываете до изменения размера, полученное число обычно вводит в заблуждение.

Используйте точное количество байтов, когда настраиваете конвейер сборки. Используйте округленные KB или MB, когда документируете редакционные настройки. Решение не меняется: меньший размер полезен только до тех пор, пока изображение выполняет свою задачу.

Рекомендации Google для изображений подчеркивают как скорость, так и качество: изображения часто влияют на вес страницы, но размытые или нечеткие изображения вредны для пользователей и превью в поисковиках. Он также рекомендует элементы изображения HTML, доступные для сканирования, описательный alt текст и поддерживаемые форматы, такие как JPEG, PNG, WebP, SVG и AVIF, в Google Images best practices.

Какое соотношение использовать для WebP, JPEG, PNG и AVIF?

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

Руководство по форматам изображений MDN отмечает, что WebP может быть с потерями (lossy) или без потерь (lossless), при этом lossy WebP и lossless WebP используют разные внутренние представления. Вот почему не существует единого «соотношения WebP»; правильная настройка зависит от того, может ли контент выдержать потери. О поведении форматов см. в [image file type and format guide] MDN (https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types).

Для этой статьи я локально закодировал четыре графика размером 1400 на 788 с помощью ImageMagick и WebP. Полученные файлы имеют размер 23 KB, 28 KB, 35 KB и 40 KB. Это необычно мало, потому что ресурсы представляют собой чистые диаграммы, а не фотографии; используйте эти цифры как доказательство того, что плоские графика сжимаются иначе, чем фотографические детали.

Для более широкого сравнения форматов сравните эту статью со статьей AVIF vs WebP Comparison. Если вам нужны детали алгоритма, стоящие за артефактами, прочтите How Image Compression Works.

Почему настройки качества перестают сильно уменьшать размер после определенной точки?

Большинство кодировщиков имеют резкий первоначальный выигрыш и болезненный поздний компромисс. Переход от оригинального файла камеры к WebP q80 может удалить много невидимых данных. Переход от q70 к q55 может сэкономить меньше байтов, но при этом сделать артефакты более заметными.

Практический эффект прост: кривая размера выравнивается, в то время как кривая качества продолжает падать. Вот почему WebP q75-85 является распространенным начальным диапазоном для фотографий статей и продуктов. Это не правило для каждого файла; это хороший первый тест перед тем, как вы осмотрите результат.

Используйте этот порядок при настройке качества:

1. Измените размер до самой большой ширины рендеринга, которую вы фактически используете.
2. Экспортируйте один WebP на q85, один на q80 и один на q75.
3. Откройте их рядом с оригиналом в предполагаемом размере отображения.
4. Проверьте лица, текст, края продукта, тени и плавные градиенты.
5. Выберите самую маленькую версию, которая не выглядит ухудшенной.
6. Запишите полученное соотношение для этого типа контента.

Если изображение, скорее всего, будет элементом Largest Contentful Paint, сжатие — это лишь часть решения. Руководство web.dev по LCP рекомендует отдавать приоритет изображениям, вероятно являющимся LCP, с помощью fetchpriority="high" и проверять обнаружение ресурсов в сетевом водопаде в Optimize Largest Contentful Paint.

Как следует сравнивать коэффициенты сжатия между форматами?

Сравнивайте форматы при одинаковом видимом качестве, а не по совпадению значений ползунков. JPEG q82, WebP q78 и AVIF q55 могут быть вполне разумными результатами из одного источника. Эти числа — это элементы управления кодировщика, а не универсальные оценки качества.

Именно здесь команды часто неправильно интерпретируют коэффициенты. JPEG с соотношением 5.7:1 может быть хуже, чем WebP с соотношением 8:1, если оба выглядят одинаково на экране. Без потерь WebP с соотношением 2:1 может быть лучше, чем с потерями WebP с соотношением 10:1, если ресурс — это скриншот таблицы цен.

Для пакетной работы генерируйте несколько выходных файлов из одного мастер-файла и сохраняйте решение видимым в именах файлов или журналах сборки. В Batch Resize Guide описан рабочий процесс «сначала изменение размера», а Complete Image Optimization Checklist дает финальный проход перед публикацией.

Когда высокий коэффициент сжатия — это плохой знак?

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

Высокий коэффициент сжатия требует дополнительной проверки, если изображение включает:

• Этикетки продуктов, текст упаковки, ингредиенты или серийные номера.
• Скриншоты пользовательского интерфейса, дашборды, код или таблицы цен.
• Лица, текстура кожи, волосы, ювелирные изделия, ткань или еда.
• Плавные градиенты, небеса, тени, неон или темные фоны.
• Тонкие линии, иконки, прозрачные края или фирменные знаки.
• Изображения, которые будут увеличиваться, обрезаться или повторно использоваться в рекламе.

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

Какой рабочий процесс обеспечивает наилучший размер без видимой потери качества?

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

Используйте следующую последовательность публикаций:

1. Сохраните мастер-файл, который не был многократно перекодирован.
2. Обрежьте для конечного сценария использования перед изменением размера.
3. Измените размер до самой большой отображаемой ширины, с адаптивными вариантами при необходимости.
4. Выберите формат в зависимости от содержимого: WebP или AVIF для фотографий, без потерь для графики с большим количеством текста.
5. Экспортируйте две или три тестовые версии качества.
6. Удалите метаданные из публичных копий, если это не требуется по закону или редакционным нормам.
7. Сравните кандидатов в отображаемом размере на настольных компьютерах и мобильных устройствах.
8. Проверьте изображение, вероятно являющееся LCP, отдельно от изображений ниже линии сгиба (below-fold).
9. Опубликуйте по стабильному CDN URL и проверьте HTTP 200.
10. Запишите конечный размер в байтах, коэффициент и настройки, чтобы следующая партия была быстрее.

Если вы нацелены на строгий бюджет по размеру, начните с рабочего процесса в Compress Image to 100KB или Compress Image to 200KB. Для мобильных страниц сочетайте решение о коэффициенте с Mobile Image Optimization Guide.

Как соотношение сжатия и SEO взаимодействуют?

Соотношение сжатия помогает SEO косвенно. Меньшие изображения уменьшают размер передачи данных, что может улучшить производительность загрузки, особенно если сжатое изображение также имеет правильный размер. Но поисковым системам и пользователям все равно нужно полезное изображение, стабильный URL, читаемый окружающий текст и описательный alt text.

Не публикуйте крошечное изображение, которое выглядит сломанным в превью поиска или социальных карточках. Google прямо рекомендует выбирать репрезентативное изображение для метаданных и избегать общих изображений для structured data или og:image, если существует более релевантное изображение. Изображение должно быть быстрым и четким.

Для записи в блоге это обычно означает:

• Использовать уникальную обложку WebP в frontmatter и данных Open Graph.
• Сохранять читаемость обложки при размере социального превью.
• Размещать изображение рядом с текстом, объясняющим ключевой вывод.
• Использовать описательный alt text, а не перенасыщение ключевыми словами (keyword stuffing).
• Предоставлять финальный актив с сканируемого CDN URL.
• Избегать замены индексированных URL изображений, если только сам актив не неверен.

Соотношение — это одна строка в записи публикации. Оно должно располагаться рядом с отображаемой шириной (rendered width), форматом, настройкой качества, размером в байтах и визуальными заметками.

Контрольный список коэффициента сжатия

Перед публикацией выполните эту краткую проверку:

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