Otimize imagens no navegador com Squoosh e WebAssembly

Kevin van Zonneveld

Cofundador · Amsterdã, Países Baixos ·

Otimizar imagens é essencial para o desempenho na web, com impacto direto no tempo de carregamento, na experiência do usuário e no posicionamento em SEO. Tradicionalmente, a otimização de imagens exigia software de desktop ou processamento no servidor. Hoje, porém, ferramentas modernas que rodam no navegador e usam WebAssembly permitem otimizar imagens com eficiência diretamente no seu navegador.

Por que otimizar imagens no navegador?

A otimização no navegador oferece várias vantagens:

Retorno imediato: veja na hora uma prévia das imagens otimizadas e dos ajustes de qualidade.
Nenhuma instalação de software: acessível em qualquer dispositivo com um navegador moderno.
Privacidade: as imagens são processadas localmente no seu dispositivo e nunca são enviadas a servidores externos.
Praticidade: otimize imagens na hora, sem interromper seu fluxo de trabalho com configurações complexas.

O que é o Squoosh?

O Squoosh é um aplicativo web de código aberto para otimização de imagens no navegador, desenvolvido pela equipe do Google Chrome Labs. Ele usa WebAssembly para executar algoritmos poderosos de compressão de imagens diretamente no navegador, oferecendo uma interface simples para tarefas complexas sem exigir uploads para servidores. Observe que, embora o Squoosh também tivesse uma ferramenta de interface de linha de comando (CLI), a CLI não é mais mantida ativamente desde o início de 2023. Este post foca no aplicativo web.

Principais recursos do aplicativo web Squoosh:

Oferece codificadores JPEG, PNG, WebP, AVIF e JPEG XL experimental. O MozJPEG gera arquivos JPEG; o OxiPNG otimiza arquivos PNG. Eles são codificadores, não formatos de imagem adicionais.
Prévia em tempo real com um controle deslizante de comparação lado a lado
Configurações de compressão ajustáveis com retorno visual instantâneo
Pode funcionar offline depois que o aplicativo e os recursos de codec necessários forem armazenados em cache
Não exige conta nem cadastro

Como usar o aplicativo web Squoosh

Veja como otimizar imagens diretamente no navegador usando o Squoosh:

Acesse squoosh.app no seu navegador.
Arraste e solte sua imagem na interface ou clique para selecionar um arquivo.
À esquerda, você vê a imagem original; à direita, a versão processada.
Selecione o formato de saída desejado (por exemplo, WebP, AVIF, MozJPEG) no menu suspenso do painel direito.
Ajuste as configurações de qualidade (como o controle deslizante de qualidade ou opções específicas do formato) para equilibrar o tamanho do arquivo e a qualidade visual. O tamanho estimado do arquivo é atualizado em tempo real.
Use o controle deslizante de comparação sobreposto à imagem para avaliar de perto as diferenças de qualidade. Aumente o zoom para uma inspeção detalhada.
Quando estiver satisfeito, clique no botão de download no canto inferior direito para salvar a imagem otimizada.

Formatos compatíveis e opções de otimização

O Squoosh é compatível com vários formatos de imagem, cada um com opções de otimização específicas:

Otimização de JPEG (com MozJPEG)

Controle deslizante de qualidade (0-100)
Opções avançadas, como subamostragem de croma e renderização progressiva

Otimização de PNG (com OxiPNG)

Controle deslizante de esforço (controla o nível de compressão)
A redução de paleta separada pode diminuir ainda mais o tamanho, mas pode descartar cores; deixe-a desativada quando precisar preservar os pixels sem perdas.

Otimização de WebP

Controle deslizante de qualidade
Opção sem perdas
Controle deslizante de esforço (controla velocidade de codificação vs. compressão)
Configurações de qualidade alfa para transparência

Otimização de AVIF

Controle deslizante de qualidade
Controle deslizante de esforço
Opções de espaço de cor (como YUV 4:2:0, YUV 4:4:4)
Configurações avançadas de codificação

Otimização de JPEG XL (experimental)

Controle deslizante de qualidade
Controle deslizante de esforço/velocidade
Nível de velocidade de decodificação

Comparação da qualidade da imagem antes e depois da otimização

O Squoosh oferece um controle deslizante interativo sobreposto à imagem, que permite comparar diretamente as versões original e otimizada lado a lado. Essa comparação visual é essencial para encontrar o equilíbrio ideal entre a redução do tamanho do arquivo e uma qualidade visual aceitável para o seu caso de uso específico.

Ao otimizar imagens, preste muita atenção a:

Legibilidade do texto: garanta que o texto continue nítido e legível.
Precisão de cores: verifique se há mudanças significativas de cor.
Nitidez das bordas: procure desfoque ou artefatos ao redor das bordas.
Detalhes de textura: garanta que texturas importantes sejam preservadas.
Artefatos de compressão: fique atento a blocos visíveis (JPEG/AVIF) ou a efeito de faixas (gradientes).

Resultados de otimização no mundo real

Os resultados da otimização variam significativamente conforme o conteúdo da imagem original, o formato escolhido e as configurações de qualidade selecionadas. Ainda assim, muitas vezes é possível obter reduções significativas no tamanho dos arquivos:

Fotografias: converter para WebP ou AVIF com configurações visualmente sem perdas muitas vezes gera reduções de tamanho substanciais em comparação com JPEG.
Capturas de tela com texto: a otimização de PNG (como o OxiPNG) ou a conversão para WebP sem perdas pode reduzir o tamanho do arquivo mantendo a nitidez perfeita.
Ilustrações e gráficos: dependendo da complexidade, formatos como PNG otimizado, WebP ou até AVIF podem oferecer boa compressão.

