Squoosh: сжатие, конвертация и оптимизация изображений

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

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

Основной сценарий Squoosh — не «нажать одну кнопку и забыть», а посмотреть, что именно происходит с конкретным изображением при изменении размера, формата и параметров кодека. Это удобно, когда один и тот же исходник может вести себя по-разному: фотография терпит заметное сжатие JPEG или AVIF, интерфейсный скриншот лучше сохраняет тонкие линии в PNG или lossless WebP, а картинка с прозрачностью требует контроля альфа-канала. Вместо общего пресета приложение показывает результат сразу и позволяет оценить его глазами.

Другие инструменты: ФотоМАСТЕР.

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

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

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

Установка и начало работы

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

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

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

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

Как устроен рабочий экран

После импорта изображение занимает основную часть окна, а поверх него располагаются панели Edit и Compress. Центральный вертикальный разделитель делит кадр на две независимые стороны. По умолчанию одна сторона обычно показывает Original Image, а на другой выбран кодек. Круглый маркер на разделителе можно перемещать влево и вправо, чтобы одна и та же область фотографии моментально переходила от исходника к обработанному варианту.

У каждой стороны есть собственный список Compress. Это важная особенность Squoosh: слева необязательно оставлять оригинал. Можно выбрать один кодек слева и другой справа, например MozJPEG и WebP, а затем подобрать для обоих такое качество, при котором визуальные дефекты примерно одинаковы. После этого уже имеет смысл смотреть на размер файлов. Такой порядок честнее, чем сравнивать два формата при одинаковом числе Quality, потому что шкалы качества у разных кодеков не эквивалентны.

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

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

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

Импорт изображения и подготовка исходника

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

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

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

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

Сравнение до и после

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

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

Полезный рабочий приём — уменьшать Quality до момента, когда дефект становится очевидным, а затем вернуть значение немного назад. Это быстрее, чем двигаться от максимального качества вниз маленькими шагами. Однако не существует универсального числа, которое нужно ставить на все картинки. Даже два кадра с одной камеры могут требовать разных настроек из-за шума, контраста и количества мелких деталей.

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

Процент уменьшения возле кнопки сохранения — удобная подсказка, но не критерий качества. Файл, ставший на 90 % меньше, не обязательно «лучше» файла, уменьшившегося на 70 %. Цель — достичь минимального размера при сохранении тех деталей, которые важны в реальном размере показа. Если пользователю видны полосы в небе, расплывшийся текст или цветовые ореолы, экономия байтов уже не оправдывает настройку.

Изменение размеров: Resize

Переключатель Resize раскрывает параметры масштабирования. Базовые поля — Width и Height. При включённом Maintain aspect ratio изменение одной стороны приводит вторую к соответствующему значению, поэтому изображение не растягивается. Для большинства веб-сценариев этот флажок должен оставаться включённым.

В списке Method доступны алгоритмы ресэмплинга, среди которых встречаются Triangle, Catrom, Mitchell и Lanczos3. Это не уровни «качества от плохого к хорошему», а разные фильтры пересчёта пикселей. Lanczos3 часто даёт резкий результат на фотографиях и интерфейсной графике, но на некоторых контрастных границах может подчёркивать звон или ореол. Более мягкий фильтр иногда предпочтительнее для исходника с шумом или уже заметным перешарпом.

Поле Preset позволяет быстро выбрать масштаб относительно исходного изображения. Для веб-публикации полезнее ориентироваться не на проценты, а на требуемую конечную ширину. Если в макете картинка показывается максимум в 1200 пикселей, хранить вариант шириной 4000 пикселей только затем, чтобы браузер каждый раз уменьшал его CSS-стилями, обычно нерационально. Исключение — сценарий, где тот же файл намеренно используется как источник для дисплеев высокой плотности или адаптивной разметки.

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

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

Увеличивать маленькое изображение через Resize можно, но это не восстанавливает деталей, которых нет в исходнике. Squoosh выполняет обычный ресэмплинг, а не генеративное повышение разрешения. Если исходная иконка имеет 64×64 пикселя, превращение её в 512×512 даст больше пикселей, но не создаст настоящую высокодетальную версию. Для веб-оптимизации Resize прежде всего полезен именно для уменьшения.

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

