Поддержка новых кодеков, обновленный дизайн и поддержка командной строки!
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 CLI вы можете сжимать изображения в вашем веб-приложении в различные форматы и использовать элемент <picture> , чтобы браузер мог выбрать наилучшую версию. Мы также планируем разработать плагины для Webpack, Rollup и других инструментов сборки, чтобы сделать сжатие изображений автоматической частью вашего процесса сборки.
Процесс сборки изменен с Webpack на Rollup.
Та же команда, которая разработала Squoosh, в этом году потратила значительное количество времени на изучение инструментов сборки для Tooling Report и решила перейти с Webpack на Rollup в процессе сборки.
Изначально проект начинался с Webpack, потому что мы хотели попробовать его в команде, и на тот момент, в 2018 году, Webpack был единственным инструментом, который давал нам достаточно контроля для настройки проекта так, как мы хотели. Со временем мы обнаружили, что простая система плагинов Rollup и удобство использования ESM сделали его естественным выбором для этого проекта.
Обновлен дизайн пользовательского интерфейса.
Мы также обновили дизайн пользовательского интерфейса приложения, добавив в него визуальные элементы в виде blobs . Это небольшая игра слов, отражающая наш подход к обработке данных в коде. Squoosh передает данные изображений в виде «блобов», поэтому включение нескольких «блобов» в дизайн показалось нам вполне естественным (понимаете, о чем я?).
Использование цвета также было усовершенствовано, так что цвет стал не просто акцентом, но и инструментом, позволяющим различать и подчеркивать, какое изображение соответствует контексту предлагаемых вариантов. В целом, главная страница стала немного ярче, а сам инструмент — немного понятнее и лаконичнее.
Что дальше?
Мы планируем продолжить работу над Squoosh. По мере выхода нового формата образов мы хотим, чтобы у наших пользователей было место, где они могли бы экспериментировать с кодеком без лишних усилий. Мы также надеемся расширить использование Squoosh CLI и интегрировать его в процесс сборки веб-приложений.
Squoosh всегда был проектом с открытым исходным кодом, но мы никогда не уделяли должного внимания развитию сообщества. В 2021 году мы планируем расширить базу участников и улучшить процесс адаптации новых членов проекта.
У вас есть какие-нибудь идеи для Squoosh? Пожалуйста, сообщите нам об этом в нашей системе отслеживания проблем . Команда уходит в длительный зимний отпуск, но мы обещаем связаться с вами в новом году.