Squoosh: онлайн-инструмент Google для сжатия

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

Скачать Squoosh

Программа особенно полезна для тех, кто готовит изображения для сайта, блога, лендинга, WordPress, карточек товаров, документации, интерфейсных скриншотов и веб-графики. В Squoosh можно загрузить JPEG, PNG или другой поддерживаемый браузером формат, выбрать кодек вроде MozJPEG, WebP, AVIF или OxiPNG, включить Resize, настроить Quality, открыть Advanced settings и скачать результат после визуальной проверки.

Squoosh работает как веб-приложение: обработка выполняется в браузере, а изображение не отправляется на сервер. Это важное отличие от многих онлайн-компрессоров: файл остаётся на устройстве, а сжатие идёт локально. Программа построена вокруг кодеков и WebAssembly, поэтому в браузере доступны не только базовые возможности, но и более продвинутые варианты сжатия.

На стартовом экране Squoosh сразу видна его логика: крупная розовая область Drop OR Paste предназначена для загрузки изображения перетаскиванием, вставкой из буфера или выбором файла. Ниже располагаются встроенные примеры изображений — они нужны для быстрого тестирования интерфейса без собственного файла. В правом верхнем углу в некоторых браузерах появляется кнопка Install, потому что Squoosh работает как PWA-приложение.

Что такое Squoosh

Squoosh — это не редактор фотографий в стиле Photoshop и не менеджер изображений вроде XnView MP. Программа решает более узкую, но очень важную задачу: уменьшает размер изображения, помогает подобрать формат и позволяет сравнить исходник с результатом до сохранения файла.

В обычной работе Squoosh используют для трёх основных действий:

• сжатие изображений без лишних настроек;

• конвертация в WebP, AVIF, MozJPEG, OxiPNG и другие доступные форматы;

• визуальная проверка качества через разделённый предпросмотр.

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

Squoosh создан командой Google Chrome Labs как демонстрация возможностей современного веба и как практический инструмент для экспериментов с кодеками изображений. В 2020 году программа получила крупное обновление Squoosh v2: появились дополнительные кодеки OxiPNG, MozJPEG, WebP и AVIF, обновлённый дизайн и CLI-направление для работы из командной строки.

Для каких задач подходит Squoosh

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

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

Одна из самых частых задач — уменьшить размер изображения перед загрузкой на сайт. Современные сайты часто страдают от тяжёлых картинок: фото с телефона может весить несколько мегабайт и иметь ширину 3000–5000 пикселей, хотя в статье оно отображается в блоке шириной 700–1200 пикселей. В Squoosh можно сначала уменьшить разрешение через Resize, затем выбрать WebP, AVIF или MozJPEG и подобрать качество через Quality.

Для сайта это даёт сразу несколько преимуществ:

• страница быстрее загружается;

• уменьшается нагрузка на хостинг и CDN;

• изображения занимают меньше места;

• улучшается восприятие страницы на мобильных устройствах;

• проще контролировать баланс между качеством и весом.

Конвертация JPEG и PNG в WebP

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

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

Конвертация в AVIF

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

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

Оптимизация PNG

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

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

Работа со скриншотами программ

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

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

Разовая обработка без установки тяжёлого редактора

Squoosh удобен в ситуациях, когда нужно быстро сжать одно изображение без запуска графического редактора. Пользователь открывает программу, загружает файл, выбирает формат, корректирует настройки и сохраняет итог. Для такой задачи Photoshop, GIMP, ImageMagick или XnConvert часто избыточны.

Интерфейс Squoosh

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

Основные зоны интерфейса:

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

Загрузка изображения

На стартовом экране Squoosh предлагает несколько вариантов загрузки:

1. Перетащить файл в область Drop OR Paste.

2. Нажать на область загрузки и выбрать файл вручную.

3. Вставить изображение из буфера обмена.

4. Открыть один из встроенных примеров внизу стартового экрана.

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

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

Сравнение оригинала и результата

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

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

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

• волосы, шерсть, трава, листья, ткань;

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

• границы кнопок и окон;

• однотонные фоны;

• градиенты;

• тени и полупрозрачные элементы;

