Squoosh CLI — это командная версия Squoosh для оптимизации изображений через терминал. Программа рассчитана не на ручную работу с одной картинкой в браузере, а на автоматизацию: пакетное сжатие изображений, конвертацию JPEG и PNG в WebP или AVIF, подготовку графики для сайта, создание оптимизированных ассетов в отдельной папке и включение обработки изображений в npm scripts, build pipeline или CI/CD-процесс.

В отличие от веб-приложения Squoosh, где пользователь перетаскивает изображение в окно браузера и вручную двигает настройки качества, Squoosh CLI работает через команды. В команду передается один или несколько файлов, затем указываются кодеки и параметры обработки: --mozjpeg, --webp, --avif, --oxipng, --resize, --quant, --rotate, --output-dir, --suffix и другие опции. Программа запускает те же типы задач, ради которых обычно открывают Squoosh.app, но делает это без графического интерфейса и хорошо подходит для массовой обработки файлов.

Squoosh CLI особенно полезен там, где изображения нужно обрабатывать не по одному, а десятками или сотнями: для каталога товаров, блога, лендинга, документации, статического сайта, npm-проекта или frontend-сборки. Вместо ручного открытия каждого файла можно один раз задать команду и получить готовые .jpg, .webp, .avif, .png, .jxl или .wp2 в нужной директории.

Что такое Squoosh CLI

Squoosh CLI — это CLI-инструмент для сжатия, изменения размера, уменьшения палитры, поворота и конвертации изображений. Он использует WebAssembly-кодеки из экосистемы Squoosh и запускает обработку из командной строки. Программа принимает список файлов как позиционный аргумент <files...>, а конкретные действия выбираются флагами. Например, --webp создает WebP-файл, --avif создает AVIF-файл, --mozjpeg генерирует JPEG через MozJPEG, а --oxipng оптимизирует PNG.

Главная идея Squoosh CLI — перенести возможности Squoosh из браузерного интерфейса в автоматизированный режим. Веб-версия удобна для визуального сравнения до и после, а CLI-версия удобна для повторяемой обработки: один набор параметров можно применить к папке изображений, использовать в скрипте, добавить в процесс сборки сайта или повторить на другом проекте.

Squoosh CLI работает как утилита командной строки. У него нет кнопок, окон, вкладок, отдельного визуального редактора и панели предпросмотра. Его интерфейс — это команда, параметры и вывод в терминале. После завершения обработки программа показывает исходный размер файла, путь к новому файлу, новый размер и процент относительно оригинала. Такой формат особенно понятен разработчикам: результат сразу видно в консоли, а команду легко сохранить в package.json.

При этом Squoosh CLI не стоит воспринимать как универсальную замену всем оптимизаторам изображений. Это конкретная программа со своим сильным сценарием: несколько популярных web-кодеков в одной CLI-команде. Она хорошо закрывает задачи WebP, AVIF, JPEG и PNG-оптимизации, но для узких производственных сценариев иногда рациональнее брать специализированные инструменты: cwebp только для WebP, avifenc только для AVIF, oxipng только для PNG или Sharp для серверной обработки.

Основные возможности Squoosh CLI

Squoosh CLI умеет выполнять несколько типов операций над изображениями. В программе есть не только кодеки для сохранения результата в другом формате, но и подготовительные операции: изменение размера, уменьшение количества цветов и поворот.

Ключевые задачи, которые можно сделать в Squoosh CLI:

Задача	Опция	Что делает
Сжатие JPEG	--mozjpeg	Создает .jpg через MozJPEG
Конвертация в WebP	--webp	Создает .webp
Конвертация в AVIF	--avif	Создает .avif
Оптимизация PNG	--oxipng	Создает оптимизированный .png
Создание JPEG XL	--jxl	Создает .jxl
Создание WebP2	--wp2	Создает .wp2
Изменение размера	--resize	Меняет ширину, высоту и метод ресайза перед кодированием
Уменьшение палитры	--quant	Снижает количество используемых цветов
Поворот изображения	--rotate	Поворачивает изображение перед сохранением
Вывод в папку	-d, --output-dir	Сохраняет результат в заданную директорию
Суффикс имени	-s, --suffix	Добавляет суффикс к имени выходного файла
Справка	-h, --help	Показывает доступные параметры
Версия	-V, --version	Выводит номер версии программы

Набор опций делает Squoosh CLI удобным не только для простого сжатия картинки, но и для реального рабочего процесса. Например, можно взять исходные PNG-файлы, уменьшить их до нужной ширины, применить палитризацию, сохранить результат в WebP и положить выходные файлы в отдельную папку. Все это выполняется одной командой.

Логика работы программы

Рабочая схема Squoosh CLI простая:

1. Пользователь указывает один или несколько входных файлов.

2. Выбирает один или несколько обработчиков: например, --webp, --avif, --mozjpeg.

3. При необходимости добавляет предварительную обработку: --resize, --quant, --rotate.

4. Указывает папку вывода через -d или оставляет сохранение в текущей директории.

5. Запускает команду.

6. Получает новые файлы и отчет в терминале.

Базовый синтаксис выглядит так:

squoosh-cli [options] <files...>

Практический пример:

squoosh-cli --webp auto image.jpg

Эта команда берет image.jpg, обрабатывает его через WebP-кодек и создает WebP-версию. Конфигурация auto включает автоматический подбор параметров для выбранного кодека.

Пример с отдельной папкой вывода:

squoosh-cli --mozjpeg auto ./images/photo.jpg -d ./output

