Squoosh — это веб-приложение для сжатия изображений, конвертации форматов и визуального сравнения результата до скачивания файла. Программа ориентирована не на автоматическое сжатие одной кнопкой, а на точную ручную настройку: пользователь видит исходное изображение, выбирает кодек, меняет качество, включает изменение размера, сравнивает результат ползунком и только после этого сохраняет итоговый файл. Squoosh работает прямо в браузере и обрабатывает изображение локально на устройстве, поэтому файл не отправляется на сервер для компрессии.
Главная ценность Squoosh — контроль. В обычных онлайн-компрессорах пользователь часто видит только процент экономии и кнопку загрузки результата. В Squoosh можно понять, за счёт чего уменьшился размер: изменился формат, снизилось качество, уменьшилось разрешение, сократилась палитра или применился другой алгоритм сжатия. Поэтому Squoosh удобно использовать для подготовки изображений к публикации на сайте, оптимизации карточек товаров, уменьшения веса иллюстраций, тестирования WebP и AVIF, а также для подбора компромисса между качеством и размером файла.
Squoosh не пытается быть полноценным графическим редактором. В нём нет слоёв, кистей, ретуши, цветокоррекции в привычном смысле и пакетной обработки через визуальный интерфейс. Это веб-инструмент для оптимизации изображений: загрузить файл, выбрать способ сжатия, сравнить, скачать результат. Такой узкий фокус делает программу удобной для веб-разработчиков, SEO-специалистов, дизайнеров, контент-менеджеров и владельцев сайтов, которым нужно быстро уменьшить вес картинки без установки тяжёлого редактора.
Squoosh
- Ретушь фото
- Русский интерфейс
- Просто для новичков
- Не для ретуши фото
- Работает в браузере
- Упор на сжатие
Что такое Squoosh
Squoosh разработан в экосистеме GoogleChromeLabs и представляет собой приложение для уменьшения размера изображений через разные форматы. В интерфейсе доступны кодеки и режимы сжатия, которые позволяют работать с JPEG, PNG, WebP, AVIF и другими вариантами вывода. Программа делает акцент на том, чтобы пользователь не просто получил меньший файл, а видел, как именно изменилось изображение после компрессии.
В Squoosh важны три вещи:
-
Сжатие изображения — уменьшение веса файла за счёт выбранного кодека и параметров качества.
-
Конвертация изображения — перевод исходника в другой формат, например из PNG в WebP или из JPEG в AVIF.
-
Сравнение результата — просмотр оригинала и обработанной версии на одном экране с центральным разделителем.
Эта комбинация делает Squoosh особенно полезным для веб-графики. Когда изображение готовится для сайта, важен не только итоговый размер файла, но и визуальная пригодность: чтобы текст на скриншоте оставался читаемым, края логотипа не расплывались, кожа на фотографии не превращалась в пятна, а градиенты не покрывались грубыми переходами. В Squoosh такие проблемы видны сразу, потому что интерфейс построен вокруг сравнения до и после.
Программа подходит для единичной обработки изображений, где важен результат. Для массовой автоматической компрессии сотен файлов Squoosh менее удобен, потому что веб-интерфейс рассчитан на ручную работу с конкретным изображением. Но именно в этом сценарии — когда нужно внимательно настроить один файл — Squoosh раскрывается лучше всего.
Для каких задач подходит Squoosh
Squoosh используют там, где нужно уменьшить размер изображения и сохранить приемлемое качество. Это не универсальное решение для всех операций с графикой, а точный инструмент для оптимизации.
Подготовка изображений для сайта
Для сайта важен вес изображений. Большие фотографии, PNG-скриншоты и тяжёлые баннеры увеличивают время загрузки страницы. Squoosh позволяет открыть изображение, уменьшить разрешение через Resize, выбрать WebP, AVIF, MozJPEG или OxiPNG, отрегулировать Quality и посмотреть, насколько уменьшился файл. Это удобно для лендингов, блогов, интернет-магазинов, документации, портфолио и промостраниц.
Конвертация JPG и PNG в WebP
WebP часто используют как более лёгкий формат для веба. В Squoosh можно загрузить исходный JPEG или PNG, выбрать в блоке Compress формат WebP, настроить качество и сразу увидеть итоговый размер. Если результат выглядит нормально, файл можно сохранить и использовать на сайте.
Конвертация изображений в AVIF
AVIF полезен, когда нужно сильно уменьшить размер изображения при сохранении визуального качества. В Squoosh AVIF выбирается в блоке Compress, после чего доступны параметры вроде Quality, Lossless и Effort. Этот режим особенно интересен для фотографий и иллюстраций, но требует внимательной проверки результата, потому что при низком качестве изображение может стать слишком мягким или потерять мелкие детали.
Оптимизация PNG
PNG часто используют для скриншотов, интерфейсов, логотипов, иконок и изображений с прозрачностью. В Squoosh для PNG полезны OxiPNG и Reduce palette. OxiPNG помогает уменьшить размер без типичного JPEG-размытия, а Reduce palette может сократить количество цветов, что особенно полезно для простой графики, схем и плоских иллюстраций.
Уменьшение разрешения
Слишком большое изображение часто не нужно публиковать в исходном размере. Например, фотография шириной 5000 пикселей может отображаться на сайте в блоке шириной 1200 пикселей. В таком случае разумнее уменьшить размеры прямо в Squoosh через Resize: задать ширину, сохранить пропорции и затем применить компрессию. Это даёт более предсказуемый результат, чем просто снижать качество большого файла.
Сравнение разных кодеков
Squoosh удобен для тестирования: можно сравнивать, как один и тот же файл выглядит после MozJPEG, WebP, AVIF или OxiPNG. Пользователь видит не только итоговый вес, но и визуальные отличия. Это особенно полезно, когда нужно выбрать формат для проекта, а не просто сжать одну картинку.
Как устроен интерфейс Squoosh
Стартовый экран Squoosh построен вокруг большой зоны загрузки Drop OR Paste. Изображение можно перетащить в окно браузера или вставить из буфера обмена. Ниже находятся демонстрационные изображения Large photo, Artwork, Device screen и SVG icon, которые позволяют открыть редактор без собственного файла и посмотреть, как работает компрессия на разных типах графики. На главном экране также показаны смысловые блоки Small, Simple и Secure: Squoosh уменьшает размер изображений, даёт простой сценарий открытия и сохранения, а обработка выполняется локально на устройстве.