Essas reduções podem melhorar significativamente o tempo de carregamento das páginas, reduzir o consumo de banda e aprimorar a experiência do usuário, especialmente em dispositivos móveis ou conexões mais lentas.

Limitações da otimização no navegador com o Squoosh

Embora o aplicativo web Squoosh seja poderoso e prático, ele tem algumas limitações:

Processo manual: projetado para otimizar uma imagem por vez; a interface web não tem processamento em lote integrado.
Sem automação: não pode ser facilmente integrado a pipelines de build automatizados nem a fluxos de trabalho no servidor. É uma ferramenta independente, não uma biblioteca.
Uso de recursos do navegador: otimizar imagens muito grandes ou usar configurações de alto esforço pode consumir muitos recursos e deixar o navegador lento, ou até fazê-lo parar de responder em dispositivos menos potentes.
Compatibilidade com navegadores: embora funcione em navegadores modernos, o desempenho e o suporte a recursos podem variar um pouco entre navegadores e versões.

Como o WebAssembly aprimora a otimização de imagens no Squoosh

WebAssembly (Wasm) é um formato de instruções binárias que permite executar com alto desempenho, diretamente nos navegadores, código escrito originalmente em linguagens como C++ ou Rust. O Squoosh usa WebAssembly para executar com eficiência, no navegador, codecs de imagem sofisticados (como MozJPEG, OxiPNG e codificadores AVIF).

Principais benefícios do uso de WebAssembly no Squoosh:

Velocidade quase nativa: os algoritmos de compressão rodam muito mais rápido do que implementações equivalentes em JavaScript, o que deixa a ferramenta responsiva.
Acesso a codecs poderosos: permite usar no lado do cliente codecs complexos e computacionalmente intensivos.
Consistência entre plataformas: o mesmo código Wasm roda em diferentes navegadores compatíveis com o padrão.
Segurança: o WebAssembly é executado dentro do sandbox de segurança do navegador.

É importante entender que o Squoosh usa WebAssembly internamente para viabilizar seus recursos; ele não oferece uma biblioteca nem um mecanismo para você integrar diretamente esses codecs baseados em Wasm às suas próprias aplicações web.

Abordagens alternativas para otimização de imagens

Dependendo das suas necessidades e do seu fluxo de trabalho, você pode considerar estas alternativas à otimização manual no navegador:

Aplicativos para desktop

ImageOptim (macOS): ferramenta gratuita e de código aberto focada em otimização sem perdas e remoção de metadados. Boa para processamento em lote.
FileOptimizer (Windows): ferramenta gratuita compatível com vários tipos de arquivo, incluindo imagens, com vários plugins de otimização.
GIMP / Photoshop: editores de imagem completos oferecem “Salvar para Web” ou opções de exportação com controles de qualidade.

Ferramentas de linha de comando

Sharp: uma biblioteca de processamento de imagens de alto desempenho para Node.js, excelente para integrar a scripts de build ou serviços de back-end.
ImageMagick: um kit de ferramentas de código aberto versátil e poderoso para processamento e conversão de imagens via linha de comando.
CLIs de codecs independentes: ferramentas como cjpeg (MozJPEG), pngquant ou avifenc oferecem controle refinado para formatos específicos.

Soluções e serviços no servidor

Pipelines de build automatizados: integre ferramentas de CLI (como Sharp ou ImageMagick) ao seu processo de CI/CD para otimizar imagens automaticamente a cada deploy.
Otimização via CDN: muitas redes de distribuição de conteúdo (CDNs) oferecem recursos para otimizar imagens automaticamente e na hora, com base nos recursos do dispositivo ou navegador que faz a requisição.
Serviços especializados: serviços em nuvem dedicados ao processamento e à entrega de imagens.

Casos de uso práticos do Squoosh

O aplicativo web Squoosh é especialmente útil para:

Criadores de conteúdo e blogueiros: otimizar imagens rapidamente antes de enviá-las para sites ou redes sociais.
Desenvolvedores web: experimentar diferentes formatos (como AVIF vs. WebP) e configurações de qualidade durante o desenvolvimento ou em tarefas pontuais rápidas.
Designers: preparar recursos web otimizados e visualizar o impacto das configurações de compressão.
Donos de pequenas empresas: otimizar imagens do site facilmente, sem precisar de conhecimento técnico nem instalar software.
Qualquer pessoa que precise de otimização rápida e privada: quando você precisa otimizar algumas imagens sem enviá-las para lugar nenhum.

Conclusão

A otimização de imagens no navegador com o Squoosh oferece uma solução poderosa, acessível e que preserva a privacidade para desenvolvedores, designers e criadores de conteúdo que buscam melhorar o desempenho na web. Ao usar WebAssembly, o Squoosh traz compressão de imagens de alto desempenho diretamente para o navegador, permitindo reduzir significativamente o tamanho dos arquivos, muitas vezes sem comprometer a qualidade visual. Embora seja mais adequado para tarefas de otimização manual, sua facilidade de uso e o retorno imediato fazem dele uma ferramenta valiosíssima para melhorar o tempo de carregamento de sites e a experiência do usuário.

Se o seu fluxo de trabalho exige otimização de imagens automatizada no servidor, processamento em lote ou integração com aplicações, considere um serviço dedicado. O Robot 🤖 /image/optimize da Transloadit, parte da nossa completa API de processamento de imagens, oferece compressão de imagens eficiente e de alta qualidade que pode ser facilmente integrada à sua infraestrutura existente, para uma otimização automatizada e fluida em escala.