• красные и синие области, где артефакты часто заметнее;

• контрастные края объектов;

• прозрачный фон и мягкие контуры PNG.

Если изображение уменьшилось с 2 МБ до 200 КБ, но текст стал плохо читаться, такая оптимизация неудачна. Если файл стал меньше в несколько раз, а разница видна только при сильном увеличении, настройка подобрана хорошо.

Для честной проверки стоит использовать масштаб. На 100% можно оценить реальный вид изображения, а при увеличении — найти скрытые дефекты. Но нельзя принимать решение только по увеличению 300–400%: на таком масштабе артефакты видны почти всегда, даже если обычный пользователь их не заметит.

Панель Edit

Правая панель Edit — рабочий центр Squoosh. В ней находятся основные инструменты: Resize, Reduce palette и Compress.

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

Resize

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

После включения Resize появляются настройки:

• Method — метод масштабирования;

• Preset — готовый или пользовательский размер;

• Width — ширина;

• Height — высота;

• Premultiply alpha channel — обработка альфа-канала;

• Linear RGB — пересчёт цвета в линейном RGB;

• Maintain aspect ratio — сохранение пропорций.

Для большинства задач нужно оставлять Maintain aspect ratio включённым. Это защищает изображение от растягивания. Если вручную изменить только ширину, высота пересчитается автоматически. Если отключить сохранение пропорций и ввести произвольные значения, объект может стать вытянутым или сплюснутым.

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

Reduce palette

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

Он подходит для:

• простых иллюстраций;

• иконок;

• схем;

• изображений с ограниченным числом цветов;

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

• PNG-графики без сложных градиентов.

Для фотографий Reduce palette часто вреден. Если уменьшить палитру слишком сильно, появляются грубые переходы, пятна, полосы на градиентах и неестественные оттенки кожи. На иллюстрациях и простых PNG результат может быть нормальным, но проверка через ползунок сравнения всё равно обязательна.

В настройках палитры обычно важны два параметра:

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

Compress

Compress — основной блок Squoosh. Именно здесь выбирается формат результата и качество сжатия. В выпадающем списке можно выбрать кодек, а ниже настроить параметры. Для разных кодеков набор параметров отличается.

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

Для фотографии с большим количеством деталей можно начать с диапазона 70–85. Для изображения внутри статьи иногда достаточно 60–75. Для скриншота интерфейса с текстом лучше проверять читаемость и не снижать качество слишком агрессивно. Для фонового баннера, который не рассматривают вблизи, можно позволить более сильное сжатие.

Форматы и кодеки

Squoosh ценен тем, что позволяет экспериментировать с разными кодеками в одном интерфейсе. В программе используются как форматы, поддерживаемые браузером, так и дополнительные кодеки через WebAssembly. В Squoosh v2 были добавлены OxiPNG, MozJPEG, WebP и AVIF, что сделало программу удобной площадкой для сравнения современных форматов.

Выбор формата должен зависеть от типа изображения. Фотография, скриншот интерфейса, логотип и иконка требуют разных подходов. Ошибка многих пользователей — выбирать один формат для всего. В реальной работе лучше сравнить 2–3 варианта и оставить тот, который даёт лучший визуальный результат при приемлемом размере.

Сжатие JPEG через MozJPEG

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

Типичный сценарий:

1. Загружается фотография.

2. В блоке Compress выбирается MozJPEG.

3. Ползунок Quality устанавливается в рабочий диапазон.

4. Изображение проверяется через вертикальный разделитель.

5. При необходимости открываются Advanced settings.

6. Итоговый файл сохраняется.

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

MozJPEG хорошо подходит для:

• обложек статей;

• фотографий товаров;

• изображений для блогов;

• иллюстраций без прозрачности;

• старых CMS, где JPEG работает предсказуемее WebP или AVIF;

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

Но если сайт уже поддерживает WebP или AVIF, стоит сравнить MozJPEG с этими вариантами. Иногда WebP даст меньший вес при похожем качестве, а AVIF уменьшит файл ещё сильнее.

Конвертация в WebP

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