Здесь Squoosh CLI берет файл photo.jpg, сжимает его через MozJPEG и сохраняет результат в папку output.

Пример с несколькими файлами:

squoosh-cli --webp auto ./images/photo-1.jpg ./images/photo-2.jpg ./images/photo-3.png -d ./dist/images

Такой формат удобен, когда нужно обработать несколько конкретных изображений без отдельного скрипта.

Интерфейс командной строки

Squoosh CLI не имеет графического интерфейса. Все управление происходит через терминал, поэтому основные элементы программы — это команды, флаги, аргументы и вывод результата. Для CLI-инструмента это нормальная и правильная модель: она дает повторяемость, позволяет хранить настройки в скриптах и исключает ручные действия.

Ввод команды состоит из нескольких частей:

squoosh-cli --webp auto ./image.png -d ./output

Разбор команды:

Часть команды	Значение
squoosh-cli	запуск программы
--webp	выбор кодека WebP
auto	автоматическая конфигурация кодека
./image.png	входной файл
-d ./output	папка для сохранения результата

В терминале Squoosh CLI показывает ход обработки. Во время работы можно увидеть количество обработанных файлов, стадию кодирования и итоговый блок Squoosh results. Вывод обычно читается так: сначала идет исходный файл и его размер, ниже — созданный файл, новый размер и процент от исходного веса.

Пример логики итогового вывода:

1/1 ✔ Squoosh results: image.png: 850.00KB  └ image.webp → 240.00KB (28.2%)

Это означает, что исходный файл весил 850 KB, а новый WebP-файл — 240 KB. Процент показывает отношение нового размера к исходному. Чем меньше процент, тем сильнее уменьшился файл. Если результат показывает больше 100%, значит новая версия оказалась тяжелее оригинала, и такой файл не стоит автоматически использовать без проверки.

Связь с веб-версией Squoosh

Squoosh CLI тесно связан с Squoosh.app по логике кодеков и параметров. Веб-версия дает визуальный интерфейс: можно загрузить картинку, открыть блок Edit, включить Resize, включить Reduce palette, выбрать кодек в блоке Compress, раскрыть Advanced settings, увидеть размер результата и скачать оптимизированный файл. В интерфейсе также есть маленькая кнопка Copy npx command, которая копирует команду для запуска похожей обработки через Squoosh CLI.

Эта связь особенно удобна для тех, кто сначала подбирает настройки визуально. В браузере можно сравнить качество до и после, выбрать WebP, AVIF или MozJPEG, отрегулировать качество, размер и дополнительные параметры, а затем перенести команду в терминал. В результате веб-версия становится визуальным конструктором настроек, а CLI — способом массового применения этих настроек к файлам.

Но важно разделять эти два режима. Веб-версия подходит для контроля качества глазами: есть центральный разделитель до/после, масштабирование, панель настроек, кнопки загрузки результата. Squoosh CLI подходит для повторяемой обработки: нет предпросмотра, зато есть скорость работы с пачкой файлов, удобство скриптов и предсказуемая структура команд.

Поддерживаемые кодеки и форматы

Squoosh CLI закрывает основные web-сценарии: JPEG, PNG, WebP и AVIF. Дополнительно есть JPEG XL и WebP2, но в реальной публикации на сайтах чаще используются JPEG, PNG, WebP и AVIF из-за совместимости браузеров и CMS.

Опция Squoosh CLI	Выходной формат	Типичная задача
--mozjpeg	.jpg	Оптимизация фотографий и обычных JPEG-изображений
--webp	.webp	Создание современной web-версии изображения
--avif	.avif	Максимальное уменьшение веса при хорошем визуальном качестве
--oxipng	.png	Lossless-оптимизация PNG без смены формата
--jxl	.jxl	Эксперименты с JPEG XL
--wp2	.wp2	Эксперименты с WebP2

MozJPEG

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

Пример:

squoosh-cli --mozjpeg auto photo.png -d ./output

Команда создаст JPEG-версию изображения. Если исходник был PNG с прозрачностью, перед такой конвертацией нужно понимать, что JPEG не поддерживает альфа-канал: прозрачные области будут обработаны не так, как в PNG или WebP.

WebP

--webp используется для создания .webp. Это один из самых частых сценариев Squoosh CLI: взять JPEG или PNG и подготовить WebP-версию для сайта.

Пример:

squoosh-cli --webp auto banner.jpg -d ./output

WebP особенно полезен для web-ассетов: карточек товаров, изображений в статьях, фоновых картинок, превью и интерфейсной графики. Но итоговый размер нужно проверять. Иногда WebP получается больше оригинала, особенно если исходный PNG уже очень маленький или содержит простую графику.

AVIF

--avif создает .avif. AVIF часто дает сильное сжатие на фотографиях и сложных изображениях, но кодирование обычно воспринимается как более тяжелое по времени, чем WebP или JPEG. В Squoosh CLI AVIF полезен для генерации альтернативного формата в <picture>.

Пример:

squoosh-cli --avif auto hero.jpg -d ./output

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

OxiPNG

--oxipng создает оптимизированный PNG. Это вариант для случаев, когда формат менять нельзя: нужна прозрачность, требуется PNG, изображение используется в CMS или в дизайне, где нежелательна потеря качества.

Пример:

squoosh-cli --oxipng auto icon.png -d ./output

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

Установка, запуск и проверка справки

Squoosh CLI запускается из Node.js-окружения. В практической работе обычно используют два способа: запуск через npx или запуск команды squoosh-cli, если пакет уже доступен в окружении. В обзоре важнее не место получения программы, а то, как она работает в командной строке.

