Сжатие изображений без потерь качества: рабочий процесс WebP

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

Большинство проблем с качеством начинаются до сжатия. Фотография в 4000 px, загруженная в слот контента размером 800 px, уже тратит байты. Скриншот продукта, сохраненный как низкокачественный JPEG, изначально предназначен для размытия текста. Сжатие изображений без видимой потери качества в основном сводится к выполнению шагов в правильном порядке.

Это руководство предлагает вам практичный рабочий процесс для фотографий, скриншотов, изображений продуктов и графики для блогов. Оно отдает предпочтение WebP, потому что оно широко поддерживается и может быть как с потерями (lossy), так и без потерь (lossless), но те же проверки применимы, когда вы тестируете AVIF или сохраняете PNG для четкого захвата интерфейса пользователя (UI).

Краткий ответ: как сжать изображения без потери качества?

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

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

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

Почему изменение размера важнее, чем настройки сжатия?

Размеры в пикселях обычно экономят больше, чем ползунок качества. Если изображение отображается шириной 900 px, предоставление файла размером 4000 px заставляет браузер загружать пиксели, которые читатель никогда не увидит. Сжатие может уменьшить эту потерю, но изменение размера устраняет ее в источнике.

Браузер все равно должен загрузить и декодировать предоставленный вами файл. В руководстве web.dev по производительности изображений отмечается, что современные форматы, такие как WebP и AVIF, могут уменьшить размер загрузки, что также может помочь Largest Contentful Paint, когда изображение важно для первого представления (viewport). См. руководство web.dev по производительности изображений.

Используйте бюджет ширины, прежде чем выбирать настройку качества:

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

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

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

В руководстве по форматам изображений от MDN объясняется, что WebP поддерживает как сжатие с потерями (lossy), так и без потерь (lossless), при этом эти режимы хранят данные изображения по-разному. Вот почему "сохранить как WebP" — это не полная инструкция. Сжатый WebP может быть отличным для фотографии продукта, но неправильным для скриншота плотной панели управления. См. руководство по типам и форматам файлов изображений от MDN.

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

1. Используйте WebP или AVIF для фотографических изображений, где важен размер файла.
2. Используйте безпотерильный WebP или PNG для скриншотов с читаемым текстом.
3. Используйте SVG для простых логотипов и иконок, если у вас векторная графика.
4. Сохраняйте прозрачность в WebP, PNG или SVG, вместо того чтобы сглаживать ее на случайном фоне.
5. Избегайте преобразования плохого JPEG в WebP и ожидания возвращения деталей.
6. Сохраняйте исходный мастер-файл, чтобы иметь возможность снова чисто экспортировать.

Для более глубокого сравнения форматов прочтите Сравнение AVIF и WebP. Если вам нужна механика сжатия, стоящая за артефактами, используйте Как работает сжатие изображений.

Что за настройка качества WebP избегает видимых потерь?

Универсальной настройки не существует, но WebP q80–q85 — это разумный первый тест для многих веб-фотографий. Он часто значительно уменьшает размер файла, сохраняя при этом текстуру, края и цветовые переходы чистыми при нормальных размерах отображения. Снижайте значение только в том случае, если изображение все еще выглядит хорошо.

Для этой статьи я измерил четыре локальных вывода инфографики WebP, созданные с помощью ImageMagick. Итоговые файлы весили от 31 KB до 41 KB, поскольку графика использует плоские цвета и простые формы. Эти цифры не являются гарантией для фотографий с камеры; они показывают, почему важен тип контента.

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

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

Если вам нужно целевое соотношение, используйте Image Compression Ratio: Quality and Size Guide. В нем объясняется, как рассчитать это соотношение после изменения размера и почему высокое соотношение может быть приемлемым для фоновой фотографии, но рискованным для этикетки или скриншота.

Как проверить, сохранилось ли качество на самом деле?

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

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

1. Откройте оригинал и кандидата рядом.
2. Совместите отображаемый размер, а не размер камеры.
3. Сначала проверьте самые резкие края объектов.
4. Осмотрите мелкий текст, метки и границы пользовательского интерфейса.
5. Ищите полосы в небесах, градиентах и тенях.
6. Сравните текстуру кожи, ткани, еды и продукта.
7. Протестируйте изображение на телефоне, если это важно для мобильных устройств.
8. Сохраните наименьшего кандидата, который проходит проверку.

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

Документация Google по SEO для изображений также рекомендует полезный, контекстный alt-текст и сканируемую разметку изображений. Это важно после сжатия, потому что крошечное, нечеткое, плохо описанное изображение — это не преимущество ни для поиска, ни для доступности. См. Google Images best practices.

Какой рабочий процесс использовать для целой папки?

Пактивное сжатие требует защитных мер. Если вы применяете одну агрессивную настройку ко всем файлам, первыми жертвами станут скриншоты, логотипы и фотографии продуктов с этикетками. Группируйте изображения по содержимому перед экспортом.

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

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

Для страниц с большим количеством мобильного контента сочетайте этот рабочий процесс с Mobile Image Optimization Guide. Для более широкого контрольного списка запуска используйте Complete Image Optimization Checklist.

Когда стоит использовать больший файл?

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

Большие файлы оправданы, когда изображение включает:

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

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

Контрольный список перед публикацией

Перед заменой изображения на активной странице выполните финальную проверку. Это поможет выявить скучные ошибки, которые являются причиной большинства проблем с изображениями: неправильные размеры, неверный формат, сломанный URL, отсутствие alt text и файл, который выглядел хорошо на десктопе, но плохо — на мобильном устройстве.

Используйте этот финальный проход:

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

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

Можно ли сжать изображение без потери качества?

Сжатие без потерь (lossless compression) сохраняет данные пикселей, в то время как сжатие с потерями (lossy compression) может сохранить воспринимаемое качество на конечном размере просмотра, не будучи математически идентичным.

Следует ли изменять размер перед сжатием?

Да, сначала измените размер, если исходник шире, чем самый большой слот, где он будет отображаться.

WebP всегда меньше JPEG?

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

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

Качество 75–85 — полезный диапазон для тестирования фотографий, но скриншоты и плавные градиенты могут потребовать более высокого уровня или экспорта без потерь (lossless output).

Удаляет ли сжатие метаданные изображения?

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

Почему сжатое изображение иногда становится больше?

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

Как следует сравнивать кандидатов после сжатия?

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

Можно ли безопасно пакетно сжимать изображения?

Да, сгруппируйте похожие типы изображений, протестируйте один образец из каждой группы и сохраните оригиналы до проверки всей партии.