Одно и то же «сжатие WebP» означает разные цели для разных людей:
Кто-то хочет преобразовать кучу JPG и PNG в WebP; кто-то уже имеет WebP и хочет сжать его еще сильнее; а кто-то имеет дело с анимированными WebP.
Инструментов нет хороших или плохих, есть только подходящие. В этой статье подборка по сценариям, для каждого сценария даются самые удобные варианты.
Начало: две минуты, чтобы понять WebP
WebP на самом деле существует в трех формах:
- Вредный WebP (Lossy WebP): работает похоже на JPEG, отбрасывает детали в зависимости от параметра качества, имеет небольшой размер, подходит для фотографий, баннеров.
- Бессмысленный WebP (Lossless WebP): работает похоже на PNG, пиксели остаются без изменений, подходит для скриншотов, материалов UI.
- Анимированный WebP: много кадров, может быть с потерями или без, обычно встречается в эмодзи и демонстрационных анимациях, конвертированных из GIF.
Если не уверены, какой тип у файла, используйте официальный инструмент Google webpinfo:
bash
brew install webp
webpinfo image.webp
В выводе VP8 означает вредный, VP8L — бессмысленный; наличие ANIM / ANMF указывает на анимацию.
Стоит знать одну вещь: для вредного WebP использование более высокого параметра качества при перекодировании увеличивает размер файла, но не улучшает качество — отброшенные детали не восстанавливаются. Поэтому для уже существующих WebP хороший инструмент сжатия должен уметь определять «если не сжимается, не сжимаем».
Сценарий 1: массовое преобразование JPG / PNG в WebP
Это то, что большинство людей делают в первый раз, когда знакомятся с WebP.
Для графического интерфейса выберите XnConvert. Бесплатный, кроссплатформенный, можно перетащить сразу кучу картинок, настроить качество или бессмысленный режим WebP, одновременно изменить размер и имя файла. Для задачи преобразования формата это самый удобный вариант.
Для интеграции в процесс сборки выберите cwebp или sharp. В проектах сайтов вместо ручного преобразования лучше обрабатывать автоматически при сборке или загрузке на CDN:
bash
cwebp: качество 75, самый медленный и экономный способ кодирования, сохранение цветового профиля
cwebp -q 75 -m 6 -metadata icc input.jpg -o output.webp
js
// sharp (Node.js)
await sharp('input.jpg').webp({ quality: 75, effort: 6 }).toFile('output.webp')
Не знаете параметры? Начните с Squoosh. Онлайн-инструмент Google, обрабатывает по одной картинке, но позволяет разделять экран, перетаскивать качество в реальном времени. Поняв, «какое качество подходит для такого типа картинок», вы сможете ввести параметры в инструменты для пакетной обработки выше.
Сценарий 2: уже есть WebP, нужно сжать еще меньше
Сайт уже перешел на WebP, но Lighthouse все еще подсказывает «изображение можно сжать еще сильнее»; или в папке материалов лежит куча WebP, занимающих место. В этом случае не нужно преобразование формата, а нужно уменьшить размер существующих файлов на месте.
Для пользователей Mac: ImgZilla
ImgZilla — это наше изображение для macOS, и этот сценарий как раз его сильная сторона:
- Сжатие на месте, путь не меняется. После сжатия
banner.webpвсе еще остаетсяbanner.webp, ссылки в коде и документации не нужно менять ни одной строкой. - Перетащить всю папку. Рекурсивно сканирует все подпапки, автоматически пропускает скрытые файлы и
node_modules; может одновременно обработать WebP и JPG, PNG, GIF, AVIF, HEIC, SVG. - Без настройки параметров. Использует кодирование Google libwebp, качество 75, усилие кодирования 4, соответствует параметрам по умолчанию в Squoosh; альфа-канал сохраняется с наивысшим качеством, прозрачный фон не имеет шероховатостей.
- Не пытается сжать то, что не сжимается. Если после перекодирования размер не уменьшился (коэффициент сжатия менее 0,4%), файл помечается как «уже минимальный» и сохраняется без изменений; вы не получите больший файл и не будут списаны лимиты бесплатной версии.
- Можно передумать. Оригинал по умолчанию перемещается в корзину; если не понравилась какая-то картинка, просто правой кнопкой мыши «вернуть на место».
- Всегда работает локально, файлы не загружаются на какие-либо серверы.
👉 Скачать ImgZilla в Mac App Store
Для других платформ: Caesium или TinyPNG
- Caesium Image Compressor: бесплатный и с открытым исходным кодом, работает на Windows, macOS и Linux, поддерживает пакетное сжатие WebP, можно настроить качество и сохранение метаданных.
- TinyPNG: веб-инструмент, также поддерживает WebP. Просто перетащите файлы — но в бесплатной версии есть ограничения по количеству и размеру, картинки загружаются на серверы TinyPNG.
Сценарий 3: анимированный WebP
Анимация делится на два типа запросов:
Преобразование GIF в анимированный WebP: используйте официальный инструмент Google gif2webp (находится в том же пакете инструментов libwebp, на Mac brew install webp). Для той же анимации анимированный WebP обычно значительно меньше GIF.
bash
gif2webp -q 75 -m 6 input.gif -o output.webp
Если уже есть анимированный WebP и нужно сжать его: многие инструменты при встрече с анимацией выдают ошибку или сохраняют только первый кадр. ImgZilla поддерживает перекодирование анимированного WebP — по кадрам, количество кадров, длительность каждого кадра, количество повторений и размер холста остаются неизменными, анимация остается той же, только файл становится меньше. Как и со статичными картинками, не сжимаемое помечается как «уже минимальное» и остается без изменений.
Сценарий 4: обязательно без потери пикселей
UI-сплиты должны строго соответствовать дизайн-макету, скриншоты требуют сравнения до пикселя, материалы в будущем нужно будет редактировать — в таких случаях нужна бессмысленная (lossless) обработка.
Используйте cwebp:
bash
Абсолютно бессмысленный
cwebp -lossless -z 9 input.png -o output.webp
Почти бессмысленный: пиксели меняются очень незначительно, но размер файла значительно меньше, подходит для скриншотов и UI
cwebp -near_lossless 60 input.png -o output.webp
Внимание: ImgZilla для WebP использует кодирование с потерями (lossy), включая изначально бессмысленные WebP. Размер обычно становится значительно меньше, но пиксели больше не совпадают построчно. Кроме того, он удаляет метаданные из WebP (включая цветовой профиль). Обычным картинкам в sRGB это не мешает; для изображений с широким цветовым охватом, например Display P3, в программах цветовой калибровки цвета могут немного отличаться. Для картинок с жесткими требованиями к пикселям и цветам используйте cwebp или выберите их отдельно перед сжатием.
Таблица-резюме
| Что нужно сделать | Рекомендация | Альтернатива |
|---|---|---|
| Преобразовать кучу JPG / PNG в WebP | XnConvert | cwebp, sharp (процесс сборки) |
| Протестировать параметры, обработать одну картинку | Squoosh | — |
| Уменьшить размер уже существующего WebP на месте (Mac) | ImgZilla | Caesium |
| Уменьшить размер уже существующего WebP (Windows / Linux) | Caesium | TinyPNG |
| Преобразовать GIF в анимированный WebP | gif2webp | — |
| Уменьшить размер уже существующего анимированного WebP | ImgZilla | Написать скрипт с использованием libwebp |
| Обязательно без потери пикселей | cwebp -lossless / -near_lossless |
— |
Ссылки для скачивания
| Инструмент | Платформа | Цена | Ссылка |
|---|---|---|---|
| ImgZilla | macOS 12.3+ | Бесплатная версия: 10 картинок в день | Mac App Store |
| XnConvert | Windows / macOS / Linux | Бесплатно для частного использования | xnview.com |
| Caesium Image Compressor | Windows / macOS / Linux | Бесплатный и с открытым исходным кодом | saerasoft.com |
| cwebp / gif2webp / webpinfo | Командная строка | Бесплатный и с открытым исходным кодом | Официальная страница Google, на Mac: brew install webp |
| sharp | Node.js | Бесплатный и с открытым исходным кодом | sharp.pixelplumbing.com, npm install sharp |
| Squoosh | Веб-интерфейс | Бесплатно | squoosh.app |
| TinyPNG | Веб-интерфейс | Бесплатная версия с ограничениями | tinypng.com |
В заключение
Сам формат WebP уже очень эффективен. Если ваш WebP создан CDN или инструментами сборки с разумными параметрами, дополнительного сжатия может быть немного, и метка «уже минимальный» — норма; реальную экономию чаще дают файлы, экспортированные с высоким качеством, конвертированные без потерь из PNG или напрямую из GIF без дальнейшей обработки.
Сначала с помощью webpinfo разберитесь, что именно у вас в руках, а затем выберите инструмент под сценарий — это сэкономит гораздо больше времени, чем перебор десяти инструментов.
ImgZilla на данный момент поддерживает только macOS (версии 12.3 и выше), доступна для скачивания в Mac App Store. Бесплатная версия позволяет сжимать до 10 картинок в день, лимит списывается только за успешное сжатие — перетащите папку, полную WebP, и посмотрите, сколько места можно сэкономить.