Suporte a novos codecs, design atualizado e suporte a CLI.
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.
Suporte a novos codecs
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.