Сокращение палитры: Reduce palette

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

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

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

Параметр Dithering нужен, когда граница между соседними цветами становится заметной. При увеличении дизеринга переход визуально сглаживается за счёт чередования доступных цветов. Но это не «возврат утраченных оттенков»: пиксели всё равно принадлежат ограниченной палитре. На маленьких иконках шум может выглядеть хуже ступеней, а на больших градиентах — наоборот, делать переход менее броским. Сравнивать следует в масштабе использования.

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

Для PNG-подобного сценария сочетание Reduce palette и OxiPNG нужно понимать правильно. OxiPNG сам по себе выполняет без потерь оптимизацию PNG-представления, но предварительное сокращение палитры уже меняет пиксельные данные и является потенциально потерянной операцией. Поэтому выражение «OxiPNG без потерь» относится к работе самого PNG-кодека после подготовки растра, а не к всей цепочке, если включена палитризация.

Выбор формата и кодека

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

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

OxiPNG предназначен для PNG. Его сильная сторона — без потерь подобрать более компактное представление уже заданных пикселей. В отличие от JPEG-подобных кодеков у него нет обычного ползунка «качество фотографии». Существенная экономия на сложном полноцветном PNG часто требует либо предварительного уменьшения размеров, либо сокращения палитры, либо перехода на WebP/AVIF, если совместимость это позволяет.

WebP поддерживает как потерянный, так и lossless-режим и может сохранять прозрачность. Он удобен, когда нужен один современный формат для фотографий, иллюстраций и прозрачной графики. На фотографии обычно используют lossy WebP с контролем Quality; на интерфейсной графике и изображениях, где нельзя менять пиксели, пробуют Lossless.

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

Название кодека и расширение файла — не единственные факторы. Перед публикацией нужно проверить, принимает ли выбранный формат CMS, CDN, почтовая система, рекламная платформа или другой конечный сервис. Если конкретная система не умеет загружать AVIF, идеальная экономия в Squoosh не поможет. В таком случае разумнее выбрать WebP или совместимый JPEG/PNG и оптимизировать уже его.

Нельзя сравнивать форматы только по результату на одном изображении. Простая графика с несколькими цветами может лучше всего сжиматься палитризованным PNG; фотография с шумом — WebP или AVIF; изображение с тонким цветным текстом может требовать более высокого качества или режима без потерь. Squoosh ценен именно тем, что позволяет принять решение на конкретном содержимом, а не по общей таблице «формат A всегда лучше формата B».

MozJPEG: подготовка JPEG для веба

После выбора MozJPEG основной регулятор — Quality. Чем ниже значение, тем сильнее количественная компрессия и обычно меньше файл. Шкала не является процентом сохранённой информации и не означает, что значение 75 даёт «75 % исходного качества». Это параметр кодека, который меняет стратегию квантования. Оценивать его нужно по изображению и итоговому размеру.

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

Раздел Advanced settings открывает параметры, которые большинству пользователей не нужно менять для каждого файла, но они полезны для сложных случаев. Channels определяет цветовое представление. Типичный JPEG использует YCbCr, где яркостная и цветовые составляющие кодируются раздельно. Это позволяет экономить данные в цветности, к которой зрение часто менее чувствительно, чем к яркостным деталям.

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

Переключатель Separate chroma quality, если он доступен в текущей панели, позволяет задавать качество цветовой компоненты отдельно. Это тонкая настройка, а не способ автоматически улучшить любую картинку. На фотографии можно позволить цветности быть менее точной ради размера, а на насыщенной графике с цветным текстом — наоборот, сохранить её лучше. При отсутствии явной проблемы штатные значения безопаснее ручного перебора нескольких взаимозависимых параметров.

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

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

В более глубоких параметрах MozJPEG могут присутствовать настройки таблиц квантования и trellis-оптимизации. Они относятся уже не к простому «больше или меньше качества», а к поиску эффективного кодирования коэффициентов JPEG. Если вы не решаете конкретную задачу сравнения, менять их произвольно не стоит: выигрыш в байтах может быть небольшим, а сочетание настроек сложнее воспроизводить и объяснять коллегам.