Для конвертации в WebP в Squoosh достаточно выбрать WebP в Compress, настроить Quality и проверить результат. Если изображение содержит прозрачность, нужно обязательно посмотреть края объекта на разных фонах. Иногда после сжатия полупрозрачные пиксели становятся грязными, особенно если исходник уже был неидеальным.

WebP хорошо подходит для:

• изображений внутри статей;

• карточек товаров;

• превью;

• баннеров;

• иллюстраций;

• скриншотов без очень мелкого текста;

• прозрачной графики, если результат проверен.

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

Конвертация в AVIF

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

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

AVIF стоит использовать, когда:

• нужно сильно уменьшить вес изображения;

• сайт ориентирован на современные браузеры;

• изображение не должно редактироваться после сохранения;

• есть возможность проверить внешний вид в реальном шаблоне;

• важна скорость загрузки страницы;

• фото занимает много места в макете.

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

Оптимизация PNG через OxiPNG

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

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

Для PNG особенно важны:

• прозрачность;

• чистые края;

• отсутствие цветных ореолов;

• сохранение мелких надписей;

• отсутствие шумных пятен на однотонных фонах.

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

Работа с прозрачностью

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

При проверке прозрачности нужно смотреть:

• края объекта;

• полупрозрачные тени;

• мягкие переходы;

• белые или тёмные ореолы;

• участки с волосами, мехом, дымом, стеклом;

• тонкие линии и маленькие элементы.

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

Как сжать изображение в Squoosh

Ниже — практический сценарий обычного сжатия изображения для сайта.

Шаг 1. Загрузить файл

На стартовом экране нужно перетащить изображение в область Drop OR Paste или выбрать его вручную. Если изображение находится в буфере обмена, его можно вставить. После загрузки откроется редактор.

Шаг 2. Проверить исходный размер

В нижней левой части интерфейса отображается исходное изображение и его вес. Это точка отсчёта. Если файл весит 4–8 МБ, а нужен для статьи, почти всегда стоит уменьшить разрешение и применить сжатие.

Шаг 3. Включить Resize при необходимости

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

Рекомендуемая логика:

• для полноширинного баннера — ориентироваться на ширину контейнера сайта;

• для изображения внутри статьи — использовать фактическую ширину контентной колонки;

• для миниатюры — не оставлять размер большого фото;

• для скриншота программы — не уменьшать слишком сильно, чтобы текст оставался читаемым.

Шаг 4. Выбрать формат

В блоке Compress нужно открыть выпадающий список и выбрать формат. Для фотографии можно начать с WebP или MozJPEG. Для максимальной экономии веса — проверить AVIF. Для PNG с прозрачностью — начать с OxiPNG или WebP с сохранением альфа-канала.

Шаг 5. Настроить Quality

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

Практический подход:

Шаг 6. Проверить результат ползунком

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

Шаг 7. Сохранить результат

После настройки в правом нижнем углу отображается итоговый вес и процент уменьшения. Там же находится синяя кнопка сохранения. Её используют только после проверки качества.

Как уменьшить изображение для сайта

Для сайта важно не только сжатие, но и правильное разрешение. Ошибка — загружать на страницу фотографию 5000 пикселей по ширине, а затем уменьшать её только средствами CSS. Браузер всё равно скачает тяжёлый файл, пользователь потратит трафик, а страница загрузится медленнее.

В Squoosh правильный порядок такой:

1. Оценить, где будет использоваться изображение.

2. Определить нужную ширину.

3. Включить Resize.

4. Указать ширину в Width.

5. Оставить Maintain aspect ratio включённым.

6. Выбрать формат в Compress.

7. Настроить Quality.

8. Проверить изображение на 100%.

9. Сохранить итог.

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

Как подготовить изображения для WordPress

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

Для WordPress стоит разделять типы изображений:

Для обзоров программ особенно важно не испортить скриншоты. Если в статье описываются кнопки Resize, Compress, Quality, Advanced settings, читатель должен видеть эти элементы на изображении. Слишком сильное сжатие делает обзор хуже: текст становится нечитаемым, а инструкция теряет практическую ценность.

Как использовать Squoosh для скриншотов программ

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