На стартовом экране нет перегруженных меню. Основной сценарий очевиден: добавить изображение и перейти к настройкам. Большой розовый блок Drop OR Paste работает как визуальный центр интерфейса. Под ним расположены тестовые файлы с указанием размера: это помогает быстро понять, что Squoosh работает не только с фотографиями, но и с иллюстрациями, скриншотами устройств и SVG-графикой.
После загрузки изображения открывается редактор. Его основная часть — область предпросмотра. В центре находится вертикальный разделитель: одна сторона показывает оригинал или один вариант обработки, другая — сжатую версию или другой набор параметров. На панели справа располагаются блоки Edit и Compress. Внизу отображаются размер результата, процент уменьшения и кнопка сохранения.
Интерфейс Squoosh лучше всего описывать как лабораторию сжатия: программа не скрывает параметры, а показывает их прямо рядом с изображением. Пользователь двигает ползунок качества, меняет формат, включает resize и тут же видит, как это влияет на файл.
Загрузка изображения в Squoosh
Загрузка изображения в Squoosh выполняется несколькими способами.
Перетаскивание файла
Самый простой способ — перетащить файл на область Drop OR Paste. После этого Squoosh открывает редактор и загружает изображение в рабочую область. Такой сценарий удобен, когда файл уже лежит на рабочем столе или в папке проекта.
Вставка из буфера обмена
Слово Paste в зоне загрузки указывает на возможность вставить изображение из буфера. Это удобно после создания скриншота: можно скопировать картинку и сразу отправить её в Squoosh без промежуточного сохранения в файл.
Выбор демонстрационного изображения
На стартовом экране есть готовые примеры:
| Пример | Для чего полезен |
|---|---|
| Large photo | Проверка сжатия фотографий |
| Artwork | Проверка иллюстраций и цветных изображений |
| Device screen | Проверка скриншотов интерфейсов |
| SVG icon | Проверка простой графики и иконок |
Демонстрационные изображения полезны для знакомства с интерфейсом. Можно открыть пример, переключить кодеки, подвигать Quality, включить Resize и увидеть, как меняется итоговый вес.
Что происходит после загрузки
После открытия файла Squoosh показывает изображение в редакторе. Левая часть обычно показывает исходник или выбранный вариант сравнения, правая — обработанную версию. В нижних углах находятся панели с информацией о размере и настройками компрессии. Пользователь сразу видит, насколько изменился вес файла, и может скачать результат через кнопку с иконкой загрузки.
Редактор Squoosh: сравнение оригинала и результата
Редактор — главная часть Squoosh. Именно здесь программа отличается от простых онлайн-сервисов сжатия. В центре экрана находится изображение, разделённое вертикальным ползунком. Этот ползунок можно двигать, сравнивая исходную и сжатую версию на одних и тех же участках.

В редакторе есть несколько ключевых зон:
| Зона интерфейса | Что делает |
|---|---|
| Центральная область | Показывает изображение и сравнение до/после |
| Вертикальный разделитель | Позволяет сравнивать одну и ту же область изображения |
| Нижняя панель масштаба | Управляет приближением и просмотром деталей |
| Блок Edit | Содержит Resize и Reduce palette |
| Блок Compress | Содержит выбор кодека и настройки сжатия |
| Нижний индикатор размера | Показывает итоговый вес и процент изменения |
| Кнопка скачивания | Сохраняет обработанный файл |
Ползунок сравнения особенно важен при сильном сжатии. На маленьком масштабе изображение может выглядеть нормально, но при приближении становятся заметны артефакты: блочные участки, шум вокруг контуров, потеря фактуры, размытый текст, ступенчатые градиенты. Squoosh позволяет не гадать, а проверять результат визуально.
В центре нижней панели есть управление масштабом. Его используют, когда нужно оценить мелкие детали: текст на скриншоте, волосы на портрете, траву на фотографии, тонкие линии в интерфейсе, прозрачные края у логотипа. Для веб-изображений это важно: картинка может быть лёгкой, но если она стала визуально грязной, экономия веса не оправдывает результат.
Панель Edit: Resize и Reduce palette
Панель Edit отвечает за изменения изображения перед финальным сжатием. В ней находятся два важных инструмента: Resize и Reduce palette.
Resize
Resize изменяет ширину и высоту изображения. Это один из самых эффективных способов уменьшить вес файла. Если исходная фотография слишком большая, снижение разрешения часто даёт больший выигрыш, чем агрессивное снижение качества.
В блоке Resize встречаются такие элементы:
| Элемент | Назначение |
|---|---|
| Method | Метод изменения размера |
| Preset | Быстрый выбор масштаба |
| Width | Новая ширина изображения |
| Height | Новая высота изображения |
| Premultiply alpha channel | Корректная обработка прозрачности при изменении размера |
| Linear RGB | Расчёт изменения размера в линейном RGB |
| Maintain aspect ratio | Сохранение пропорций изображения |
На практике чаще всего используются Width, Height и Maintain aspect ratio. Если нужно подготовить изображение для сайта, обычно задают ширину под конкретный блок: например, 1200 пикселей для крупной иллюстрации, 800 пикселей для изображения в статье, 400–600 пикселей для карточки товара. При включённом Maintain aspect ratio высота пересчитывается пропорционально, поэтому изображение не растягивается и не сплющивается.
Method влияет на качество пересчёта пикселей. В интерфейсе Squoosh можно встретить метод Lanczos3, который хорошо подходит для уменьшения изображений с сохранением резкости. Для обычной подготовки веб-картинок пользователю чаще всего достаточно оставить предложенный метод и контролировать только размеры.
Resize стоит использовать до финального выбора качества. Если сначала сильно сжать изображение, а потом уменьшать его, можно получить менее чистый результат. Логика работы проще: сначала привести изображение к нужному размеру, затем выбрать формат и качество.
Reduce palette
Reduce palette уменьшает количество цветов в изображении. Этот инструмент полезен не всегда, но в правильных задачах даёт хороший эффект.
Reduce palette особенно подходит для:
-
PNG-скриншотов интерфейсов;
-
простых иллюстраций;
-
иконок;
-
схем;
-
графиков;
-
изображений с ограниченным набором цветов;
-
плоской веб-графики.
Если изображение состоит из небольшого количества цветов, нет смысла хранить тысячи цветовых оттенков. Уменьшение палитры сокращает размер файла. При этом для логотипов, схем и некоторых скриншотов качество может остаться приемлемым.
Но для фотографий Reduce palette часто вреден. Фото содержит множество плавных переходов, полутонов, теней и текстур. Сокращение палитры может дать пятна, грубые переходы и эффект постеризации. Поэтому для фотографий лучше работать через MozJPEG, WebP или AVIF, а Reduce palette использовать осторожно.
В настройках Reduce palette важны:
| Параметр | Что меняет |
|---|---|
| Colors | Количество цветов в итоговом изображении |
| Dithering | Способ имитации промежуточных оттенков за счёт распределения точек |
Dithering помогает визуально смягчить переходы при малом числе цветов, но может добавить зернистость. На скриншотах интерфейсов это иногда выглядит нормально, а на фотографиях часто портит изображение.
Панель Compress и выбор кодека
Панель Compress — центральное место для настройки сжатия. Здесь выбирается формат вывода и параметры кодека. В выпадающем списке можно выбрать вариант сжатия, например MozJPEG, OxiPNG, WebP, AVIF. Набор доступных параметров меняется в зависимости от выбранного кодека: у JPEG одни настройки, у PNG другие, у AVIF третьи.

