Otimizar imagens no navegador com Squoosh e WebAssembly

Comece com WebP para uma foto e OxiPNG para uma captura de tela com texto. Para um logotipo transparente, experimente WebP sem perdas e confira as bordas em fundos claros e escuros. O Squoosh⁠ permite comparar essas opções no navegador e baixar uma imagem separada para seu site.

Por que otimizar imagens no navegador?

O Squoosh é uma aplicação de código aberto do GoogleChromeLabs para comprimir manualmente uma imagem por vez. Você pode comparar a textura de uma foto ou o texto pequeno de uma captura de tela enquanto altera as configurações de codificação. Não é necessário ter uma conta. Segundo sua documentação de privacidade⁠, o processamento de imagens acontece no seu dispositivo, mas a aplicação usa ferramentas de análise que incluem os tamanhos dos arquivos antes e depois. O processamento local de imagens não significa que a página não faça requisições de rede.

Como usar a aplicação web do Squoosh

Use um navegador de desktop atualizado e mantenha seu arquivo original. Esses controles foram verificados no Chrome 151 no Linux, com imagens estáticas comuns em sRGB de 8 bits. Este tutorial não aborda imagens animadas, HDR nem arquivos CMYK voltados à impressão.

1. Abra squoosh.app⁠ enquanto estiver online. Arraste uma foto local, uma captura de tela ou um PNG com transparência, ou clique na área de seleção de imagem para escolher o arquivo.
2. Mantenha o menu Compress à esquerda em Original Image. No menu Compress à direita, escolha um codificador da tabela abaixo.
3. Mantenha Resize e Reduce palette desativados na primeira comparação. O redimensionamento altera as dimensões, e a redução da paleta pode descartar cores independentemente do codificador.
4. Aplique as configurações iniciais abaixo e aguarde a codificação terminar e o tamanho do arquivo resultante aparecer. O tamanho exibido descreve o resultado codificado; ele é arredondado, então use o tamanho em bytes do arquivo salvo para uma comparação exata.
5. Se o aviso de disponibilidade offline cobrir os controles de zoom, escolha DISMISS. Mova o divisor pela imagem. Inspecione com zoom de 100% e depois amplie textos pequenos, texturas finas, gradientes e bordas transparentes. Aumente a qualidade se a versão menor prejudicar detalhes de que você precisa.
6. Escolha o link Download à direita. O download à esquerda salva o original. Salve a versão candidata com um nome diferente e abra esse arquivo antes de substituir um recurso do site.

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

Estas são configurações iniciais, não garantias de qualidade.

JPEG: Escolha MozJPEG se precisar de um arquivo JPEG. Comece com Quality: 75 e compare o arquivo salvo com o original. JPEG não preserva transparência, então use esse formato para imagens opacas. MozJPEG é o nome do codificador, não um formato de arquivo separado.

PNG: OxiPNG produz PNG. Seu controle Effort: altera o esforço de compressão, não a qualidade da imagem. É uma boa primeira opção para capturas de tela, nas quais até pequenas alterações podem borrar o texto. Um nível de esforço mais alto exige mais tempo de codificação; não há garantia de que o arquivo resultante será menor.

WebP: Para texto opaco, compare também WebP com Lossless e Slight loss: 0. Para transparência, ative Preserve transparent data. Essa opção preserva os dados RGB ocultos passados ao codificador; ela não pode restaurar valores já alterados durante a decodificação no navegador. A implementação das configurações de WebP⁠ mostra que aumentar o nível de perda leve permite o processamento quase sem perdas mesmo com a opção sem perdas ativada.

AVIF: Experimente AVIF para uma fotografia opaca, começando com Lossless desativado, Quality: 50 e Effort: 4. Compare o arquivo baixado com sua versão candidata em WebP. As escalas de qualidade diferem entre os codificadores: AVIF em 50 e WebP em 75 não representam metas de qualidade equivalentes.

O menu também contém JPEG XL (beta). A presença de um codificador no Squoosh não comprova que seu navegador de destino ou visualizador de imagens é compatível com o arquivo resultante. Use os formatos acima neste tutorial e confira a imagem baixada nos navegadores aos quais você pretende fornecê-la.

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