При обработке скриншотов в Squoosh нужно соблюдать несколько правил:

• не уменьшать скриншот ниже размера, при котором читаются подписи;

• проверять текст на кнопках и в меню;

• смотреть на серые панели — на них часто появляются пятна;

• не выбирать слишком низкое Quality;

• сравнивать WebP, PNG/OxiPNG и MozJPEG;

• не применять Reduce palette без проверки;

• использовать масштаб для проверки мелких элементов.

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

Squoosh CLI

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

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

Разница между веб-интерфейсом и CLI:

Для автора статей, контент-менеджера, SEO-специалиста или владельца сайта веб-версия удобнее. Для разработчика, который собирает проект и хочет получать WebP/AVIF автоматически, CLI-подход логичнее.

Конфиденциальность и локальная обработка

Одна из сильных сторон Squoosh — локальная обработка изображений. Файл не уходит на сервер для сжатия, а обрабатывается на устройстве пользователя. Для изображений с личными данными, внутренними скриншотами, макетами, документами или неопубликованными товарами это важнее, чем кажется.

Многие онлайн-компрессоры работают иначе: пользователь загружает файл на сервер, сервис обрабатывает его и отдаёт результат. Это удобно, но не всегда приемлемо. Squoosh снижает этот риск, потому что сжатие выполняется в браузере. При этом проект использует Google Analytics для базовой статистики и некоторых технических данных, включая значения размера изображения до и после обработки и сведения, связанные с PWA-установкой.

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

Установка и работа офлайн

Squoosh работает как PWA. Это значит, что программа ведёт себя не как классическая настольная программа, а как веб-приложение, которое может использовать возможности браузера. В интерфейсе может быть доступна кнопка Install, после чего Squoosh открывается как отдельное приложение. При этом базовая логика остаётся прежней: это тот же инструмент с экраном загрузки, сравнением, Resize, Reduce palette и Compress.

Важный плюс PWA-модели — удобство. Не нужно ставить тяжёлый графический редактор, искать отдельный конвертер AVIF или настраивать командную строку. Пользователь получает доступ к современным кодекам через один интерфейс.

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

Производительность

Скорость работы Squoosh зависит от нескольких факторов:

• размера исходного изображения;

• разрешения в пикселях;

• выбранного кодека;

• настроек качества;

• параметров Advanced settings;

• мощности процессора;

• объёма оперативной памяти;

• браузера;

• количества одновременно открытых тяжёлых вкладок.

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

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

Advanced settings

В блоке Compress есть раскрываемый раздел Advanced settings. Его набор зависит от выбранного кодека. Именно поэтому интерфейс Squoosh меняется при переключении форматов: WebP, AVIF, MozJPEG и OxiPNG имеют разные параметры.

Расширенные настройки нужны для тонкой оптимизации. Обычному пользователю часто достаточно Quality, Resize и выбора формата. Но для сложных случаев Advanced settings помогают получить лучший результат.

Типичные задачи для расширенных настроек:

• усилить или ослабить степень сжатия;

• изменить усилие кодирования;

• проверить lossless-вариант;

• настроить параметры цветности;

• управлять дополнительными особенностями кодека;

• найти меньший файл без заметной потери качества.

Главное правило: не менять всё подряд. Если пользователь не понимает параметр, лучше изменить одно значение, дождаться пересчёта и сравнить результат. Squoosh удобен именно тем, что каждое изменение можно проверить глазами.

История версий программы

Squoosh появился как экспериментальное веб-приложение для сжатия изображений и демонстрации возможностей современного браузера. Программа была представлена в период, когда веб-разработчики всё активнее переходили к WebP, оптимизации Core Web Vitals, ускорению загрузки страниц и более строгому контролю веса графики.

Первый этап: браузерный оптимизатор изображений

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

Squoosh v2

Squoosh v2 стал крупным развитием программы. В этом обновлении появились новые кодеки, включая OxiPNG, MozJPEG, WebP и AVIF. Обновление сделало Squoosh более полезным для практической веб-оптимизации, потому что пользователь получил доступ к современным форматам в одном интерфейсе. Вместе с этим был обновлён дизайн: стартовый экран стал визуально ярче, а рабочая часть — более понятной и компактной.