Запуск через npx:

npx @squoosh/cli --webp auto image.jpg

Запуск командой squoosh-cli:

squoosh-cli --webp auto image.jpg

Проверка справки:

squoosh-cli -h

или:

squoosh-cli --help

В справке отображается синтаксис squoosh-cli [options] <files...> и список доступных флагов: --output-dir, --suffix, --resize, --quant, --rotate, --mozjpeg, --webp, --avif, --jxl, --wp2, --oxipng, --help.

Проверка версии выполняется флагом:

squoosh-cli -V

или:

squoosh-cli --version

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

squoosh-cli --webp auto ./src/images/photo.jpg -d ./dist/images

Такая команда понятна даже без дополнительного скрипта: взять изображение из src/images, создать WebP и положить результат в dist/images.

Работа с одним изображением

Самый простой сценарий — обработать один файл. Это удобно для проверки качества и подбора формата перед массовой обработкой.

JPEG в WebP

squoosh-cli --webp auto photo.jpg -d ./output

Результат: рядом с выбранной папкой вывода появится WebP-версия фотографии.

PNG в WebP

squoosh-cli --webp auto screenshot.png -d ./output

Результат: Squoosh CLI создаст .webp. После обработки нужно сравнить вес PNG и WebP. Для скриншотов интерфейса WebP часто уменьшает размер, но если исходник уже хорошо оптимизирован, выигрыш может быть небольшим.

JPEG в AVIF

squoosh-cli --avif auto hero.jpg -d ./output

Результат: создается AVIF-версия изображения. Такой вариант уместен для крупных изображений, где каждый килобайт важен.

PNG через OxiPNG

squoosh-cli --oxipng auto icon.png -d ./output

Результат: создается оптимизированный PNG. Формат остается PNG, поэтому это безопасный сценарий для изображений, где нельзя терять прозрачность и четкость.

JPEG через MozJPEG

squoosh-cli --mozjpeg auto photo.jpg -d ./output

Результат: создается оптимизированный .jpg. Это практичный вариант для сохранения максимальной совместимости.

Пакетная обработка изображений

Сильная сторона Squoosh CLI — обработка нескольких файлов одной командой. Веб-версия Squoosh удобна для одной картинки, но при работе с папкой изображений ручная обработка быстро становится неэффективной. CLI решает эту задачу напрямую: передается список файлов, а программа применяет к ним один и тот же набор параметров.

Пример с несколькими файлами:

squoosh-cli --webp auto ./images/one.jpg ./images/two.jpg ./images/three.png -d ./output

Пример с файлами текущей папки в Unix-подобной оболочке:

squoosh-cli --webp auto ./*.jpg -d ./output

Пример с PNG:

squoosh-cli --oxipng auto ./*.png -d ./output

Пример с созданием JPEG-версий:

squoosh-cli --mozjpeg auto ./*.png -d ./jpg-output

Squoosh CLI использует worker pool для параллельной обработки изображений. Это значит, что при работе с несколькими файлами программа распределяет обработку между рабочими процессами, а не обязательно обрабатывает изображения строго по одному. Такой подход делает CLI-версию удобной для пакетного сжатия изображений и подготовки ассетов.

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

Вывод файлов в отдельную папку

Флаг -d или --output-dir задает папку, куда Squoosh CLI сохраняет результат. Это один из самых полезных параметров программы. Без него легко смешать исходники и выходные файлы, особенно если команда применяется к большому набору изображений.

Пример:

squoosh-cli --webp auto ./images/photo.jpg -d ./compressed

Эквивалентная форма:

squoosh-cli --webp auto ./images/photo.jpg --output-dir ./compressed

Рациональная структура проекта может выглядеть так:

project/  src/    images/      hero.jpg      card-1.jpg      card-2.png  dist/    images/      hero.webp      card-1.webp      card-2.webp

Команда для такой структуры:

squoosh-cli --webp auto ./src/images/* -d ./dist/images

На Windows, macOS и Linux обработка шаблонов файлов зависит от оболочки. Поэтому для надежного сценария в проектах часто используют явный список файлов, npm scripts, Node.js-скрипт-обертку или отдельный инструмент для поиска файлов. Сам Squoosh CLI принимает <files...>, но то, как именно раскрываются маски вроде *.jpg, зависит не только от программы, но и от командной оболочки.

Суффиксы для выходных файлов

Флаг -s или --suffix добавляет суффикс к именам выходных файлов. Это полезно, когда нужно сохранить несколько вариантов одного изображения и не перепутать результат.

Пример:

squoosh-cli --webp auto image.jpg -s -optimized -d ./output

Логика результата:

image.jpgimage-optimized.webp

Практические варианты суффиксов:

Суффикс	Когда использовать
-optimized	Общий вариант для сжатой версии
-webp	Когда нужно явно отметить WebP-вариант
-avif	Когда рядом лежат разные форматы
-small	Для уменьшенной версии
-thumb	Для миниатюр

 

Пример генерации уменьшенной WebP-версии:

squoosh-cli --resize "{'enabled':true,'width':800,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp auto image.jpg -s -800w -d ./output

Суффиксы особенно полезны при подготовке responsive images, где нужны версии 400w, 800w, 1200w и отдельные форматы WebP/AVIF.

Автоматический оптимизатор

Squoosh CLI поддерживает режим auto, который используется как конфигурация кодека. Вместо ручного JSON-объекта можно написать:

squoosh-cli --webp auto image.png

или:

squoosh-cli --avif auto image.jpg

Режим auto включает автоматическую оптимизацию с ориентацией на Butteraugli target. Для auto-режима есть параметры --max-optimizer-rounds и --optimizer-butteraugli-target. Первый ограничивает максимальное количество попыток сжатия, второй задает целевую дистанцию Butteraugli. Чем выше целевое значение, тем больше допустимы визуальные искажения.

Пример с настройкой количества раундов:

squoosh-cli --webp auto --max-optimizer-rounds 8 image.jpg -d ./output

Пример с более мягкой целью:

squoosh-cli --webp auto --optimizer-butteraugli-target 1.2 image.jpg -d ./output

Пример с более агрессивной целью:

squoosh-cli --webp auto --optimizer-butteraugli-target 2.0 image.jpg -d ./output

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

Настройки кодеков через JSON

Помимо auto, Squoosh CLI принимает конфигурации кодеков в виде объекта. Это дает больше контроля, но требует аккуратности с кавычками в терминале.

Пример WebP с явным качеством:

squoosh-cli --webp "{'quality':75}" image.jpg -d ./output

Пример MozJPEG с качеством:

squoosh-cli --mozjpeg "{'quality':75}" photo.png -d ./output

Пример resize + MozJPEG:

squoosh-cli --resize "{'enabled':true,'width':1200,'method':'lanczos3','premultiply':true,'linearRGB':true}" --mozjpeg "{'quality':75}" photo.jpg -d ./output

Конфигурации особенно полезны, когда нужно повторить один и тот же уровень качества во всех сборках. Например, для каталога товаров можно принять правило: большие фотографии сохраняются в WebP с качеством 75, ширина ограничивается 1600 пикселями, результат складывается в dist/images.

Пример:

squoosh-cli --resize "{'enabled':true,'width':1600,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp "{'quality':75}" ./src/images/* -d ./dist/images

Главная сложность JSON-конфигов — кавычки. В Bash, zsh, PowerShell и CMD правила экранирования отличаются. Поэтому длинные команды, скопированные из браузерной версии Squoosh, иногда требуют адаптации под конкретную оболочку. Это не недостаток кодеков, а обычная проблема CLI-инструментов с вложенными объектами в аргументах.

Изменение размера через --resize

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

Пример:

squoosh-cli --resize "{'enabled':true,'width':1200,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp auto image.jpg -d ./output

Что делает команда:

Параметр	Значение
enabled:true	включает resize
width:1200	задает ширину
method:'lanczos3'	использует метод ресайза Lanczos3
premultiply:true	учитывает альфа-канал при обработке
linearRGB:true	выполняет обработку с учетом linear RGB
--webp auto	сохраняет результат в WebP

Resize особенно полезен для изображений, которые попали на сайт прямо из камеры или графического редактора. Если фотография имеет ширину 5000 пикселей, а на сайте показывается максимум в 1200 пикселей, сжатие без изменения размера оставит лишние данные. В таком случае правильный порядок такой: сначала уменьшить изображение, затем применить кодек.

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

Назначение	Ширина
Миниатюра карточки	320–480 px
Изображение в статье	768–1200 px
Большой баннер	1440–1920 px
Retina-вариант	2× от отображаемого размера
Полноэкранный hero	1600–2560 px

Squoosh CLI не решает за пользователя, какие размеры нужны сайту. Программа выполняет заданную операцию. Поэтому перед массовым resize нужно понимать дизайн-макет, реальные CSS-размеры и сценарии отображения на мобильных и десктопных экранах.

Уменьшение палитры через --quant

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

Пример:

squoosh-cli --quant "{'enabled':true,'numColors':128,'dither':1}" --webp auto screenshot.png -d ./output

Что делает команда:

Параметр	Значение
enabled:true	включает уменьшение палитры
numColors:128	ограничивает количество цветов
dither:1	добавляет дизеринг для сглаживания переходов
--webp auto	сохраняет результат в WebP

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

Хороший подход — тестировать несколько значений:

squoosh-cli --quant "{'enabled':true,'numColors':256,'dither':1}" --webp auto screen.png -s -256 -d ./outputsquoosh-cli --quant "{'enabled':true,'numColors':128,'dither':1}" --webp auto screen.png -s -128 -d ./outputsquoosh-cli --quant "{'enabled':true,'numColors':64,'dither':1}" --webp auto screen.png -s -64 -d ./output

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

Поворот изображения через --rotate

Флаг --rotate поворачивает изображение перед сохранением. Это не самая частая операция в Squoosh CLI, но она полезна при подготовке набора файлов, где часть изображений имеет неправильную ориентацию.

Примерная логика команды:

squoosh-cli --rotate "{'enabled':true,'numRotations':1}" --webp auto image.jpg -d ./output

Поворот имеет смысл использовать тогда, когда ориентация заранее известна и ее нужно исправить массово. Для обычной оптимизации сайта чаще применяются --resize, --webp, --avif, --mozjpeg и --oxipng.

Практические сценарии использования

Подготовка WebP для сайта

Один из самых частых сценариев — создание WebP-копий для JPEG и PNG.

squoosh-cli --webp auto ./src/images/* -d ./dist/images

Такой подход удобен для статических сайтов, блогов, лендингов и документации. Исходники остаются в src/images, а оптимизированные файлы попадают в dist/images.

Генерация AVIF для <picture>

AVIF можно использовать как более агрессивный формат для современных браузеров:

squoosh-cli --avif auto ./src/images/hero.jpg -d ./dist/images

HTML-разметка может выглядеть так:

<picture>  <source srcset="/images/hero.avif" type="image/avif">  <source srcset="/images/hero.webp" type="image/webp">  <img src="/images/hero.jpg" alt="Описание изображения"></picture>

Squoosh CLI здесь отвечает только за создание файлов. Выбор формата браузером делает HTML через <picture> и source.

Оптимизация PNG без смены формата

Когда нужен именно PNG:

squoosh-cli --oxipng auto ./src/icons/*.png -d ./dist/icons

Это хороший сценарий для иконок, UI-графики и изображений с прозрачностью.

Уменьшение больших фотографий

squoosh-cli --resize "{'enabled':true,'width':1600,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp auto ./photos/*.jpg -d ./output

Здесь Squoosh CLI сначала уменьшает ширину до 1600 пикселей, затем создает WebP. Для больших фото это обычно важнее, чем просто поменять формат без изменения размеров.

Создание миниатюр

squoosh-cli --resize "{'enabled':true,'width':400,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp "{'quality':70}" ./photos/*.jpg -s -thumb -d ./thumbs

Результат — набор небольших WebP-миниатюр с суффиксом -thumb.

Подготовка изображений для npm script

В package.json можно добавить команду:

{  "scripts": {    "images:webp": "squoosh-cli --webp auto ./src/images/* -d ./dist/images",    "images:avif": "squoosh-cli --avif auto ./src/images/* -d ./dist/images",    "images:png": "squoosh-cli --oxipng auto ./src/images/*.png -d ./dist/images"  }}

После этого запуск становится короче:

npm run images:webp

Так Squoosh CLI превращается из ручной команды в часть рабочего процесса проекта.

Как читать результаты Squoosh CLI

Итоговый блок Squoosh CLI важен не меньше самой команды. Он показывает, насколько успешно прошла оптимизация.

Пример:

10/10 ✔ Squoosh results: photo-1.jpg: 1.24MB  └ photo-1.webp → 420.15KB (33.1%) photo-2.png: 850.00KB  └ photo-2.webp → 310.42KB (36.5%) icon.png: 12.00KB  └ icon.webp → 18.40KB (153.3%)

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

Правильная интерпретация результата:

Результат	Что означает	Что делать
20–60%	хорошее уменьшение	можно использовать
60–90%	умеренный выигрыш	проверить качество и целесообразность
90–100%	почти нет выигрыша	возможно, формат менять не нужно
больше 100%	файл стал тяжелее	оставить оригинал или подобрать другой кодек

Squoosh CLI не принимает решение за пользователя. Он показывает результат, а дальше нужно оценить: подходит ли новый файл для сайта, не ухудшилось ли качество, не появился ли лишний формат, который не дает выигрыша.

Качество сжатия и выбор формата

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

Фотографии

Для фотографий обычно тестируют:

squoosh-cli --mozjpeg auto photo.jpg -d ./outsquoosh-cli --webp auto photo.jpg -d ./outsquoosh-cli --avif auto photo.jpg -d ./out

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

Скриншоты интерфейса

Для скриншотов можно сравнивать:

squoosh-cli --oxipng auto screen.png -d ./outsquoosh-cli --webp auto screen.png -d ./out

Если скриншот содержит много текста и тонких линий, важно проверять резкость. Слишком агрессивное сжатие может испортить читаемость.

Иконки и простая графика

Для PNG-иконок часто лучше начинать с OxiPNG:

squoosh-cli --oxipng auto icon.png -d ./out

Если иконка растровая и большая, можно попробовать WebP. Если это векторная иконка, Squoosh CLI не заменяет работу с SVG-оптимизаторами.

Изображения с прозрачностью

JPEG не подходит для прозрачности. Для таких файлов лучше проверять PNG, WebP или AVIF:

squoosh-cli --webp auto transparent.png -d ./outsquoosh-cli --avif auto transparent.png -d ./outsquoosh-cli --oxipng auto transparent.png -d ./out

Большие hero-изображения

Для hero-блоков обычно важны и размер, и визуальное качество. Здесь разумно создать несколько вариантов:

squoosh-cli --resize "{'enabled':true,'width':1920,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp auto hero.jpg -d ./outsquoosh-cli --resize "{'enabled':true,'width':1920,'method':'lanczos3','premultiply':true,'linearRGB':true}" --avif auto hero.jpg -d ./out

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

Производительность и ограничения скорости

Squoosh CLI использует worker pool и может применять один и тот же кодек к нескольким изображениям сразу. Это полезно для пакетной обработки. При этом программа не позиционируется как самый быстрый компрессор изображений; ее ценность в другом — в доступе к набору кодеков Squoosh из одной CLI-команды и в удобстве автоматизации.

На практике скорость зависит от нескольких факторов:

Фактор	Как влияет
Количество файлов	Чем больше файлов, тем заметнее польза batch-обработки
Размер изображений	Большие фотографии требуют больше памяти и времени
Выбранный кодек	AVIF обычно тяжелее WebP и JPEG
Resize	Уменьшение размера добавляет этап обработки, но может снизить время последующего кодирования
Auto-режим	Может выполнять несколько попыток кодирования
Железо	CPU и память сильно влияют на скорость

Squoosh CLI хорошо подходит для обработки набора изображений перед публикацией. Но если нужно обрабатывать огромные архивы каждый день, генерировать десятки размеров для тысяч файлов или запускать оптимизацию на сервере под нагрузкой, стоит сравнить его с Sharp, cwebp, avifenc и специализированными пайплайнами.

Приватность и локальная обработка

Squoosh как проект построен вокруг локальной обработки изображений. Веб-версия Squoosh не отправляет изображение на сервер для сжатия; обработка выполняется локально. CLI-версия также работает на машине пользователя: файлы передаются команде, кодек обрабатывает их локально, результат сохраняется в указанную папку.

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

Однако локальная обработка не отменяет обычные правила работы с Node.js-инструментами: зависимости должны быть зафиксированы, команды — воспроизводимы, а изменения в пайплайне — проверены на тестовом наборе изображений.

Интеграция в рабочий процесс

Squoosh CLI хорошо ложится на frontend-процессы, потому что запускается из командной строки и легко добавляется в npm scripts. Самый простой вариант — вручную запускать команду перед публикацией:

squoosh-cli --webp auto ./src/images/* -d ./dist/images

Более практичный вариант — вынести команды в package.json:

{  "scripts": {    "optimize:webp": "squoosh-cli --webp auto ./src/images/* -d ./dist/images",    "optimize:avif": "squoosh-cli --avif auto ./src/images/* -d ./dist/images",    "optimize:png": "squoosh-cli --oxipng auto ./src/images/*.png -d ./dist/images",    "optimize:images": "npm run optimize:webp && npm run optimize:avif && npm run optimize:png"  }}

После этого команда:

npm run optimize:images

может стать частью подготовки проекта к публикации.

Типовые места Squoosh CLI в процессе:

Этап	Как используется
До сборки	исходники оптимизируются в dist/images
После добавления контента	новые изображения прогоняются вручную
Перед деплоем	команда запускается как часть build-процесса
В CI	изображения обрабатываются на отдельном шаге
В документации	скриншоты уменьшаются перед публикацией
В блоге	фотографии конвертируются в WebP/AVIF

Squoosh CLI не заменяет CDN-оптимизацию и не управляет HTML-разметкой. Он создает файлы. Дальше проект должен правильно подключить эти файлы: через <picture>, srcset, CSS, CMS-шаблон или компонент фреймворка.

Примеры команд для типовых задач

WebP из одного JPEG

squoosh-cli --webp auto photo.jpg -d ./output

AVIF из одного JPEG

squoosh-cli --avif auto photo.jpg -d ./output

MozJPEG из PNG

squoosh-cli --mozjpeg auto image.png -d ./output

OxiPNG для PNG

squoosh-cli --oxipng auto image.png -d ./output

WebP с изменением ширины

squoosh-cli --resize "{'enabled':true,'width':1200,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp auto image.jpg -d ./output

AVIF с изменением ширины

squoosh-cli --resize "{'enabled':true,'width':1600,'method':'lanczos3','premultiply':true,'linearRGB':true}" --avif auto hero.jpg -d ./output

WebP с суффиксом

squoosh-cli --webp auto image.jpg -s -optimized -d ./output

Несколько форматов из одного файла

squoosh-cli --webp auto --avif auto image.jpg -d ./output

Такой вариант может создать несколько выходных файлов из одного исходника.

Пакетная обработка JPEG

squoosh-cli --webp auto ./*.jpg -d ./webp

Пакетная обработка PNG

squoosh-cli --oxipng auto ./*.png -d ./png-optimized

Генерация миниатюр

squoosh-cli --resize "{'enabled':true,'width':480,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp "{'quality':72}" ./images/* -s -thumb -d ./thumbs

Работа через Squoosh.app как подготовка команды

Для сложных настроек удобно использовать веб-интерфейс Squoosh как визуальную подготовку. В браузере можно загрузить изображение, выбрать параметры и скопировать npx-команду. В правой панели Squoosh есть блок Edit, переключатели Resize и Reduce palette, блок Compress, выпадающий список кодека, параметр Quality, раскрываемый блок Advanced settings и кнопка скачивания результата. Рядом с верхней частью панели есть иконка Copy npx command, которая нужна именно для связи с CLI-сценарием.

Этот сценарий выглядит так:

1. Открыть изображение в Squoosh.app.

2. Включить Resize, если нужно уменьшить размер.

3. Включить Reduce palette, если изображение подходит для палитризации.

4. В блоке Compress выбрать кодек: MozJPEG, WebP, AVIF, Browser PNG или другой.

5. Настроить Quality и Advanced settings.

6. Нажать Copy npx command.

7. Использовать полученную команду в терминале.

8. При необходимости заменить один файл на маску или список файлов.

Такой подход снижает риск подбирать длинный JSON вручную. Визуальная часть помогает оценить качество, а CLI-часть позволяет масштабировать настройки на всю папку.

Преимущества Squoosh CLI

Несколько кодеков в одной программе

Squoosh CLI удобен тем, что в одной команде доступны MozJPEG, WebP, AVIF, OxiPNG, JPEG XL и WebP2. Не нужно отдельно вспоминать синтаксис каждого кодека для базовых задач.

Удобство для пакетной обработки

Главное преимущество CLI-версии перед браузерной — массовая обработка. Можно применить одинаковые настройки к набору файлов и сразу увидеть результат по каждому изображению.

Подходит для npm scripts

Squoosh CLI хорошо вписывается в JavaScript-проекты. Команду можно сохранить в package.json, запускать перед сборкой или включить в отдельный процесс оптимизации ассетов.

Есть автоматический режим

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

Можно комбинировать операции

Squoosh CLI умеет не только менять формат. Resize, quant и rotate позволяют подготовить изображение перед кодированием. Это важно, потому что грамотная оптимизация — это не только выбор WebP или AVIF, но и удаление лишнего размера, цветов и неправильной ориентации.

Локальная обработка

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

Недостатки и ограничения

Нет визуального сравнения

Squoosh CLI не показывает картинку до и после. Он выводит размер и процент, но не показывает артефакты. Поэтому после настройки качества результат нужно проверять отдельно: в браузере, просмотрщике изображений или через веб-версию Squoosh.

JSON-конфиги неудобны для новичков

Длинные параметры вида:

--mozjpeg "{'quality':75,'progressive':true,'optimize_coding':true}"

быстро становятся громоздкими. Особенно это заметно, когда команда содержит --resize, --quant и один или два кодека.

Кавычки зависят от оболочки

Команда, которая нормально работает в Bash или zsh, может потребовать другой формы кавычек в PowerShell или CMD. Это типичная проблема командной строки, но для новичков она выглядит как ошибка программы.

Не всегда дает самый маленький файл

Squoosh CLI не гарантирует, что WebP или AVIF всегда будет меньше оригинала. Маленькие PNG, простые иконки, уже оптимизированные изображения и некоторые скриншоты могут дать слабый результат или даже увеличиться в размере.

Не самый быстрый инструмент для всех задач

Squoosh CLI удобен как универсальная оболочка вокруг нескольких кодеков, но специализированные программы могут быть быстрее и точнее в своей области. Для больших production-пайплайнов это нужно учитывать.

Проект требует осторожности в новых процессах

Squoosh CLI имеет ограничение по сопровождению: пакет не является активно развиваемым так же, как многие современные инструменты обработки изображений. Для разовых задач, локальной оптимизации и простых npm scripts он остается полезным, но для нового большого production-пайплайна его нужно сравнивать с Sharp, cwebp, avifenc и oxipng.

Частые ошибки при работе с Squoosh CLI

Выходной файл больше исходного

Это нормальная ситуация. Например, маленький PNG может стать больше после конвертации в WebP. Решение: проверять итоговый размер и не использовать формат автоматически, если он не дает выигрыша.

Команда не видит файлы

Причина часто не в Squoosh CLI, а в пути. Нужно проверить текущую директорию и правильность относительных путей:

pwdls ./images

или в Windows:

cddir images

Маска *.jpg работает не так, как ожидалось

Раскрытие масок зависит от оболочки. В Unix-подобных оболочках *.jpg обычно раскрывается до списка файлов. В Windows-процессах поведение может отличаться. Для надежности можно передавать конкретные файлы или запускать Squoosh CLI через скрипт, который сам собирает список изображений.

Ошибка при обработке папки как файла

Если передать путь, который содержит директорию, Squoosh CLI может попытаться прочитать ее как файл. Нужно указывать именно изображения, а не папки вперемешку с файлами. В обсуждениях Squoosh CLI встречается ошибка EISDIR: illegal operation on a directory, read, когда в обработку попадает директория.

Неправильная идея:

squoosh-cli --webp auto ./*

Если в текущей папке есть не только изображения, но и директории, такой вызов может быть проблемным.

Более безопасно:

squoosh-cli --webp auto ./*.jpg -d ./output

или:

squoosh-cli --webp auto ./*.png -d ./output

AVIF обрабатывается слишком долго

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

Слишком агрессивное качество

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

Перезапись или смешивание файлов

Чтобы не потерять контроль над исходниками, лучше всегда использовать -d:

squoosh-cli --webp auto ./src/images/* -d ./dist/images

Исходники должны оставаться отдельно от результата.

Советы по использованию Squoosh CLI

Сначала тестировать на 3–5 файлах

Не нужно сразу запускать Squoosh CLI на всю медиатеку. Лучше выбрать несколько типичных изображений: фотографию, скриншот, иконку, баннер и картинку с прозрачностью. После этого сравнить WebP, AVIF, MozJPEG и OxiPNG.

Не использовать один формат для всего

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

Всегда сохранять исходники

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

Использовать отдельную папку вывода

Флаг -d дисциплинирует процесс:

squoosh-cli --webp auto ./src/images/* -d ./dist/images

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

Проверять изображения глазами

Размер файла — не единственный критерий. Нужно проверять:

• текст на скриншотах;

• лица и кожу на фотографиях;

• градиенты;

• мелкие линии;

• прозрачные края;

• логотипы;

• темные области;

• цветовые переходы.

Не ставить слишком низкое качество

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

Создавать несколько вариантов ширины

Для responsive images лучше делать не один огромный файл, а несколько размеров:

squoosh-cli --resize "{'enabled':true,'width':480,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp auto image.jpg -s -480w -d ./outputsquoosh-cli --resize "{'enabled':true,'width':960,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp auto image.jpg -s -960w -d ./outputsquoosh-cli --resize "{'enabled':true,'width':1440,'method':'lanczos3','premultiply':true,'linearRGB':true}" --webp auto image.jpg -s -1440w -d ./output

После этого можно использовать srcset.

Фиксировать команды в проекте

Хорошая команда должна быть сохранена, а не лежать в истории терминала. Лучше хранить ее в package.json, README проекта или отдельном скрипте.

Сравнение с аналогами

Squoosh CLI конкурирует не с одним инструментом, а с несколькими разными подходами к оптимизации изображений. Его сильная сторона — единая CLI-оболочка для нескольких кодеков Squoosh. Его слабая сторона — он не всегда быстрее и удобнее специализированных программ.

Программа	Лучше всего подходит для	Сильные стороны	Ограничения
Squoosh CLI	Пакетная web-оптимизация через несколько кодеков	WebP, AVIF, MozJPEG, OxiPNG, resize и quant в одной команде	Нет визуального сравнения, JSON-конфиги громоздкие
ImageMagick	Универсальная обработка изображений	Огромный набор операций: resize, crop, convert, draw, blur, compose	Не специализирован именно под web-сжатие
Sharp	Node.js-пайплайны и серверная обработка	Быстрый resize и конвертация в JPEG, PNG, WebP, AVIF через libvips	Требует программной интеграции или отдельной CLI-обертки
imagemin	Сборочные процессы в JavaScript	Плагинная архитектура, удобен для Gulp/Webpack-подобных процессов	Нужно подбирать плагины и настраивать пайплайн
cwebp	WebP	Специализированный официальный encoder WebP с большим числом параметров	Работает только с WebP
avifenc	AVIF	Точный контроль AVIF-кодирования	Более узкий и технический инструмент
oxipng	PNG/APNG	Быстрая lossless-оптимизация PNG	Только PNG/APNG
pngquant	Lossy PNG	Сильное уменьшение PNG за счет палитры	Возможна потеря цветов
jpegoptim	JPEG	Простая JPEG-оптимизация	Только JPEG

ImageMagick — универсальный комбайн для изображений. Он умеет конвертировать форматы, менять размер, обрезать, объединять, рисовать, применять эффекты и выполнять сложные операции командной строки. В сравнении с ним Squoosh CLI гораздо уже: он не предназначен для всего спектра графической обработки, зато удобен именно для web-сжатия через набор Squoosh-кодеков.

Sharp лучше подходит для программной интеграции в Node.js. Он используется, когда нужно не просто запустить команду, а встроить обработку изображений в backend, генератор статического сайта или кастомный скрипт. Sharp ориентирован на быструю обработку больших изображений, resize и web-friendly форматы вроде JPEG, PNG, WebP и AVIF.

cwebp — хороший выбор, если нужна только WebP-конвертация. У него прямой синтаксис, много параметров качества, lossless-режим, resize, crop и управление выводом. Но если нужно в одной команде сравнивать WebP, AVIF, MozJPEG и OxiPNG, Squoosh CLI удобнее как единая оболочка.

avifenc лучше выбирать, когда нужен глубокий контроль AVIF. Это специализированный инструмент из libavif, который работает именно с AVIF-кодированием и декодированием. Squoosh CLI проще как стартовая точка, но avifenc сильнее в узкой профессиональной настройке AVIF.

oxipng и pngquant решают разные PNG-задачи. oxipng — lossless-оптимизатор PNG/APNG, а pngquant — lossy-компрессор PNG с уменьшением палитры. Squoosh CLI включает OxiPNG-режим и имеет --quant, поэтому закрывает базовые PNG-сценарии, но для тонкой настройки PNG-пайплайна отдельные инструменты могут быть удобнее.

Для кого подходит Squoosh CLI

Squoosh CLI хорошо подходит для фронтенд-разработчиков, которым нужно быстро подготовить изображения для сайта. Команду можно положить в npm scripts и запускать перед сборкой.

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

Он полезен SEO-специалистам и web-мастерам, которые оптимизируют вес страниц и хотят уменьшить JPEG/PNG, создать WebP или AVIF и проверить итоговый размер.

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

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

Кому лучше выбрать другой инструмент

Squoosh CLI не всегда лучший выбор.

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

Для максимального контроля WebP лучше подойдет cwebp. Это специализированный инструмент под один формат.

Для точной работы с AVIF лучше подойдет avifenc. Он дает больше прямого контроля над AVIF-кодированием.

Для универсального редактирования изображений лучше ImageMagick. Если нужны crop, compose, blur, draw, watermark, сложные трансформации и работа с десятками форматов, Squoosh CLI слишком узок.

Для PNG-only пайплайна лучше сравнить oxipng и pngquant. Они специализируются на PNG и часто удобнее для жестко заданной PNG-оптимизации.

Реальная оценка Squoosh CLI

Squoosh CLI — удачная командная версия идеи Squoosh: взять качественные web-кодеки и сделать их доступными из терминала. Программа особенно хороша для пакетной подготовки изображений: создать WebP, AVIF, оптимизированный JPEG или PNG, уменьшить размер, добавить суффикс, сохранить результат в отдельную папку и встроить команду в npm workflow.

Главное преимущество Squoosh CLI — практичность. Одной командой можно обработать несколько изображений и получить понятный отчет. Для сайта это часто именно то, что нужно: не графический редактор, не тяжелый медиа-комбайн, а быстрый способ подготовить ассеты.

Главный минус — отсутствие визуального контроля и неудобство сложных JSON-настроек. CLI показывает цифры, но не показывает качество глазами. Поэтому Squoosh CLI лучше использовать вместе с проверкой результата: сначала подобрать настройки на нескольких изображениях, затем прогнать всю папку, затем сравнить размер и визуальное качество.

В сухом остатке Squoosh CLI стоит использовать, когда нужна локальная пакетная оптимизация изображений через командную строку: WebP, AVIF, MozJPEG, OxiPNG, resize, quant и автоматизация в проекте. Для разовой ручной обработки удобнее Squoosh.app. Для больших производственных пайплайнов нужно сравнивать с Sharp, cwebp, avifenc, oxipng и pngquant. Для своей основной задачи — командного доступа к возможностям Squoosh — Squoosh CLI остается понятным и полезным инструментом.