Практический алгоритм для фотографии таков: сначала задайте требуемые размеры через Resize; выберите MozJPEG; установите среднее, а не экстремальное качество; увеличьте изображение и пройдитесь разделителем по проблемным зонам; затем постепенно снижайте Quality, пока артефакты не станут заметными, и вернитесь на один-два шага. После этого сравните размер с WebP или AVIF при визуально сопоставимом результате.

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

WebP: lossy, lossless и прозрачность

После выбора WebP интерфейс показывает переключатель Lossless. В выключенном состоянии используется потерянное кодирование с ползунком Quality; во включённом — кодек старается сохранить пиксельные значения без потерь. Это два разных режима, поэтому сравнивать их только по положению одного ползунка бессмысленно.

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

Effort регулирует объём вычислений, который кодек тратит на поиск более эффективного представления. Это не прямой регулятор визуального качества. При одинаковом качестве более высокий effort обычно означает более медленное кодирование с попыткой получить меньший файл. Для одиночной обложки можно позволить браузеру поработать дольше; при черновом подборе лучше держать effort умеренным и повысить его только перед финальным сохранением.

Lossless WebP полезен для изображений с прозрачностью, скриншотов, схем и графики, где изменение пикселей нежелательно. Но «без потерь» не означает «всегда меньше PNG». Результат зависит от структуры изображения. OxiPNG может оказаться компактнее на одном файле, lossless WebP — на другом. Сравнение в Squoosh занимает секунды: выберите кодеки на двух сторонах, не включайте палитризацию, если хотите именно побитовое сохранение изображения после декодирования, и посмотрите размер.

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

Расширенные настройки WebP могут включать параметры фильтрации, сегментации, методов поиска и качества альфа-канала. Они позволяют донастроить кодирование, однако для ручной подготовки веб-картинки чаще важнее три решения: правильная геометрия, выбор lossy или lossless и адекватный Quality. Глубокие параметры стоит трогать только после того, как эти три пункта уже оптимизированы.

WebP удобно использовать как «универсальный современный» формат, но это не отменяет проверки конечной системы. Многие современные браузеры и CMS работают с ним штатно, однако конкретный редактор, внешняя рекламная сеть, старый почтовый клиент или система импорта могут иметь ограничения. Если файл проходит через несколько сервисов, проверяйте весь маршрут, а не только отображение в своём браузере.

Для скриншота с мелким текстом lossy WebP иногда требует такого высокого качества, что размер приближается к lossless-варианту. В этом случае имеет смысл сравнить lossless WebP с OxiPNG и, при допустимости, аккуратным сокращением палитры. Для скриншота с фотографиями внутри окна приложения, наоборот, lossy WebP может дать заметный выигрыш без видимого ущерба крупным элементам интерфейса.

AVIF: качество, effort и расширенные параметры

AVIF в Squoosh полезен прежде всего там, где важен минимальный вес фотографии или сложной растровой иллюстрации и допустима дополнительная вычислительная нагрузка при кодировании. В панели есть Lossless, Quality, раскрываемый раздел Advanced settings и Effort. В потерянном режиме качество в интерфейсе не доходит до значения, которое кодек трактует как полностью lossless: для режима без потерь предусмотрен отдельный переключатель.

Quality задаёт целевой уровень качества для основной цветовой части изображения. Как и в MozJPEG или WebP, число нельзя переносить между форматами как универсальный процент. AVIF с Quality 50 и WebP с Quality 50 не обязаны быть сопоставимыми ни по размеру, ни по визуальному качеству. Сначала приведите варианты к близкому внешнему виду, затем сравнивайте размер.

Effort в текущем интерфейсе AVIF связан со скоростью работы кодека: высокий effort заставляет его тратить больше вычислений на поиск представления. В исходном коде Squoosh шкала effort развёрнута относительно внутреннего параметра speed. Это означает, что повышение effort не должно трактоваться как «качество картинки». При неизменном Quality оно прежде всего влияет на время кодирования и потенциальную эффективность сжатия.

На большой фотографии изменение Effort может ощущаться как заметная пауза после каждого движения ползунка. Это ожидаемо: вычисления идут на вашем процессоре через WebAssembly. При подборе качества разумно держать effort на умеренном уровне, а повышать его уже после того, как определены размеры и качество. Так интерфейс остаётся отзывчивее, а дорогой поиск выполняется только для финального варианта.