Основные элементы блока Compress:
| Элемент | Значение |
|---|---|
| Выпадающий список формата | Выбор кодека или формата вывода |
| Quality | Уровень качества и степень сжатия |
| Lossless | Без потерь, если режим доступен для выбранного кодека |
| Advanced settings | Дополнительные параметры кодека |
| Effort | Усилие кодирования, влияющее на скорость и результат |
| Индикатор размера | Итоговый вес после обработки |
| Процент изменения | Насколько файл стал меньше или больше |
| Кнопка сохранения | Скачивание результата |
MozJPEG
MozJPEG подходит для фотографий и JPEG-изображений. Это хороший выбор, когда нужно получить совместимый файл с расширением JPG/JPEG и уменьшить размер без перехода в более новый формат. Его используют для фото, иллюстраций с большим количеством оттенков, баннеров и изображений, которые должны открываться практически везде.
Главный параметр — Quality. Чем ниже значение, тем меньше файл, но тем выше риск артефактов. На фотографиях чаще всего нужно смотреть на кожу, небо, траву, текстуры ткани, границы объектов и тёмные области. Если качество снизить слишком сильно, появляются квадраты, мыло, шумовые пятна и грязные контуры.
OxiPNG
OxiPNG подходит для оптимизации PNG. Это хороший выбор для изображений с прозрачностью, скриншотов, логотипов, иконок и интерфейсной графики. В отличие от JPEG-сжатия, PNG чаще используют там, где важны чёткие края и прозрачность.
OxiPNG не превращает изображение в мыльный JPEG. Его задача — уменьшить размер PNG в рамках особенностей формата. Для дополнительной экономии можно использовать Reduce palette, если изображение допускает сокращение количества цветов.
WebP
WebP — универсальный вариант для веба. Его можно использовать вместо JPEG для фотографий и вместо PNG для некоторых видов графики. В Squoosh WebP удобен тем, что пользователь сразу видит результат и может подобрать Quality. Если нужно уменьшить вес картинки для сайта, WebP часто даёт хороший баланс между размером, качеством и совместимостью.
WebP особенно полезен для:
-
изображений в статьях;
-
карточек товаров;
-
обложек;
-
превью;
-
баннеров;
-
фотографий среднего размера;
-
иллюстраций без критически сложной прозрачности.
AVIF
AVIF часто даёт сильное сжатие при хорошем визуальном качестве. В Squoosh AVIF выбирается в блоке Compress, после чего можно управлять Quality, включать Lossless и менять Effort. На скриншоте интерфейса видно, что для AVIF доступны Quality и Effort, а результат отображается сразу в виде итогового размера и процента уменьшения.
AVIF хорошо подходит для современных веб-проектов, где важен минимальный размер изображений. Но его нужно проверять внимательнее, чем обычный JPEG. При слишком низком качестве мелкие детали могут сглаживаться, а изображение становится визуально пластиковым. Для фотографий это иногда приемлемо, для скриншотов с текстом — чаще нет.
JPEG XL
JPEG XL может встречаться в Squoosh как вариант для экспериментов с современным форматом. Его имеет смысл рассматривать при тестировании новых веб-форматов и сравнении кодеков, но для обычной публикации на сайте чаще выбирают WebP, AVIF, JPEG или PNG, потому что они привычнее в рабочих процессах и CMS.
Настройки качества: как подобрать баланс между размером и внешним видом
Ползунок Quality — главный инструмент тонкой настройки. Он не означает хорошо или плохо сам по себе. Одно и то же значение качества может отлично подойти для одной картинки и испортить другую. Squoosh хорош тем, что не заставляет угадывать: результат виден сразу.
Что происходит при снижении качества
Когда пользователь снижает Quality, файл обычно становится меньше. Но вместе с этим могут появиться визуальные потери:
-
размываются мелкие детали;
-
появляются блоки на ровных участках;
-
контуры становятся грязными;
-
текст теряет чёткость;
-
градиенты распадаются на полосы;
-
кожа на фото становится пятнистой;
-
тени теряют плавность;
-
мелкие фактуры исчезают.
Squoosh позволяет проверять это прямо в редакторе. Нужно приблизить изображение, передвинуть вертикальный разделитель и сравнить проблемные зоны.
На что смотреть при проверке фотографий
Для фотографий важны:
| Область | Что проверять |
|---|---|
| Лица | Нет ли пятен, грубых переходов, потери фактуры кожи |
| Волосы | Не слиплись ли мелкие пряди |
| Небо | Нет ли полос и блоков |
| Трава и листья | Не превратились ли детали в кашу |
| Тёмные области | Нет ли грязного шума и квадратов |
| Контуры объектов | Не появились ли ореолы |
Фотографии часто хорошо переносят умеренное сжатие, потому что зритель не знает, как выглядел оригинал. Но агрессивная компрессия быстро становится заметной на лицах, природных текстурах и плавных градиентах.
На что смотреть при проверке скриншотов
Скриншоты менее терпимы к потерям. В них важны текст, линии и контрастные границы.
Проверять нужно:
-
мелкий шрифт;
-
иконки;
-
тонкие линии;
-
границы кнопок;
-
контуры окон;
-
однотонные фоны;
-
цветные пиктограммы;
-
тени интерфейса.
Для скриншотов часто лучше сохранять PNG или WebP с осторожными настройками. Если использовать слишком сильное JPEG-сжатие, текст становится грязным, а интерфейс выглядит неаккуратно.
На что смотреть при проверке логотипов
Логотипы требуют чистых краёв и правильной прозрачности. В Squoosh для логотипов нужно проверять:
-
края букв;
-
альфа-канал;
-
тонкие линии;
-
цветовые заливки;
-
отсутствие шумов вокруг контура;
-
сохранение фирменных цветов.
Для логотипов часто подходит PNG или WebP. JPEG для логотипов обычно плохой вариант, особенно если есть прозрачность или резкие контуры.
Сжатие JPEG через MozJPEG
MozJPEG в Squoosh — один из самых понятных вариантов для пользователей, которые работают с фотографиями. JPEG остаётся распространённым форматом, и часто задача состоит не в переходе на новый формат, а в том, чтобы уменьшить уже готовую фотографию без проблем совместимости.
Когда выбирать MozJPEG
MozJPEG стоит выбирать, когда:
-
исходник уже является JPEG;
-
нужен итоговый файл JPEG;
-
изображение является фотографией;
-
важна совместимость с любыми сайтами и программами;
-
нельзя использовать WebP или AVIF из-за ограничений CMS;
-
нужно быстро уменьшить вес без изменения формата на более современный.
Как работать с MozJPEG в Squoosh
Рабочий процесс выглядит так:
-
Загрузить изображение через Drop OR Paste.
-
В блоке Compress выбрать MozJPEG.
-
Настроить Quality.
-
При необходимости открыть Advanced settings.
-
Сравнить результат центральным ползунком.
-
Проверить итоговый размер.
-
Сохранить файл кнопкой загрузки.
При работе с MozJPEG не стоит ориентироваться только на процент уменьшения. Если Squoosh показывает сильное сокращение размера, это ещё не означает, что картинка подходит для публикации. Нужно проверить ключевые области изображения. Для фотографии товара — сам товар, фактуру, надписи на упаковке. Для портрета — лицо и волосы. Для пейзажа — небо, деревья, воду и тени.
Типичные ошибки при сжатии JPEG
| Ошибка | Что происходит |
|---|---|
| Слишком низкое Quality | Появляются блоки, мыло и грязные контуры |
| Нет проверки в увеличении | Артефакты обнаруживаются уже после публикации |
| Сжатие маленького изображения | Экономия минимальна, качество портится заметно |
| Игнорирование исходного размера | Огромная фотография остаётся чрезмерно большой |
| Отказ от Resize | Файл уменьшается хуже, чем мог бы |
Правильная логика такая: сначала уменьшить физические размеры изображения, если они избыточны, затем подобрать качество. В Squoosh это делается в одном редакторе через Resize и Compress.
Оптимизация PNG через OxiPNG и Reduce palette
PNG — формат для задач, где важны чёткость, прозрачность и отсутствие типичных JPEG-артефактов. В Squoosh PNG лучше обрабатывать через OxiPNG и при необходимости через Reduce palette.
Когда использовать OxiPNG
OxiPNG подходит для:
-
скриншотов приложений;
-
фрагментов интерфейса;
-
логотипов;
-
иконок;
-
схем;
-
графиков;
-
изображений с прозрачностью;
-
файлов, где нельзя допустить JPEG-артефакты.
Главное отличие PNG-оптимизации от JPEG-компрессии в том, что PNG часто сохраняет резкие границы лучше. Если на изображении есть текст, линии и интерфейсные элементы, PNG может дать более чистый результат. Но PNG-файлы с фотографиями обычно получаются тяжёлыми, поэтому для фото лучше рассматривать MozJPEG, WebP или AVIF.
Когда включать Reduce palette
Reduce palette стоит включать, если изображение визуально простое. Например, скриншот с белым фоном, чёрным текстом и несколькими цветными элементами может хорошо пережить сокращение палитры. То же касается иконок и схем.
Если изображение содержит много плавных переходов, теней и фотографических деталей, Reduce palette лучше не использовать или использовать очень аккуратно. В противном случае появятся цветовые пятна и грубые переходы.
Пример логики для PNG
| Тип PNG | Что делать в Squoosh |
|---|---|
| Скриншот интерфейса | OxiPNG, при необходимости Reduce palette |
| Логотип с прозрачностью | OxiPNG, осторожно с палитрой |
| Иконка | Reduce palette может дать хороший результат |
| Схема | Сократить палитру и проверить линии |
| Фотография в PNG | Лучше попробовать WebP или AVIF |
Конвертация в WebP
WebP в Squoosh — один из самых практичных форматов для веб-оптимизации. Он позволяет уменьшать фотографии и некоторые PNG-изображения, сохраняя нормальное визуальное качество. В отличие от чистой PNG-оптимизации, WebP может давать значительную экономию на изображениях с большим количеством цветов.
Как выбрать WebP
В редакторе нужно открыть блок Compress и выбрать WebP в выпадающем списке. После этого становятся доступны параметры качества и дополнительные настройки. Пользователь двигает Quality, смотрит на размер файла и проверяет изображение ползунком сравнения.
Когда WebP выгоден
WebP хорошо подходит для:
-
фото в статьях;
-
изображений товаров;
-
обложек;
-
карточек каталога;
-
превью;
-
баннеров;
-
иллюстраций;
-
картинок для лендинга.
Если исходный JPEG весит слишком много, WebP часто помогает уменьшить размер без заметной визуальной потери. Если исходный PNG является скриншотом или логотипом, WebP тоже можно попробовать, но результат нужно внимательно сравнить с OxiPNG.
Когда WebP не идеален
WebP не всегда лучший выбор. Если изображение содержит мелкий текст, резкие контуры и прозрачность, нужно проверять результат особенно тщательно. Иногда PNG после OxiPNG выглядит чище, пусть и весит больше. Для логотипов и интерфейсных элементов визуальная чистота часто важнее максимальной экономии.
Конвертация в AVIF
AVIF в Squoosh — формат для сильного уменьшения размера изображений. Он особенно интересен для современных сайтов, где нужно минимизировать вес графики. В интерфейсе Squoosh AVIF выбирается в Compress, а параметры Quality, Lossless и Effort позволяют настраивать итоговый результат.

