Как сжать изображения WebP

Чтобы сжать WebP, перекодируйте его в режиме с потерями с качеством около 75 (значение по умолчанию в кодировщике Google cwebp), а затем уменьшите до ширины, в которой он реально показывается. Для плоской графики и скриншотов используйте режим без потерь или почти без потерь. Для жесткого лимита размера инструмент сжатия WebP с желаемым размером в КБ сам подберет нужное качество.

WebP и так обычно легче JPEG и PNG, но плохо сохраненный WebP может оказаться тяжелым. Важны режим, значение качества и размеры в пикселях, причем размеры обычно важнее всего.

Как сжать изображения WebP онлайн

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

1. Откройте инструмент и добавьте один или несколько файлов WebP.
2. Введите нужный размер в КБ или задайте качество вручную.
3. Запустите сжатие. Инструмент сначала снижает качество и уменьшает размеры, только если одним качеством в лимит не уложиться.
4. Скачайте результат и проверьте его в масштабе 100% на самом детализированном участке, например на волосах, листве или мелком тексте.

Если исходник в JPEG или PNG, сначала сконвертируйте его через PNG или JPG в WebP. По возможности конвертируйте из оригинала. WebP добросовестно сохраняет квадратные артефакты уже сжатого JPEG, и вы платите байтами за их хранение.

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

С потерями, без потерь или почти без потерь: какой режим WebP выбрать?

У WebP не один способ хранения изображения, и режим важнее любого отдельного числа качества.

WebP с потерями

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

WebP без потерь

Каждый пиксель сохраняется точно, как в PNG. Подходит для логотипов, значков, схем и скриншотов с четким текстом. Обычно получается меньше, чем то же изображение в PNG.

WebP почти без потерь

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

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

Google описывает все три режима, а также параметры качества и желаемого размера, на справочной странице cwebp.

Какое качество выбрать при сжатии WebP?

Качество WebP измеряется от 0 до 100, а cwebp использует 75, если вы не задали другое значение. Для фото это хорошая отправная точка. Дальше:

• Поднимайте до 80–85 для крупных главных изображений, которые будут рассматривать внимательно, или для изображений с оттенками кожи и мелкой текстурой.
• Снизьте примерно до 60-70 для миниатюр, картинок в карточках и фоновых фото под текстом.
• Избегайте очень низких значений для изображений с текстом. В режиме с потерями буквы быстро расплываются.

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

Как уменьшить размер WebP изменением размеров

Размеры обычно важнее качества. Изображение шириной 3000 пикселей для места шириной 800 пикселей на экране содержит примерно в 14 раз больше пикселей, чем нужно. Никакая настройка качества такой разрыв не закроет.

1. Выясните наибольшую ширину, с которой изображение показано на вашем сайте. Обычно это видно в настройках темы или макета.
2. Удвойте ее, если хотите четкость на экранах телефонов и ноутбуков с высокой плотностью пикселей.
3. Измените размер до этой ширины с помощью инструмента «Изменить размер фото» или своего редактора, сохраняя пропорции.
4. Сожмите уменьшенную копию.

Для адаптивных сайтов экспортируйте несколько вариантов ширины и позвольте браузеру выбирать через srcset. Руководство MDN по адаптивным изображениям объясняет, как работает эта разметка. Тогда браузер скачает маленький файл на телефоне и большой на широком мониторе.

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

Почему мой файл WebP больше оригинала?

Это случается чаще, чем ожидают. Частые причины:

• Исходником был маленький, хорошо оптимизированный PNG с небольшим числом цветов, сконвертированный в режиме с потерями с высоким качеством. Для таких изображений попробуйте режим без потерь.
• Исходником уже был JPEG низкого качества. При перекодировании с более высоким качеством WebP детально сохраняет весь шум JPEG.
• Качество было выставлено на 100. В режиме с потерями это дает большой файл почти без заметного выигрыша.
• Изображение сохранило полные размеры камеры.

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

Метаданные у WebP редко бывают причиной. По умолчанию cwebp не копирует из исходника данные EXIF, XMP и цветовой профиль, хотя другие приложения могут. Если после конвертации цвета выглядят блеклыми, вероятная причина в отсутствии цветового профиля. Экспортируйте заново с сохранением профиля (в cwebp для этого есть параметр -metadata icc ).

Какие настройки сжатия WebP подходят для сайтов и форм?

Для сайта думайте о весе страницы. Главное изображение на большинстве страниц самый тяжелый элемент, поэтому уделите ему больше всего внимания: правильная ширина, режим с потерями, качество от 70 до 80 с небольшим. Миниатюры и значки можно сжать гораздо сильнее или перевести в режим без потерь. Подробнее о выборе форматов для скорости сайта читайте в статье WebP или PNG.

Все современные популярные браузеры отображают WebP, так что для сайтов он безопасен. С формами загрузки иначе. Многие порталы и старые программы для компьютера до сих пор его не принимают. На Mac Preview открывает файлы WebP, но в меню экспорта WebP нет среди выходных форматов, поэтому пересохранить в нем WebP нельзя.

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

Частые вопросы