В Advanced settings доступен параметр Subsample chroma со схемами 4:0:0, 4:2:0, 4:2:2 и 4:4:4. Чем сильнее субдискретизация цветности, тем меньше цветовой информации сохраняется пространственно. На фотографии 4:2:0 часто выглядит приемлемо, потому что человеческое зрение сильнее реагирует на яркостные детали. На тонком цветном тексте, пиксельной графике и насыщенных интерфейсных границах различия могут стать заметными.

При 4:2:0 интерфейс может предлагать Sharp YUV Downsampling. Эта настройка меняет способ подготовки цветовых данных к субдискретизации. Не существует правила включать её всегда: задача пользователя — сравнить конкретные края и цветовые переходы. Если на тонких красно-синих или цветно-белых границах возникает лишнее размытие, этот параметр относится к числу тех, которые имеет смысл проверить.

Separate alpha quality позволяет отделить качество прозрачности от качества основной картинки. После включения появляется Alpha quality. Это полезно для изображений, где RGB-содержимое допускает сильную компрессию, но плавность прозрачной тени или волос по краю должна оставаться высокой. Если альфа-канала нет, отдельная настройка лишь усложняет конфигурацию без практической пользы.

Extra chroma compression даёт кодеку дополнительную свободу при компрессии цветовой составляющей. Его нужно проверять на насыщенных границах и мелких цветных деталях. На природной фотографии дополнительная цветовая компрессия часто менее заметна, чем на диаграмме, интерфейсе или изображении с цветным логотипом. Если цель — файл для веба, визуальная проверка важнее теоретически «правильного» положения переключателя.

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

Noise synthesis задаёт уровень синтеза шума в декодируемом результате. Такая техника может помочь сохранить воспринимаемую естественность текстуры при сжатии, но она не восстанавливает исходный случайный шум пиксель в пиксель. Для чистых интерфейсных изображений синтетический шум обычно нежелателен; для фотографии вопрос решается только сравнением.

Tuning предлагает варианты Auto, PSNR и SSIM. Это настройка того, под какую метрику или режим оптимизируется кодирование. PSNR и SSIM — математические показатели сходства, но ни один из них не совпадает полностью с человеческим восприятием. Для ручной подготовки веб-графики Auto остаётся разумной отправной точкой, а остальные режимы полезны при осознанном сравнении.

Параметры Log2 of tile rows и Log2 of tile cols управляют разбиением изображения на тайлы. Они существуют ради внутренней организации кодирования и параллелизма. Для обычного одиночного веб-изображения не следует менять их только потому, что число «выглядит низким». Неподходящее разбиение способно изменить эффективность кодирования, а визуального выигрыша само по себе не создаёт.

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

AVIF особенно требует проверки в целевой среде. Современная поддержка формата широка, но отдельные браузерные версии и связки ОС могут иметь ошибки в реализации или WebAssembly-пути Squoosh. В 2026 году в репозитории Squoosh, например, зафиксирован открытый отчёт о проблеме экспорта AVIF в конкретной версии Safari. Это не означает, что «AVIF не работает в Safari вообще», но показывает правильный подход к диагностике: если кнопка сохранения бесконечно ждёт или кодек падает, повторите операцию в другом актуальном браузере прежде, чем делать вывод о повреждении файла.

OxiPNG: оптимизация PNG без потерь

OxiPNG предназначен для поиска более компактного PNG-представления. В отличие от MozJPEG, WebP lossy или AVIF lossy он не предлагает обычного регулятора визуального качества, потому что задача кодека — сохранить пиксели и оптимизировать структуру PNG. Главные доступные элементы — Interlace и Effort.

Effort определяет, сколько вариантов оптимизации OxiPNG попробует. Чем выше усилие, тем больше вычислений требуется. На небольшом скриншоте разница во времени может быть почти незаметна, на большой картинке — ощущаться сильнее. Как и в других кодеках, высокий effort не меняет назначение режима: это попытка сжать тот же визуальный результат эффективнее, а не снизить качество.

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

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

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

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

Практический сценарий: фотография для статьи

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

На правой стороне выберите WebP или AVIF, на левой — MozJPEG либо второй современный формат. Установите умеренное качество и переместите разделитель на участки с лицами, волосами, небом, листвой или мелкими деталями. Снижайте качество каждой стороны до примерно одинаковой заметности артефактов. Только затем сравнивайте размер.

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

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

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

