Compatibilidade com novos codecs, design atualizado e suporte para CLI!
O Squoosh é um app de compactação de imagens criado pela nossa equipe e estreou no Chrome Dev Summit 2018. Ele foi criado para facilitar a experiência com diferentes codecs de imagem e mostrar os recursos da Web moderna.
Hoje, estamos lançando uma atualização importante para o app com mais suporte a codecs, um novo design e uma nova maneira de usar o Squoosh na linha de comando, chamada Squoosh CLI.
Compatibilidade com novos codecs
Agora oferecemos suporte a OxiPNG, MozJPEG, WebP e AVIF, além de codecs com suporte nativo no seu navegador. Um novo codec foi possível novamente com o uso do WebAssembly. Ao compilar um codificador e decodificador de codec como um módulo WebAssembly, os usuários podem acessar e testar codecs mais recentes, mesmo que o navegador de sua preferência não tenha suporte a eles.
Iniciando uma 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 interface. Isso gerou um pouco conflito, já que nosso app era uma interface com ferramentas de codec baseadas em linha de comando. No entanto, entendemos o desejo de interagir com todo o pacote de codecs em vez de várias ferramentas. A CLI Squoosh faz exatamente isso.
Instale a versão Beta da CLI Squoosh executando npm i @squoosh/cli ou execute-a diretamente usando npx @squoosh/cli [parameters].
A CLI do Squoosh é escrita em Node e usa exatamente os mesmos módulos WebAssembly que o PWA
usa. Por meio do 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 via npx seja rápida e simples. A CLI também oferece compactação automática, que tenta reduzir o máximo possível a
qualidade de uma imagem sem degradar 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 permitir que o navegador escolha a melhor versão. Também planejamos criar plug-ins para Webpack, Rollup e outras ferramentas de compilação. Assim, a compactação de imagens é uma parte automática do 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 as ferramentas de compilação do Relatório de ferramentas este ano e decidiu mudar nosso processo de criação do Webpack para o Rollup.
O projeto começou com o Webpack, porque queríamos testá-lo em equipe, e, em 2018, o Webpack era a única ferramenta que nos deu controle suficiente para configurar o projeto do jeito que queríamos. Com o tempo, descobrimos que o sistema fácil de plug-ins do Rollup e a simplicidade com o ESM fizeram dele uma escolha natural para este projeto.
Design atualizado da interface
Também atualizamos o design da interface do app, com blobs como elemento visual. É um trocadilho
sobre como tratamos 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 de cores também foi aprimorado, para que elas fossem mais do que um destaque, mas também um vetor para distinguir e reforçar qual imagem estava no contexto das opções. Resumindo, a página inicial é um pouco mais vibrante, e a ferramenta em si é um pouco mais clara e concisa.
O que vem a seguir?
Planejamos continuar trabalhando no Squoosh. Com o lançamento do novo formato de imagem, queremos oferecer aos usuários um lugar onde possam usar o codec sem esforço. Além disso, esperamos expandir o uso da CLI Squoosh e integrá-lo mais ao processo de criação de aplicativos da Web.
O Squoosh sempre foi de código aberto, mas nunca tivemos o foco em fazer a comunidade crescer. 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 nosso Issue Tracker. A equipe está indo prolongar as férias de inverno, mas prometemos entrar em contato com você no ano novo.