Squish – сжимай изображения в браузере без потери качества

Squish Preview

Знакома ситуация, когда нужно быстро подготовить десяток изображений для сайта, но не хочется возиться с тяжеловесными редакторами? Или когда клиент присылает фото в неподходящем формате, а вам нужно срочно их конвертировать? Представляю Squish – современный инструмент для сжатия изображений, который работает прямо в браузере и не требует загрузки файлов на сервер.

Что такое Squish?

Squish – это open-source проект от Addy Osmani (инженера Google Chrome), который позволяет сжимать изображения в браузере с использованием WebAssembly. Это значит, что вся обработка происходит локально – ваши фото никуда не уходят, что особенно важно для конфиденциальных данных.

Проект поддерживает все современные форматы:

AVIF (новый стандарт сжатия)
JPEG/JPG (через MozJPEG)
JPEG XL
PNG (оптимизация через OxiPNG)
WebP

Почему стоит попробовать?

1. Все в одном месте

Больше не нужно переключаться между разными сервисами для работы с разными форматами. Хотите конвертировать PNG в AVIF? Легко! Нужно сжать несколько JPEG без потери визуального качества? Squish справится.

2. Работает прямо в браузере

Никаких загрузок на сервер – все обрабатывается локально через WebAssembly. Это дает:

Конфиденциальность – ваши изображения остаются на вашем компьютере
Скорость – не нужно ждать загрузки/выгрузки
Доступность – работает даже без интернета после первой загрузки страницы

3. Интуитивный интерфейс

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

Технические детали

Под капотом у Squish:

React + TypeScript для интерфейса
Vite для быстрой сборки
WebAssembly-кодеки для работы с изображениями
Tailwind CSS для стилей

Интересно, что проект использует библиотеку jSquash, которая объединяет лучшие open-source инструменты для работы с изображениями: MozJPEG, libavif, libjxl и другие.

Как начать использовать?

Для разового использования можно зайти на официальный сайт. Но если вы разработчик и хотите встроить Squish в свой проект:

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

Кому особенно пригодится?

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

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