Практический сценарий: скриншот интерфейса

Скриншоты отличаются от фотографий: в них много однотонных областей, резких границ, пиктограмм и мелкого текста. Для такого материала первым кандидатом часто становится OxiPNG или lossless WebP. Если цветов действительно немного, можно проверить Reduce palette. При этом увеличьте изображение так, чтобы хорошо видеть края букв.

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

Сравните палитризованный OxiPNG с lossless WebP. Если система публикации принимает оба формата, выбирайте по меньшему размеру при одинаковом визуальном результате. Если нужен PNG по требованиям документации или CMS, OxiPNG даёт наиболее прямой путь: формат остаётся PNG, а Squoosh оптимизирует его представление.

Для скриншота с фотографией внутри окна приложения можно попробовать lossy WebP. Не ориентируйтесь на то, что «скриншоты всегда PNG»: смешанный контент иногда хорошо сжимается современным потерянным кодеком. Но проверьте цветные буквы, тонкие разделители и маленькие иконки. Именно они первыми показывают, что Quality опущен слишком низко.

Практический сценарий: PNG с прозрачностью

У прозрачной иллюстрации сначала определите, требуется ли полная пиксельная точность. Для логотипа или UI-элемента обычно разумны OxiPNG и lossless WebP. Для сложной предметной фотографии на прозрачном фоне можно попробовать lossy WebP или AVIF с альфа-каналом, если целевая система поддерживает такой файл.

При Resize оставьте Premultiply alpha channel включённым, если полупрозрачные края должны масштабироваться аккуратно. После обработки переключайте фон предпросмотра: белый, тёмный и нейтральный. Ореол, который незаметен на светлом фоне, может стать очень заметным на тёмной теме сайта.

В AVIF при необходимости включите Separate alpha quality. Сначала подберите качество основной картинки, затем отдельно проверьте прозрачные края. Нет смысла держать максимальное качество альфы у изображения с жёсткой бинарной прозрачностью, но мягкая тень или полупрозрачные волосы требуют более осторожной настройки.

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

Практический сценарий: выбор между AVIF и WebP

Чтобы сравнение было корректным, поставьте AVIF на одну сторону, WebP — на другую, а геометрию оставьте общей. Не выставляйте одинаковое число Quality и не считайте это честным тестом. Подберите настройки так, чтобы на характерных деталях оба варианта выглядели примерно одинаково. Затем сравните размер.

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

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

Как оценивать качество без самообмана

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

Для фотографии выберите несколько контрольных зон. Лицо показывает, не потеряны ли естественные переходы и текстура кожи. Волосы, трава и ветви выявляют потерю мелкой структуры. Небо и стены показывают полосы на градиентах. Контрастные края позволяют заметить ореолы. Тёмные области обнаруживают цветной шум и блоки, которые могут быть незаметны в светлых деталях.

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

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

Следует отличать качество кодирования от качества исходника. Squoosh не устраняет смаз от движения, промах фокуса, JPEG-артефакты, которые уже были в исходном файле, или неправильную экспозицию. Иногда после уменьшения веса дефекты просто становятся заметнее, потому что пользователь внимательно рассматривает картинку. Если проблема присутствует на стороне Original Image, повышать Quality бессмысленно.

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

Сохранение результата и контроль после экспорта

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

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

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

Если сайт сам генерирует миниатюры, не нужно подбирать Squoosh-настройки по размеру одной миниатюры, не понимая цепочку. Сначала выясните, какой файл сохраняется как оригинал в медиатеке и какие варианты создаёт сервер. Возможно, оптимальный процесс — загрузить качественный, но разумно уменьшенный WebP/JPEG, а производные размеры доверить CMS. В другом проекте, наоборот, потребуются заранее подготовленные AVIF и WebP.

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

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

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

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

AVIF с высоким Effort обычно требует больше времени, чем OxiPNG умеренного уровня или обычный MozJPEG. Это не означает, что один кодек «медленный вообще», а другой «быстрый всегда»: конкретная реализация, процессор и изображение влияют на результат. Squoosh не публикует для вашего компьютера универсальные секунды, поэтому корректнее ориентироваться на реальное поведение в браузере, не придумывая нормативных замеров.

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

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

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

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

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

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

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

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

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