Когда выбирать AVIF
AVIF стоит выбирать, когда:
-
нужно получить минимальный размер файла;
-
изображение используется на современном сайте;
-
можно контролировать поддержку формата в проекте;
-
важна экономия трафика;
-
нужно оптимизировать большие фотографии;
-
результат можно проверить визуально перед публикацией.
Что важно при настройке AVIF
У AVIF есть особенность: файл может стать очень маленьким, но изображение визуально потеряет микродетали. Поэтому в Squoosh нужно смотреть не только на процент экономии, но и на качество.
Проверять нужно:
-
лица;
-
мелкие надписи;
-
контуры;
-
траву, волосы, ткань;
-
небо и градиенты;
-
тёмные области;
-
прозрачность, если она есть.
Effort влияет на то, насколько тщательно кодек ищет оптимальный результат. Более высокое значение может требовать больше времени. Для единичных изображений это допустимо, потому что пользователь получает больший контроль. Для массовой обработки такой подход менее удобен.
AVIF и фотографии
Для фотографий AVIF часто даёт хороший результат. Но при слишком низком Quality изображение может стать мягким. Это особенно заметно на портретах и товарных фото, где важны фактура, края и мелкие детали. В Squoosh удобно двигать ползунок качества и сразу видеть, где начинается заметная деградация.
AVIF и скриншоты
Для скриншотов AVIF нужно использовать осторожно. Если на изображении есть мелкий текст, таблицы, интерфейсные элементы и тонкие линии, агрессивное сжатие может испортить читаемость. В таких задачах стоит сравнивать AVIF с PNG, WebP и OxiPNG, а не выбирать его автоматически.
Скачивание результата
После настройки изображения Squoosh показывает итоговый размер файла и процент изменения. В нижней части панели находится кнопка с иконкой загрузки. Она сохраняет обработанный вариант изображения.
Важный момент: в редакторе можно настраивать обе стороны сравнения. Поэтому нужно сохранять именно тот вариант, который выбран как итоговый. Если пользователь сравнивает два разных кодека, например WebP и AVIF, у каждого варианта будет свой результат и свой размер.
Перед сохранением стоит проверить:
-
выбран ли нужный кодек;
-
устраивает ли значение Quality;
-
не включён ли случайно слишком сильный Reduce palette;
-
правильные ли размеры в Resize;
-
сохранились ли пропорции;
-
не испортилась ли прозрачность;
-
читается ли текст;
-
нет ли заметных артефактов.
Сохранять файл имеет смысл только после визуальной проверки. Squoosh показывает размер сразу, но хороший результат — это не минимальный вес любой ценой, а нормальный баланс между качеством и размером.
Локальная обработка и приватность
Squoosh обрабатывает изображения локально на устройстве. Это означает, что сам файл не отправляется на сервер для компрессии. Такой принцип особенно важен при работе с личными фотографиями, внутренними макетами, неопубликованными баннерами, скриншотами админ-панелей и любыми материалами, которые не хочется загружать в случайный онлайн-сервис.
При этом Squoosh использует Google Analytics для базовых данных посещения, значений размера изображения до и после обработки, а также данных, связанных с PWA-использованием. Это не отменяет локальную обработку самих изображений, но важно понимать разницу: файл изображения не уходит на сервер для сжатия, а аналитические метрики работы приложения могут собираться отдельно.
Для большинства пользовательских задач это делает Squoosh более приватным вариантом, чем онлайн-сервисы, куда изображение нужно загрузить на сервер и дождаться обработки. Особенно это заметно при работе с конфиденциальными скриншотами, документами в виде изображений, внутренними иллюстрациями и фотографиями, которые не должны попадать в чужую инфраструктуру.
Производительность и ограничения
Squoosh работает в браузере, поэтому скорость обработки зависит от устройства, размера изображения, выбранного кодека и параметров. Небольшие JPEG и PNG обрабатываются быстро. Большие фотографии, AVIF с высоким Effort, крупные PNG и изображения с большим разрешением могут нагружать браузер сильнее.
Что влияет на скорость
| Фактор | Как влияет |
|---|---|
| Размер исходного изображения | Чем больше пикселей, тем дольше обработка |
| Выбранный кодек | AVIF обычно тяжелее простого JPEG-сжатия |
| Значение Effort | Более тщательное кодирование занимает больше времени |
| Resize | Пересчёт размера требует дополнительных ресурсов |
| Reduce palette | Анализ и сокращение цветов тоже требуют обработки |
| Мощность устройства | На слабых ноутбуках и мобильных устройствах процесс медленнее |
| Память браузера | Очень крупные файлы могут вызывать задержки |
Ограничения Squoosh
Squoosh не стоит воспринимать как универсальное решение для всех сценариев. У него есть понятные ограничения.
Основные минусы:
-
нет удобного массового визуального режима для обработки сотен файлов;
-
для больших изображений браузер может работать медленно;
-
начинающему пользователю нужно разобраться с кодеками;
-
ручная настройка занимает время;
-
для автоматизации лучше подходят CLI-инструменты или пакетные программы;
-
некоторые форматы требуют проверки совместимости в конкретном рабочем процессе.
Это не делает Squoosh слабым инструментом. Просто его сильная сторона — точная ручная оптимизация конкретного изображения. Если нужно обработать один важный баннер, обложку, иллюстрацию или скриншот, Squoosh удобен. Если нужно каждый день прогонять тысячи файлов, лучше выбрать пакетный инструмент.
Пошаговая инструкция: как сжать изображение в Squoosh
Ниже — практический сценарий работы с Squoosh для обычной веб-оптимизации изображения.
Шаг 1. Добавить изображение
Откройте Squoosh в браузере и добавьте файл через область Drop OR Paste. Можно перетащить изображение в окно или вставить его из буфера обмена. После загрузки откроется редактор.
Шаг 2. Проверить исходник
Посмотрите на исходный размер файла и само изображение. Если картинка слишком большая по ширине и высоте, не стоит сразу снижать качество. Сначала лучше уменьшить разрешение через Resize.
Шаг 3. Включить Resize, если нужно изменить размеры
В правой панели откройте Edit и включите Resize. Укажите новую ширину в Width. Если нужно сохранить пропорции, оставьте включённым Maintain aspect ratio. Высота в Height пересчитается пропорционально.
Пример: если фотография шириной 4000 пикселей нужна для статьи, где максимальная ширина блока 1200 пикселей, можно задать Width: 1200 и оставить сохранение пропорций. Это сразу уменьшит объём данных, которые затем будет сжимать кодек.
Шаг 4. Выбрать формат в Compress
В блоке Compress откройте выпадающий список и выберите нужный формат:
| Задача | Что выбрать |
|---|---|
| Обычная фотография в JPEG | MozJPEG |
| PNG-скриншот | OxiPNG или WebP |
| Изображение для современного сайта | WebP или AVIF |
| Логотип с прозрачностью | PNG/OxiPNG или WebP |
| Максимальная экономия веса | AVIF |
| Совместимость важнее всего | MozJPEG или PNG |
Шаг 5. Настроить Quality
Передвигайте Quality постепенно. Не нужно сразу ставить очень низкое значение. Задача — найти точку, где размер уже заметно уменьшился, но изображение ещё выглядит нормально.
Проверяйте не только общий вид, но и детали. Используйте масштабирование и центральный разделитель.
Шаг 6. Проверить Advanced settings
Advanced settings нужны, если требуется более тонкая настройка. В обычной задаче можно не трогать дополнительные параметры, но для AVIF, WebP и MozJPEG они могут быть полезны, когда нужно добиться определённого баланса размера и качества.
Шаг 7. Сравнить результат ползунком
Передвиньте центральный вертикальный разделитель через важные зоны изображения. Для фото проверьте лицо, фон, тени и текстуры. Для скриншота — текст, кнопки и линии. Для логотипа — края и прозрачность.