Появление CLI-направления

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

libSquoosh

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

Что изменила программа в подходе к оптимизации

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

Ограничения Squoosh

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

Нет полноценной пакетной обработки в основном интерфейсе

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

Если нужно обработать много файлов, лучше смотреть в сторону XnConvert, ImageMagick, Caesium Image Compressor, Sharp, автоматизации на сервере или CLI-инструментов.

Нет ретуши

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

Нет полноценного файлового менеджера

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

Зависимость от ресурсов устройства

Так как обработка идёт локально, производительность зависит от устройства. На слабом ноутбуке большой AVIF может кодироваться медленно. На мощном компьютере та же операция пройдёт быстрее.

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

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

Плюсы Squoosh

Squoosh популярен не потому, что обещает чудеса, а потому, что решает конкретную задачу удобно и прозрачно.

Наглядное сравнение до и после

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

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

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

Современные форматы

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

Resize и сжатие в одном интерфейсе

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

Понятный интерфейс

Несмотря на продвинутые кодеки, интерфейс остаётся простым. Пользователь видит Resize, Reduce palette, Compress, Quality и Advanced settings. Базовый сценарий понятен без инструкции.

Хорош для обучения оптимизации

Squoosh помогает понять, как реально работают форматы. Пользователь может выбрать WebP, AVIF, MozJPEG, менять Quality и видеть, как меняется вес. Это полезнее, чем слепо доверять автоматическому компрессору.

Минусы Squoosh

Минусы программы напрямую связаны с её концепцией. Squoosh хорош для ручного контроля, но не для всех процессов.

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

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

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

TinyPNG

TinyPNG удобен, когда нужно быстро уменьшить PNG, JPEG или WebP без ручного подбора параметров. Пользователь загружает изображения и получает сжатые файлы. Это проще, но контроль ограничен. Если нужно точно сравнить AVIF, WebP и MozJPEG, изменить Resize, проверить прозрачность и оценить артефакты на конкретном участке, Squoosh удобнее.

ImageOptim

ImageOptim силён на macOS как локальный оптимизатор. Он хорош для перетаскивания группы файлов и быстрой очистки веса. Но ImageOptim не построен вокруг экспериментов с кодеками и визуального сравнения до/после в том виде, как это делает Squoosh. Для пакетной локальной оптимизации ImageOptim практичнее, для ручного подбора качества Squoosh понятнее.

Caesium Image Compressor

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

XnConvert

XnConvert — мощный пакетный конвертер. Он умеет массово менять размер, формат, имена, применять операции обработки и сохранять результат по шаблону. Для конвейерных задач XnConvert сильнее. Но для точного визуального выбора между WebP, AVIF, MozJPEG и OxiPNG Squoosh проще и нагляднее.

ImageMagick

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

RIOT

RIOT похож по идее ручной оптимизации изображений, но ориентирован на классические сценарии и настольную работу. Squoosh выглядит современнее в задачах WebP, AVIF, PWA и браузерной обработки.

Optimizilla

Optimizilla удобен как простой онлайн-компрессор. Он позволяет быстро уменьшать изображения и работать с несколькими файлами. Но Squoosh даёт больше контроля: можно менять формат, Resize, палитру, качество, расширенные настройки и сравнивать результат в более гибком интерфейсе.

Практические рекомендации по настройкам

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

Фотографии для сайта

Для фотографий лучше начинать с WebP или MozJPEG. Если сайт ориентирован на современные браузеры, можно проверить AVIF. Сначала стоит уменьшить ширину через Resize, затем подобрать Quality. Обычно заметное уменьшение веса достигается без сильной видимой потери качества.

Проверять нужно:

• лицо;

• мелкие детали;

• фон;

• волосы;

• тени;

• небо;

• границы объектов.

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

Для скриншотов важнее читаемость, чем максимальная экономия. Если после сжатия текст на кнопках стал хуже, настройка неправильная. Стоит сравнить PNG/OxiPNG и WebP, а MozJPEG использовать осторожно.