Типичные ошибки и способы их устранения

Кодек долго «крутится», а кнопка сохранения не появляется

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

Когда ошибка повторяется только в одном браузере, протестируйте другой актуальный браузер. Это особенно важно для WebAssembly-кодеков. В 2026 году в публичном трекере Squoosh есть конкретный отчёт о неработающем AVIF-экспорте в Safari 26.2 с ошибкой доступа к памяти. Такой единичный отчёт нельзя превращать в общее утверждение о Safari, но он подтверждает, что браузерная реализация действительно может быть причиной.

После уменьшения появились тёмные или светлые края вокруг прозрачности

Вернитесь в Resize и проверьте Premultiply alpha channel. Полупрозрачные края требуют корректного смешивания цвета и альфы при ресэмплинге. Затем проверьте изображение на светлом и тёмном фоне. Если ореол уже присутствует в исходнике, Squoosh не удалит его; потребуется исправить мастер-файл в редакторе с инструментами работы по краю маски.

Картинка стала мягкой, хотя Quality кажется высоким

Сначала выясните, не уменьшили ли вы изображение слишком сильно. Масштабирование само по себе удаляет пространственные детали. Затем сравните исходник и результат при одинаковом масштабе. Если геометрия одинакова, увеличьте Quality или ослабьте цветовую субдискретизацию. Для текста и интерфейсной графики попробуйте lossless WebP или OxiPNG вместо фотографического кодека.

PNG после оптимизации почти не уменьшился

Это нормальный результат, если исходный PNG уже оптимизирован и требуется сохранить пиксели без потерь. OxiPNG не обязан каждый раз давать крупную экономию. Если допустимы изменения, проверьте Reduce palette и уменьшение размеров. Если формат можно заменить, сравните lossless WebP или AVIF. Если нельзя — оставьте небольшой выигрыш и не жертвуйте качеством ради формального процента.

После Reduce palette появились полосы

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

После Dithering файл стал больше

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

Цветной текст стал грязным

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

Файл не принимает CMS

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

Файл сохраняется, но на сайте выглядит хуже

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

Изображение исказилось по пропорциям

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

После повторного открытия настройки исчезли

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

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

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

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

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

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

Что Squoosh не делает

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

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

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

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

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

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

Универсального пресета для Squoosh не существует, но тип содержимого позволяет сузить поиск. Для фотографий ключевые переменные — конечные размеры, Quality и выбор между MozJPEG, WebP и AVIF. Для интерфейсной графики — сохранность линий, текста и прозрачности, поэтому в приоритете OxiPNG и lossless WebP. Для иллюстраций с ограниченной палитрой добавляется Reduce palette. Такая классификация помогает не тратить время на параметры, которые не решают задачу конкретного файла.

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

Для скриншота не включайте Reduce palette автоматически. Сначала попробуйте чистый OxiPNG и lossless WebP. Если файл всё ещё велик, включите палитру и посмотрите, сколько цветов можно убрать без повреждения шрифтов, теней и градиентов. Иногда достаточно сократить геометрию: скриншот 4K-монитора может публиковаться в колонке шириной менее половины исходного размера.

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

Для изображения с прозрачностью проверьте не только альфа-канал как факт, но и его градации. У мягкой тени может быть сотни уровней прозрачности, а у простой иконки — только полностью прозрачные и полностью непрозрачные пиксели. Эти два файла предъявляют разные требования к alpha quality в AVIF и к lossy-сжатию WebP.

Работа с двумя сторонами как с мини-лабораторией

Одна из недооценённых возможностей Squoosh — использовать обе панели не как «оригинал и результат», а как два независимых результата. Это превращает интерфейс в компактную лабораторию кодеков. Например, слева можно выбрать MozJPEG, справа WebP, затем подобрать каждому вариант, который визуально одинаково хорошо сохраняет детали. После этого размер отображается рядом с каждой стороной.

Второй полезный тест — один кодек с разными параметрами. Поставьте WebP на обе стороны, но справа снизьте Quality. Перемещая разделитель, вы быстро увидите момент, когда экономия перестаёт быть незаметной. Такой тест проще, чем сохранять несколько файлов и переключаться между ними в просмотрщике.