“Visualmente aceitável” e “sem perdas” respondem a perguntas diferentes. Uma foto com perdas pode parecer aceitável no tamanho em que é exibida, mesmo tendo pixels decodificados diferentes. Um codec sem perdas preserva os pixels que recebe, mas o Squoosh primeiro desenha as imagens decodificadas em um canvas do navegador⁠. Essa etapa pode alterar os valores de cor, especialmente em áreas com transparência parcial. Nem o OxiPNG nem a opção sem perdas do WebP garantem a preservação exata dos valores RGBA originais em todo o processamento da aplicação.

Para uma captura de tela, inspecione traços finos e textos pequenos. Para uma foto, inspecione texturas, gradientes, alterações de cor e artefatos de compressão. Para um logotipo, inspecione as bordas transparentes no fundo em que ele será usado. A prévia ajuda a escolher uma versão candidata; inspecionar o arquivo baixado permite conferir se você salvou o resultado pretendido. Se precisar de pixels exatos ou dos metadados originais, use um fluxo de trabalho nativo e verifique essas propriedades separadamente.

Verificar o arquivo baixado

Abra a versão candidata no navegador de destino ou no visualizador de imagens. Confirme o formato, as dimensões e a transparência e compare seu tamanho real em bytes com o original. Mantenha o arquivo menor somente se a aparência e a compatibilidade atenderem às suas necessidades. Um arquivo de origem já comprimido pode produzir uma versão candidata maior, e recodificar um JPEG introduz outra geração com perdas.

Um hash diferente do arquivo comprimido não comprova perda de qualidade. Por outro lado, dimensões iguais e uma prévia que funciona não comprovam que os pixels são idênticos. A ausência estrita de perdas exige comparar os pixels decodificados com a mesma interpretação de cor e alfa, incluindo as cores ocultas em pixels totalmente transparentes; a inspeção visual não pode provar essa igualdade.

Preparar uma sessão offline

O Squoosh armazena em cache os recursos da aplicação e dos codecs por meio de um service worker⁠. Faça a preparação no mesmo perfil do navegador que você usará offline:

1. Na primeira visita, aguarde Ready to work offline. Enquanto estiver online, abra uma imagem local e conclua uma codificação e um download com cada codec que pretende usar. A mensagem inicial, por si só, não verifica se esses codecs estão disponíveis.
2. Desconecte-se da rede e recarregue a mesma aba. Escolha outra imagem local, repita as configurações pretendidas e confira o arquivo recém-baixado. Isso testa um novo carregamento, em vez de um codec que ainda está na memória.
3. Se a codificação ou o recarregamento falhar, reconecte-se, recarregue o Squoosh enquanto estiver online e repita a codificação e o download. Depois, teste novamente offline. Use apenas um codec que passe na sua verificação offline ou permaneça online para essa conversão.

Na configuração do Chrome testada, o WebP concluiu essa sequência de recarregamento e download offline. O OxiPNG falhou após o recarregamento, apesar de a preparação online ter sido bem-sucedida. Não presuma que todos os codificadores do menu estão disponíveis offline. Mantenha os dados armazenados pelo site; se eles forem apagados ou removidos do cache pelo navegador, você precisará preparar e testar novamente.

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

A interface web processa uma imagem por vez. Imagens grandes e níveis de esforço altos podem consumir bastante memória e CPU, então comece com uma imagem de tamanho modesto e reduza o esforço se a codificação travar. Se um codec falhar, reconecte-se para carregar seus recursos e experimente outro codificador. Preserve o arquivo de origem em vez de usar um download parcial ou não verificado.

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

Os projetos de codecs⁠ do Squoosh geram código de integração em JavaScript e módulos WebAssembly para codecs como MozJPEG e WebP. Isso permite que a aplicação execute esses codificadores localmente. Você não precisa escrever WebAssembly nem instalar as ferramentas de compilação dos codecs para usar a interface. A velocidade de codificação ainda depende da imagem, das configurações e do dispositivo.

Abordagens alternativas para otimização de imagens

Para um processamento de PNG reproduzível, o tutorial do Oxipng nativo explica como gerar arquivos separados e configurar a preservação de pixels. Para processar uploads em uma aplicação, consulte o Robot 🤖 /image/optimize da Transloadit e a API de processamento de imagens.