Шаг 8. Сохранить результат
Когда качество устраивает, нажмите кнопку с иконкой загрузки в нижней части панели результата. После сохранения проверьте файл уже вне Squoosh: откройте его обычным просмотрщиком или вставьте в страницу, где он будет использоваться. Так можно убедиться, что изображение выглядит нормально в реальном размере отображения.
Практические настройки для разных типов изображений
Универсального значения качества нет. В Squoosh нужно смотреть на конкретный файл. Но можно использовать практическую логику выбора формата и настроек.
| Тип изображения | Подходящий формат в Squoosh | Что настраивать | Что проверять |
|---|---|---|---|
| Фотография для статьи | WebP, AVIF, MozJPEG | Quality, Resize | лица, небо, тени, фактуры |
| Фото товара | WebP, MozJPEG, AVIF | Quality, Resize | края товара, надписи, текстуры |
| Скриншот интерфейса | PNG/OxiPNG, WebP | Reduce palette, Quality | текст, линии, кнопки |
| Логотип | PNG/OxiPNG, WebP | прозрачность, палитра | края, альфа-канал, цвета |
| Иконка | PNG, WebP | Reduce palette | контуры, заливки |
| Баннер | WebP, AVIF, MozJPEG | Quality, Resize | текст, лица, градиенты |
| Иллюстрация | WebP, AVIF, PNG | Quality, палитра | контуры, цветовые переходы |
| Схема или график | PNG, WebP | Reduce palette | подписи, линии, мелкие элементы |
| Фоновое изображение | WebP, AVIF | Quality, Resize | общая мягкость, шум, градиенты |
Фотографии
Для фотографий чаще всего стоит начинать с WebP или MozJPEG. Если проект поддерживает AVIF, можно сравнить AVIF с WebP. При большом исходном разрешении сначала используйте Resize, потом подбирайте Quality.
Практическая логика:
-
Уменьшить ширину до нужной для сайта.
-
Выбрать WebP или AVIF.
-
Снизить Quality до момента, пока потери не становятся заметными.
-
Вернуть Quality немного выше.
-
Проверить лицо, фон и мелкие детали.
-
Скачать результат.
Скриншоты
Для скриншотов важна читаемость. Если изображение содержит много текста, агрессивное сжатие вредно. Начните с OxiPNG или WebP. Если скриншот простой, попробуйте Reduce palette.
Практическая логика:
-
Оставить фактический размер, если он уже соответствует публикации.
-
Попробовать OxiPNG.
-
Попробовать WebP с высоким качеством.
-
Сравнить текст и линии.
-
Использовать тот вариант, где текст остаётся чистым.
Логотипы и иконки
Для логотипов важна прозрачность и чёткость края. JPEG почти всегда плохой выбор, если есть прозрачный фон. В Squoosh лучше пробовать PNG/OxiPNG и WebP. Reduce palette может помочь, если логотип состоит из нескольких цветов.
Практическая логика:
-
Проверить прозрачность.
-
Выбрать OxiPNG или WebP.
-
При необходимости сократить палитру.
-
Увеличить изображение и проверить края.
-
Сохранить только чистый вариант.
Баннеры
Баннеры часто содержат и фото, и текст. Поэтому они сложнее. Если текст встроен в изображение, нельзя сжимать слишком сильно. WebP часто становится хорошим компромиссом, AVIF может дать меньший вес, но требует проверки текста.
Практическая логика:
-
Установить нужный размер через Resize.
-
Проверить WebP.
-
Проверить AVIF.
-
Сравнить текст и лица.
-
Выбрать вариант, где текст не расплывается.
Сравнение с аналогами
Squoosh стоит сравнивать не с абстрактными компрессорами картинок, а с конкретными инструментами, которые решают похожие задачи. У каждого из них свой сценарий.
| Инструмент | Где сильнее | Где слабее относительно Squoosh |
|---|---|---|
| TinyPNG / Tinify | Быстрая автоматическая оптимизация, API, WordPress-интеграция, bulk-сценарии | Меньше ручного визуального контроля в стиле Squoosh |
| ImageOptim | Локальная оптимизация на macOS, удаление метаданных, drag-and-drop | Нет такого интерактивного сравнения кодеков в браузере |
| Caesium Image Compressor | Удобнее для пакетной обработки и массового сжатия | Менее сфокусирован на веб-сравнении форматов через один ползунок |
| XnConvert | Мощная пакетная конвертация, десятки операций, много форматов | Более сложный инструмент, не так быстро подходит для ручного подбора качества одного файла |
| ImageMagick | Автоматизация, командная строка, скрипты, массовая обработка | Нет визуального интерфейса сравнения как в Squoosh |
| Compressor.io | Простой онлайн-сервис для быстрого сжатия | Squoosh даёт больше ручной настройки и локальную обработку файла |
TinyPNG и Tinify сильны в автоматизации: они поддерживают современные форматы, API, WordPress-плагин, массовую оптимизацию медиатеки и автоматическое сжатие при загрузке. Это удобно для сайтов, где нужно встроить оптимизацию в процесс публикации. Но Squoosh выигрывает в ручном контроле: пользователь видит изображение, меняет параметры и сравнивает результат до сохранения.
ImageOptim — хороший выбор для macOS, когда нужно локально уменьшать размер файлов, удалять лишние метаданные и применять набор оптимизаторов через drag-and-drop. Он удобен для быстрого локального сценария, но Squoosh нагляднее при сравнении разных форматов и параметров качества в одном окне.
Caesium Image Compressor лучше подходит для пакетного сценария. В онлайн-версии Caesium есть ограничения по количеству и размеру файлов, а сам сервис также делает акцент на локальной обработке в браузере. В сравнении со Squoosh он интересен как более массовый компрессор, но Squoosh удобнее как точный визуальный инструмент для выбора кодека и качества одного изображения.
XnConvert значительно шире по возможностям: это пакетный конвертер с большим набором действий, включая resize, crop, цветовые корректировки, фильтры, эффекты и поддержку множества форматов. Но именно поэтому он менее прямолинеен. Если нужно обработать папку изображений — XnConvert сильнее. Если нужно открыть одну картинку и быстро сравнить MozJPEG, WebP и AVIF — Squoosh проще.
ImageMagick стоит отдельно. Это мощный инструмент для командной строки и автоматизации, но он требует знания команд и параметров. Squoosh не конкурирует с ним в скриптах и серверных пайплайнах. Зато Squoosh лучше подходит для визуального ручного решения: подвигать ползунок, увидеть артефакты, сохранить итог.
Плюсы Squoosh
Squoosh силён не количеством функций, а качеством основного сценария. Он хорошо решает задачу ручной оптимизации изображений для веба.
Наглядное сравнение до и после
Главный плюс — центральный ползунок сравнения. Пользователь видит результат компрессии прямо на изображении. Это важнее, чем просто цифра минус 67%, потому что иногда файл становится маленьким, но визуально непригодным.
Работа в браузере
Squoosh не требует отдельного тяжёлого графического редактора. Достаточно открыть веб-приложение, добавить файл и настроить результат. Это удобно для быстрых задач: сжать баннер, подготовить иллюстрацию, уменьшить скриншот, проверить WebP или AVIF.
Локальная обработка изображения
Файл изображения обрабатывается на устройстве пользователя. Для веб-инструмента это сильная сторона, потому что многие онлайн-компрессоры требуют загрузить файл на сервер. В Squoosh сам процесс компрессии выполняется локально.
Поддержка разных кодеков
В Squoosh можно сравнивать разные варианты сжатия: MozJPEG, OxiPNG, WebP, AVIF и другие форматы, доступные в интерфейсе. Это делает программу полезной не только для практической подготовки файлов, но и для тестирования форматов на конкретных изображениях.
Resize в том же интерфейсе
Возможность изменить размер изображения перед сжатием экономит время. Часто именно лишнее разрешение является главной причиной большого веса. В Squoosh не нужно отдельно открывать редактор для уменьшения ширины и высоты.
Reduce palette
Сокращение палитры полезно для PNG, иконок, схем и простой графики. Это не универсальная кнопка, но в правильных задачах она помогает уменьшить размер без перехода к заметно худшему JPEG-виду.
Подходит для обучения оптимизации
Squoosh хорошо показывает, как формат и качество влияют на изображение. После нескольких экспериментов пользователь начинает лучше понимать, почему один файл лучше сохранять в WebP, другой в PNG, а третий в AVIF.
Минусы Squoosh
У Squoosh есть ограничения, и их нужно учитывать.
Не лучший выбор для массовой обработки
Визуальный интерфейс Squoosh рассчитан на работу с конкретным изображением. Если нужно обработать сотни или тысячи файлов, ручной сценарий станет медленным. Для таких задач удобнее XnConvert, ImageOptim, Caesium, TinyPNG API, скрипты или CLI-инструменты.
Требует ручного контроля
Squoosh не всегда делает идеально автоматически. Пользователь должен сам выбрать кодек, качество, размер, проверить результат и сохранить файл. Для точной работы это плюс, но для быстрых массовых задач — минус.
Некоторые настройки могут быть непонятны новичку
Effort, Lossless, Reduce palette, Dithering, Premultiply alpha channel, Linear RGB — эти параметры не всегда очевидны. Новичок может получить плохой результат, если будет менять всё подряд без проверки.
Крупные изображения нагружают браузер
Большие фотографии, тяжёлые PNG и AVIF с высоким effort могут обрабатываться медленно. Это нормальное ограничение браузерного инструмента: обработка идёт на устройстве пользователя, а не на серверной инфраструктуре.
Не заменяет графический редактор
Squoosh не предназначен для ретуши, обрезки сложных объектов, удаления фона, цветокоррекции, работы со слоями или дизайна баннеров. Его задача — оптимизация уже готового изображения.
Для кого Squoosh будет особенно полезен
Веб-разработчики
Разработчику Squoosh помогает быстро проверить, какой формат лучше подойдёт для конкретной картинки. Можно сравнить WebP и AVIF, уменьшить размер, проверить вес и подготовить файл для проекта.
SEO-специалисты
SEO-специалисту Squoosh полезен для уменьшения веса изображений на страницах. Лёгкие изображения помогают улучшить пользовательский опыт, снизить объём передаваемых данных и ускорить загрузку визуального контента.
Дизайнеры
Дизайнеру Squoosh помогает подготовить экспортированные изображения для сайта. После создания баннера или иллюстрации можно быстро уменьшить вес, не открывая сложный редактор повторно.
Контент-менеджеры
Контент-менеджеру Squoosh удобен для статей, карточек товаров, новостей и блогов. Можно быстро сжать изображение перед загрузкой в CMS, подобрать формат и проверить, не испортился ли вид.
Владельцы сайтов
Владелец сайта может использовать Squoosh без сложной настройки. Это полезно, если нужно самостоятельно уменьшить несколько изображений перед публикацией: фото услуги, картинку для новости, баннер или скриншот.
Маркетологи
Маркетологу Squoosh помогает готовить изображения для лендингов, рекламных страниц, email-рассылок и промоматериалов. Особенно удобно, когда нужно быстро уменьшить баннер, но нельзя потерять читаемость текста.
Когда лучше выбрать не Squoosh
Squoosh не всегда оптимальный вариант. Есть задачи, где другие инструменты подходят лучше.
Нужно обработать много файлов
Если нужно сжать папку из сотен изображений, Squoosh будет неудобен. Лучше использовать пакетные инструменты: XnConvert, ImageOptim, Caesium или автоматизацию через API/CLI.
Нужна автоматизация
Если изображения должны обрабатываться при сборке сайта, загрузке в CMS или публикации товара, лучше использовать автоматический пайплайн. Squoosh — ручной визуальный инструмент, а не серверный обработчик.
Требуется редактирование изображения
Если нужно обрезать объект, удалить фон, изменить цвета, добавить текст, ретушировать фото или собрать макет, Squoosh не подходит. Сначала нужно подготовить изображение в редакторе, а потом оптимизировать его в Squoosh.
Нужна строгая совместимость со старым окружением
Если изображение должно открываться в старых системах, приложениях или CMS, не стоит автоматически выбирать AVIF или WebP. В Squoosh можно сделать современный формат, но совместимость нужно учитывать отдельно.
Нужно сохранить максимум качества без экспериментов
Если задача архивная и качество важнее размера, агрессивная компрессия не нужна. В таком случае Squoosh можно использовать осторожно, но не стоит снижать качество ради красивого процента экономии.
Итоговая оценка Squoosh
Squoosh — сильный веб-инструмент для ручного сжатия, конвертации и сравнения изображений. Его главная особенность — не просто уменьшение размера файла, а возможность видеть компромисс между качеством и весом до сохранения результата. Это делает программу особенно полезной для подготовки изображений для сайта, тестирования WebP и AVIF, оптимизации JPEG и PNG, уменьшения разрешения и проверки визуальных потерь.
Squoosh лучше всего подходит для работы с отдельными изображениями, где важен контроль: баннер, фотография товара, иллюстрация для статьи, скриншот интерфейса, логотип, графика для лендинга. Пользователь загружает файл, включает Resize при необходимости, выбирает кодек в Compress, настраивает Quality, проверяет результат ползунком и сохраняет итоговый файл.
Сильные стороны Squoosh — локальная обработка, наглядное сравнение, поддержка нескольких форматов, удобный Resize, Reduce palette и точная настройка качества. Слабые стороны — отсутствие удобного массового визуального сценария, зависимость скорости от браузера и необходимость ручного выбора параметров.
Для единичной оптимизации изображений Squoosh остаётся одним из самых удобных вариантов: он показывает не только насколько файл стал меньше, но и какой ценой это достигнуто.