Для AVIF можно сравнивать различную субдискретизацию цветности или отдельное качество альфы. Чтобы тест оставался понятным, меняйте один параметр за раз. Если одновременно поменять Quality, Effort, Subsample chroma и Resize, невозможно определить, какая настройка вызвала обнаруженный дефект или уменьшение размера.

Фиксируйте удачные настройки хотя бы текстом. Для командной работы полезна простая запись: «обложки — 1600 px, WebP Quality около такого-то диапазона, проверка AVIF, без Reduce palette; скриншоты — OxiPNG, при необходимости palette». Это не универсальный закон, а воспроизводимая отправная точка для следующих файлов.

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

Когда повышать Effort, а когда Quality

Quality и Effort отвечают за разные вещи. Quality меняет допустимую степень потерь и, следовательно, напрямую влияет на визуальное сходство и размер. Effort меняет объём вычислительного поиска. Если картинка выглядит плохо, повышать Effort вместо Quality обычно бессмысленно: кодек будет дольше искать эффективное представление заданного уровня качества, а не «вернёт» потерянные детали по волшебству.

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

У OxiPNG ситуация аналогична: effort определяет глубину оптимизации, но не является скрытым ползунком качества. У AVIF связь особенно явно видна в реализации Squoosh: интерфейсная шкала Effort преобразуется во внутреннюю скорость кодека. Поэтому высокое значение следует воспринимать как «потратить больше времени», а не как «сделать картинку качественнее».

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

Работа с цветом и цветовой субдискретизацией

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

В AVIF Squoosh показывает конкретные варианты Subsample chroma. 4:4:4 сохраняет цветность с полной пространственной детализацией; 4:2:2 и 4:2:0 уменьшают её; 4:0:0 соответствует монохромному представлению. Выбор нельзя свести к правилу «4:4:4 всегда лучше»: он сохраняет больше данных и может увеличить файл. Для фотографии 4:2:0 часто рациональнее, а для цветного текста стоит сравнить 4:4:4.

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

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

Метаданные и то, что не видно в превью

Интерфейс Squoosh сфокусирован на растре и размере файла, а не на редактировании EXIF, IPTC или XMP как отдельной задаче. При перекодировании часть метаданных может не переноситься так, как в специализированном фотопроцессе. Если для проекта важны авторские поля, GPS, ориентация, цветовой профиль или служебные теги, проверяйте итоговый файл отдельным инструментом.

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

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

Как построить стабильный рабочий процесс

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

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

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

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

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

Squoosh полезнее сравнивать не по абстрактному числу функций, а по типу работы. ФотоМАСТЕР — полноценный редактор фотографий, ImageOptim — локальный массовый оптимизатор для macOS, Compressor.io — серверный веб-сервис сжатия. Эти инструменты пересекаются только частью задач, поэтому выбор зависит от того, нужно ли редактировать изображение, вручную исследовать кодеки, оптимизировать папку или получить быстрый серверный результат.

Squoosh и ФотоМАСТЕР

ФотоМАСТЕР нужен, когда изображение ещё не готово к публикации по содержанию. В нём есть ретушь портретов, удаление объектов, замена фона, инструменты геометрии, эффекты и поддержка RAW. Официальные материалы также описывают пакетную обработку. Поэтому сравнивать его с Squoosh только по размеру экспортированного JPEG некорректно: ФотоМАСТЕР решает более широкий этап подготовки снимка.

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

Практически инструменты могут дополнять друг друга. В ФотоМАСТЕР исправляют экспозицию, убирают лишний объект, ретушируют портрет, кадрируют или меняют фон. Затем экспортируют качественный мастер и открывают его в Squoosh, где подбирают конечные размеры и веб-кодек. Такой процесс избегает попытки делать ретушь инструментом сжатия и, наоборот, выбирать веб-кодек внутри редактора без визуального A/B.

Squoosh и ImageOptim

ImageOptim ориентирован на локальную оптимизацию файлов в macOS. В его рабочее окно можно перетащить несколько изображений, после чего программа запускает подходящие оптимизаторы; в наборе используются, в частности, MozJPEG, pngquant, Pngcrush, Zopfli и другие компоненты. Это хороший сценарий для папки готовых ресурсов, когда не требуется вручную разбирать каждый кодек на большом превью.

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