Проверять нужно:

• названия кнопок;

• пункты меню;

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

• поля ввода;

• серые панели;

• тонкие линии.

Логотипы и иконки

Для логотипов важны чистые края и прозрачность. Начинать лучше с OxiPNG или WebP lossless. Reduce palette можно пробовать, если логотип простой, но нельзя портить фирменные цвета.

Баннеры

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

Изображения товаров

Для товаров нельзя чрезмерно снижать качество. Покупатель должен видеть фактуру, форму, материал, края, упаковку, маркировку и мелкие детали. Если товар на прозрачном фоне, нужно проверить альфа-канал и отсутствие ореолов.

Иллюстрации

Для иллюстраций можно проверять WebP, AVIF и Reduce palette. Если цветов мало, палитра может уменьшить файл. Если есть градиенты, Reduce palette может испортить плавность.

Частые ошибки пользователей

Сжимать без просмотра результата

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

Выбирать AVIF автоматически

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

Не уменьшать разрешение

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

Портить скриншоты программ

Скриншот с нечитаемыми кнопками бесполезен. Для обзоров ПО качество интерфейса важнее, чем минимальный вес.

Неправильно работать с прозрачностью

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

Использовать PNG для всего

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

Слишком сильно снижать Quality

Низкое Quality быстро уменьшает файл, но может создать артефакты. Лучше найти точку, где файл уже достаточно лёгкий, а ухудшение ещё почти незаметно.

Кому стоит использовать Squoosh

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

Программа полезна для:

• владельцев сайтов;

• авторов блогов;

• SEO-специалистов;

• контент-менеджеров;

• веб-разработчиков;

• дизайнеров;

• редакторов инструкций;

• авторов обзоров программ;

• специалистов по WordPress;

• владельцев интернет-магазинов;

• людей, которые готовят изображения для лендингов.

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

Кому Squoosh не подойдёт

Squoosh не стоит выбирать как основной инструмент, если нужна:

• массовая обработка тысяч файлов;

• сложная ретушь;

• работа со слоями;

• пакетное переименование;

• каталогизация изображений;

• RAW-обработка;

• автоматическое нанесение водяных знаков;

• серверная обработка без участия пользователя;

• сложная цветокоррекция;

• полноценная подготовка печатной графики.

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

Итоговая оценка

Squoosh — один из самых удобных инструментов для ручной оптимизации изображений. Он не перегружен лишними функциями, но даёт достаточно контроля: Resize, Reduce palette, Compress, Quality, Advanced settings, выбор кодеков, сравнение до и после, отображение итогового размера и локальная обработка.

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

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

FAQ

Squoosh бесплатный?

Да. Squoosh — бесплатное браузерное приложение для оптимизации изображений.

Нужно ли устанавливать программу?

Для обычной работы установка не обязательна. Squoosh работает как веб-приложение в браузере. В некоторых браузерах его можно установить как PWA через кнопку Install.

Отправляет ли Squoosh изображения на сервер?

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

Можно ли сжимать PNG?

Да. Для PNG в Squoosh полезен OxiPNG. Ещё можно проверить WebP, если прозрачность и качество сохраняются нормально.

Можно ли делать WebP?

Да. Squoosh позволяет конвертировать изображения в WebP и настраивать качество результата.

Можно ли делать AVIF?

Да. AVIF доступен в Squoosh и подходит для сильного уменьшения веса изображений, особенно фотографий. Результат нужно проверять через сравнение.

Подходит ли Squoosh для WordPress?

Да. Squoosh хорошо подходит для подготовки изображений перед загрузкой в WordPress: обложек, скриншотов, иллюстраций, PNG с прозрачностью и фото внутри статей.

Есть ли пакетная обработка?

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

Что лучше выбрать для сайта: WebP или AVIF?

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

Почему после сжатия картинка стала хуже?

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

Какой формат выбрать для скриншотов программ?

Для скриншотов с мелким текстом стоит сравнить PNG/OxiPNG и WebP. Главное — сохранить читаемость интерфейса. JPEG и слишком низкое качество могут испортить надписи и тонкие линии.