Apresentação do Squoosh v2

Suporte a novos codecs, design atualizado e suporte a CLI.

Mariko Kosaka

O Squoosh é um app de compactação de imagens criado pela nossa equipe e lançado na Chrome Dev Summit 2018. Ele foi desenvolvido para facilitar a experimentação com diferentes codecs de imagem e para mostrar os recursos da Web moderna.

Hoje, estamos lançando uma atualização importante do app que aceita mais codecs, um novo design e uma nova maneira de usar o Squoosh na linha de comando chamada Squoosh CLI.

Agora oferecemos suporte a OxiPNG, MozJPEG, WebP e AVIF, além de codecs com suporte nativo no navegador. Um novo codec foi possibilitado novamente com o uso do WebAssembly. Com a compilação de um codificador e decodificador de codec como o módulo WebAssembly, os usuários podem acessar e testar codecs mais recentes, mesmo que o navegador preferido não seja compatível com eles.

Como iniciar a linha de comando Squoosh!

Desde o lançamento original em 2018, uma solicitação comum dos usuários era interagir com o Squoosh de maneira programática sem a interface. Esse caminho foi um pouco confuso, já que nosso app era uma interface com base nas ferramentas de codec da linha de comando. No entanto, entendemos o desejo de interagir com o pacote inteiro de codecs, e não com várias ferramentas. A Squoosh CLI faz exatamente isso.

Para instalar a versão Beta da CLI do Squoosh, execute npm i @squoosh/cli ou execute diretamente usando npx @squoosh/cli [parameters].

A CLI do Squoosh é escrita em Node e usa os mesmos módulos do WebAssembly usados pelo PWA. Com o uso extensivo de workers, todas as imagens são decodificadas, processadas e codificadas em paralelo. Também usamos o Rollup para agrupar tudo em um arquivo JavaScript e garantir que a instalação com npx seja rápida e perfeita. A CLI também oferece compactação automática, em que tenta reduzir a qualidade de uma imagem o máximo possível sem prejudicar a fidelidade visual (usando a métrica do Butteraugli).

Com a CLI do Squoosh, é possível compactar as imagens no seu app da Web em vários formatos e usar o elemento <picture> para que o navegador escolha a melhor versão. Também planejamos criar plug-ins para Webpack, Rollup e outras ferramentas de criação para tornar a compactação de imagens uma parte automática do seu processo de compilação.

Mudança do processo de build do Webpack para o Rollup

A mesma equipe que criou o Squoosh passou um tempo significativo analisando ferramentas de build este ano para o Tooling Report e decidiu mudar nosso processo de build do Webpack para o Rollup.

Inicialmente, o projeto começou com o Webpack porque queríamos testá-lo em equipe, e, na época, em 2018, o Webpack era a única ferramenta que nos deu controle suficiente para configurar o projeto da maneira que queríamos. Com o tempo, descobrimos que o sistema de plug-ins fácil e a simplicidade da Rollup com o ESM fizeram dela uma escolha natural para este projeto.

Design da interface atualizado

Também atualizamos o design da interface do app com blobs como um elemento visual. Isso é um trocadilho sobre como tratamos os dados no código. O Squoosh transmite dados de imagem como um blob, então parecia natural incluir alguns blobs no design (entendeu?).

O uso das cores também foi aprimorado, de modo que a cor era mais do que um destaque, mas também um vetor para distinguir e reforçar qual imagem está no contexto das opções. Resumindo, a página inicial é um pouco mais animada e a ferramenta em si é um pouco mais clara e concisa.

E agora?

Planejamos continuar trabalhando no Squoosh. À medida que o novo formato de imagem é lançado, queremos que os usuários tenham um local onde possam interagir com o codec sem muito trabalho. Também esperamos expandir o uso da Squoosh CLI e integrar mais ao processo de build de um aplicativo da Web.

O Squoosh sempre foi de código aberto, mas nunca nosso foco foi o crescimento da comunidade. Em 2021, planejamos expandir nossa base de colaboradores e melhorar o processo de integração ao projeto.

Você tem alguma ideia para o Squoosh? Informe-nos no Issue Tracker. A equipe está indo para as férias de inverno prolongadas, mas prometemos voltar para você no ano novo.