Поддержка новых кодеков, обновленный дизайн и поддержка CLI!
Squoosh — это приложение для сжатия изображений, созданное нашей командой и представленное на Chrome Dev Summit 2018 . Мы создали его, чтобы можно было легко экспериментировать с различными кодеками изображений и продемонстрировать возможности современной сети.
Сегодня мы выпускаем крупное обновление приложения с большей поддержкой кодеков, новым дизайном и новым способом использования Squoosh в командной строке под названием Squoosh CLI.
Поддержка новых кодеков
Теперь мы поддерживаем OxiPNG, MozJPEG, WebP и AVIF в дополнение к кодекам, изначально поддерживаемым вашим браузером. Новый кодек снова стал возможен благодаря использованию WebAssembly. Скомпилировав кодировщик и декодер кодека в виде модуля WebAssembly, пользователи могут получить доступ к новым кодекам и экспериментировать с ними, даже если их любимый браузер их не поддерживает.
Запускаем командную строку Squoosh!
С момента первого запуска в 2018 году распространенным запросом пользователей было программное взаимодействие со Squoosh без пользовательского интерфейса. Мы чувствовали некоторое противоречие по поводу этого пути, поскольку наше приложение представляло собой пользовательский интерфейс поверх инструментов кодирования на основе командной строки. Однако мы понимаем желание взаимодействовать со всем пакетом кодеков, а не с несколькими инструментами. Squoosh CLI делает именно это.
Вы можете установить бета-версию Squoosh CLI, запустив npm i @squoosh/cli или запустив ее напрямую с помощью npx @squoosh/cli [parameters] .
Интерфейс командной строки Squoosh написан на Node и использует те же модули WebAssembly, что и PWA. Благодаря широкому использованию рабочих процессов все изображения декодируются, обрабатываются и кодируются параллельно. Мы также используем Rollup для объединения всего в один файл JavaScript, чтобы обеспечить быструю и беспроблемную установку через npx . Интерфейс командной строки также предлагает автоматическое сжатие, при котором он пытается максимально снизить качество изображения без ухудшения визуальной точности (с использованием метрики Баттераугли ).
С помощью интерфейса командной строки Squoosh вы можете сжимать изображения в своем веб-приложении в несколько форматов и использовать элемент <picture> , чтобы позволить браузеру выбрать лучшую версию. Мы также планируем создать плагины для Webpack, Rollup и других инструментов сборки, чтобы сделать сжатие изображений автоматической частью процесса сборки.
Изменение процесса сборки с Webpack на Rollup
Та же команда, которая создала Squoosh, в этом году потратила значительное количество времени на изучение инструментов сборки для Tooling Report и решила переключить наш процесс сборки с Webpack на Rollup.
Первоначально проект был запущен с помощью Webpack, потому что мы хотели попробовать его всей командой, и на тот момент, в 2018 году, Webpack был единственным инструментом, который давал нам достаточный контроль, чтобы настроить проект так, как мы хотели. Со временем мы обнаружили, что простая система плагинов Rollup и простота использования ESM сделали его естественным выбором для этого проекта.
Обновленный дизайн пользовательского интерфейса
Мы также обновили дизайн пользовательского интерфейса приложения, включив в него blobs в качестве визуального элемента. Это небольшой каламбур о том, как мы обращаемся с данными в нашем коде. Squoosh передает данные изображения в виде BLOB-объектов, поэтому было вполне естественно включить в дизайн несколько BLOB-объектов (понимаете?).
Использование цвета также было усовершенствовано, так что цвет стал не просто акцентом, но и вектором, позволяющим различать и подчеркивать, какое изображение находится в контексте вариантов. В целом, домашняя страница стала более яркой, а сам инструмент стал более понятным и кратким.
Что дальше ?
Мы планируем продолжать работу над Squoosh. По мере выхода нового формата изображения мы хотим, чтобы у наших пользователей было место, где они могли бы играть с кодеком без тяжелой работы. Мы также надеемся расширить использование Squoosh CLI и больше интегрировать его в процесс сборки веб-приложения.
Squoosh всегда имел открытый исходный код, но мы никогда не уделяли внимания расширению сообщества. В 2021 году мы планируем расширить базу участников и улучшить процесс адаптации к проекту.
Есть ли у вас какие-нибудь идеи для Squosh? Пожалуйста, сообщите нам об этом в нашем трекере проблем . Команда отправляется на продолжительные зимние каникулы, но мы обещаем вернуться к вам в новом году.