Для пользователя Windows или Linux нативное приложение ImageOptim не является прямой заменой, поскольку основной продукт ориентирован на macOS. Squoosh запускается в браузере на разных настольных системах, если поддерживается нужный WebAssembly и кодек. Но платформенная универсальность не компенсирует отсутствие пакетной очереди: это всё равно разные модели работы.

Squoosh и Compressor.io

Compressor.io решает похожую задачу через серверный сервис. Он принимает распространённые веб-форматы, включая JPEG, PNG, SVG, GIF и WebP, и предлагает режимы сжатия. Это удобно, если нужен простой результат без исследования параметров кодека, а серверная загрузка допустима по политике данных.

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

Squoosh даёт намного более подробную ручную работу с AVIF, цветовой субдискретизацией, effort, палитрой и A/B-превью. Compressor.io проще, когда подробные параметры не нужны. Кроме того, Compressor.io поддерживает некоторые типы вроде SVG и GIF как часть своего сервиса, тогда как Squoosh прежде всего ориентирован на растровую оптимизацию в редакторе и не заменяет специализированную работу с анимацией или векторной графикой.

Таким образом, вопрос выбора сводится к этапу процесса. Если нужно отредактировать само фото — нужен редактор класса ФотоМАСТЕР. Если нужно массово оптимизировать готовые файлы на macOS — полезен ImageOptim. Если допустима серверная загрузка и важна простота — подходит модель Compressor.io. Если нужен ручной контроль одного важного веб-изображения и сравнение современных кодеков — Squoosh даёт наиболее наглядный рабочий экран из этой четвёрки.

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

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

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

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

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

Не забывайте про имена и альтернативный текст: Squoosh ими не управляет. Имя файла задаётся на уровне файловой системы, alt — в WordPress. Оптимизация байтов не заменяет семантическое описание изображения, адаптивную разметку, lazy loading и правильные размеры в HTML. Squoosh отвечает только за подготовленный графический ресурс.

Когда стоит оставить исходный формат

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

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

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

Проверка перед публикацией

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

• Размеры в пикселях соответствуют реальному месту на странице.
• Maintain aspect ratio не позволил случайно растянуть изображение.
• На тексте и контрастных границах нет заметных ореолов.
• На небе, тенях и градиентах нет неприемлемых полос.
• Прозрачные края проверены хотя бы на светлом и тёмном фоне.
• Формат поддерживается CMS, CDN и целевыми браузерами проекта.
• Мастер-исходник сохранён отдельно от веб-версии.

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

Как не тратить время на лишние настройки

Начинайте с параметров, которые дают наибольший эффект. Первый — геометрия. Второй — выбор подходящего кодека. Третий — Quality в lossy-режиме. Только после этого имеет смысл разбираться с цветовой субдискретизацией, отдельным качеством альфы, noise synthesis, тайлами и другими расширенными пунктами. Такой порядок быстрее приводит к хорошему результату и делает причинно-следственные связи понятнее.

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

Если задача повторяется, используйте собственную отправную точку. Например, для фотографий сначала проверяйте WebP и AVIF, для скриншотов — OxiPNG и lossless WebP. Это не жёсткий пресет, а способ сократить число заведомо неподходящих вариантов. При необычном содержимом возвращайтесь к сравнению с нуля.

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

Итоговый подход к Squoosh

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

Рабочая стратегия проста: использовать качественный мастер, сначала убрать лишние пиксели, затем выбрать подходящий класс формата, подобрать Quality по визуальной границе и только после этого повышать Effort или трогать расширенные параметры. Для PNG-подобной графики отдельно проверяется палитра, для прозрачности — альфа-канал, для AVIF — совместимость конечной системы.

Ограничения Squoosh столь же важны, как его возможности. Он не ретуширует фотографию, не заменяет фон, не ведёт каталог и не даёт пакетной очереди в основном интерфейсе. Поэтому его не стоит заставлять выполнять работу ФотоМАСТЕР, ImageOptim или автоматизированного конвейера. Зато для одного важного веб-изображения он позволяет быстро понять, какие именно байты можно убрать без заметного ущерба.

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