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

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

Squish от Addy Osmani представляет собой браузерный инструмент пакетного сжатия и конвертации изображений с WebAssembly-кодеками; заявлены AVIF, JPEG, JPEG XL, PNG и WebP, а обработка не требует отправки изображений на сервер, согласно репозиторию проекта. Ниже размещена наша адаптация его логики обработки: не ссылка на чужой сервис и не имитация с заранее приготовленными результатами.

Что находится прямо на этой странице

Мастерская использует оригинальные кодеки jSquash из той же семьи пакетов, что подключены в исходном коде Squish. Интерфейс, ограничения очереди, сравнение, уменьшение размера и ZIP подготовлены для этой статьи; это адаптация, а не неизменённая копия официального приложения.

• Четыре образца: натюрморт с мелкими деталями, иллюстрация с крупными буквами, макет с мелким текстом и полупрозрачные фигуры.
• Восемь пресетов: варианты WebP, JPEG для фотографии и миниатюры, PNG без потерь, AVIF и эксперимент с JPEG XL.
• Свои файлы: статичные JPEG, PNG и WebP; до восьми файлов в очереди, до 12 МиБ и 6 мегапикселей на файл.
• Реальное сравнение: размеры в байтах, граница «до/после», масштаб, три уровня качества и скачивание отдельных результатов или ZIP.

Мастерская: сожмите изображение сами

Для первого запуска выберите «Натюрморт», оставьте WebP с качеством 75 и нажмите «Обработать очередь». После завершения подвигайте границу сравнения, переключитесь на 100% и оцените края листьев, текстуру дерева и мягкие переходы света.

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

Практические эксперименты без своих файлов

Не ищите универсальное положение ползунка. У разных изображений разные слабые места, поэтому ниже несколько коротких проверок, которые можно повторить в мастерской.

• Фотография и детали: добавьте натюрморт, обработайте его в WebP, затем нажмите «Сравнить качество 35 / 65 / 90». Откройте каждый вариант и сравните размер с читаемостью текстур; значения здесь являются настройкой кодека, а не процентом сохранённой информации.
• Мелкий текст: выберите «Текст и интерфейс», сначала JPEG с низким качеством, затем PNG без уменьшения. Посмотрите на тонкие линии и буквы при 100%: ориентируйтесь на читаемость, а не только на размер файла.
• Прозрачность: откройте полупрозрачные фигуры и сравните PNG или WebP с JPEG. В JPEG мастерская явно подставляет белый либо тёмно-бирюзовый фон; фон выбирается до обработки.
• Миниатюра: примените пресет «JPEG: миниатюра» к иллюстрации. Здесь одновременно меняются формат, качество и максимальная сторона, поэтому уменьшение веса нельзя приписывать только кодеку.
• Одинаковые условия: оставьте исходный размер и один образец, последовательно проверьте WebP, JPEG и AVIF. Одинаковое число качества в разных кодеках не является обещанием одинакового визуального качества.
• Пакет: добавьте четыре образца, запустите обработку и скачайте ZIP. В архив попадают только готовые результаты; имена пронумерованы, чтобы одноимённые исходники не затёрли друг друга.
• Файл стал больше: преобразуйте уже компактное изображение в PNG или увеличьте качество. Мастерская не скрывает отрицательную экономию: если результат больше, так и будет написано.
• Долгая обработка: запустите AVIF или JPEG XL на более крупном файле, затем остановите очередь. Уже готовые результаты останутся, незавершённые можно обработать повторно.

Встроенный натюрморт создан с ИИ для этой проверки, иллюстрация и технические макеты тоже подготовлены специально. Измеряемые размеры не подставлены заранее: они вычисляются после каждого реального кодирования.

Как выбирать формат и качество

jSquash предоставляет JPEG-кодек на MozJPEG, WebP на libwebp, AVIF на libavif и JPEG XL на libjxl, а PNG-кодирование и оптимизация OxiPNG вынесены в отдельные пакеты, как указано в описании библиотеки. В нашей мастерской к PNG-кодированию дополнительно подключён OxiPNG; это отдельный этап адаптации исходного примера Squish.

Начальные значения качества у официального Squish составляют 50 для AVIF и 75 для JPEG, JPEG XL и WebP, а PNG обозначен как lossless, согласно README. Это удобная стартовая точка, но не обязательный рецепт для каждого изображения.

Как устроена локальная обработка

Исходный Squish построен на React, TypeScript, Vite и jSquash с WebAssembly, согласно описанию технологии. WebAssembly здесь выполняет работу кодеков, а не является отдельным облачным сервисом.

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

Кодеки работают в отдельном Web Worker, а очередь обрабатывается последовательно. Это позволяет остановить вычисление, не требуя специальных настроек cross-origin isolation на вашем WordPress; стоимость сложного кодирования при этом всё равно оплачивается временем процессора и памятью устройства посетителя.

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

Ограничения, которые важно знать

• Входные форматы этой версии: только статичные JPEG, PNG и WebP. Официальный Squish заявляет более широкий набор, включая AVIF и JXL, в README; здесь они доступны как выходные форматы, а не как загрузка.
• Анимация: GIF не принимается, APNG и анимированный WebP отклоняются. Мастерская не выдаёт один кадр за сохранённую анимацию.
• Размер и память: максимум 8 файлов, 12 МиБ на файл, 6 мегапикселей и 8192 px по стороне. Эти ограничения принадлежат нашей мастерской, а не объявлены универсальными лимитами Squish.
• Цвет и метаданные: обработка 8-битная, 16-битный PNG отклоняется, метаданные и исходные цветовые профили не сохраняются. Это не инструмент для архивного хранения оригиналов или цветопробы.
• Ориентация: JPEG-декодер настроен учитывать EXIF-ориентацию. Всё равно просмотрите результат, особенно если исходник получен с камеры или телефона.
• Время: на один файл установлен предел 90 секунд. Если он превышен, попробуйте меньшую сторону, другой формат или более мощное устройство.
• JPEG XL: наш просмотрщик декодирует его через WASM. Перед использованием на реальном сайте отдельно проверьте поддержку у целевых посетителей; удачный предпросмотр здесь её не гарантирует.
• Сохранение: после закрытия или перезагрузки страницы очередь пропадает. Скачайте нужные результаты до ухода со страницы.

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

Как запустить оригинальный Squish у себя

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

git clone https://github.com/addyosmani/squish.git
cd squish
npm install
npm run dev

# Сборка для размещения
npm run build

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

Squish распространяется по MIT с уведомлением об авторских правах Addy Osmani, и при распространении существенных частей кода нужно сохранить текст уведомления и лицензии, согласно LICENSE. Кодеки jSquash имеют собственные уведомления, включая Apache-2.0, которые перечислены в репозитории jSquash; в нашей сборке файлы лицензий сохранены рядом с мастерской.

Какой результат считать хорошим

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

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

Оригинальный инструмент доступен на сайте Squish, а код находится в GitHub-репозитории. Для других интерактивных задач в блоге есть мастерская NumberFlow и примеры CSS-анимаций Animista.