Ferramenta de otimização de GIF usando WebAssembly e Gifsicle – Agentic Engineering Patterns

Gosto de incluir demos GIF animados em meus escritos online, geralmente gravados com LICEcap. Há um exemplo no capítulo Explicações interativas.

Esses GIFs podem ser bem grandes. Eu tentei algumas ferramentas para otimizar o tamanho do arquivo GIF e meu favorito é o Gifsicle de Eddie Kohler. Ele compacta GIFs identificando regiões de quadros que não foram alteradas e armazenando apenas as diferenças, podendo opcionalmente reduzir a paleta de cores do GIF ou aplicar compactação com perdas visíveis para maiores reduções de tamanho.

Gifsicle é escrito em C e a interface padrão é uma ferramenta de linha de comando. Eu queria uma interface web para poder acessá-la em meu navegador e visualizar e comparar visualmente as diferentes configurações.

Solicitei Claude Code para web (do meu iPhone usando o aplicativo Claude para iPhone) em meu repositório simonw/tools com o seguinte:

gif-optimizer.html Compile o gifsicle para WASM e, em seguida, crie uma página da web que permite abrir ou arrastar um GIF animado nele e, em seguida, mostra aquele GIF compactado usando gifsicle com uma série de configurações diferentes, cada visualização com o tamanho e um botão de download Também inclui controles para as opções do gifsicle para uso manual – cada visualização tem um link “ajustar essas configurações” que define essas configurações manuais para aquelas usadas para aquela visualização para que o usuário possa personalizá-las ainda mais Execute “uvx rodney –help” e use essa ferramenta para organizar seu trabalho – use este GIF para testar https://static.simonwillison.net/static/2026/animated-word-cloud-demo.gif

Aqui está o que ele criou, além de uma demonstração em GIF animado que otimizei usando a ferramenta:

Vamos abordar esse prompt peça por peça.

gif-optimizer.html

A primeira linha simplesmente informa o nome do arquivo que desejo criar. Apenas um nome de arquivo é suficiente aqui – eu sei que quando Claude executar “ls” no repositório ele entenderá que cada arquivo é uma ferramenta diferente.

Meu repositório simonw/tools atualmente não possui um CLAUDE.md ou AGENTS.md arquivo. Descobri que os agentes captam o suficiente da essência do repositório apenas examinando a árvore de arquivos existente e observando o código relevante nos arquivos existentes.

Compile gifsicle to WASM, then build a web page that lets you open or drag-drop an animated GIF onto it and it then shows you that GIF compressed using gifsicle with a number of different settings, each preview with the size and a download button

Estou fazendo um monte de suposições aqui sobre o conhecimento existente de Claude, e todas valeram a pena.

O Gifsicle já tem quase 30 anos e é um software amplamente utilizado – eu estava confiante de que referir-se a ele pelo nome seria suficiente para Claude encontrar o código.

“Compile gifsicle to WASM“está fazendo um muito de trabalho aqui.

WASM é a abreviatura de WebAssembly, a tecnologia que permite aos navegadores executar código compilado com segurança em uma sandbox.

Compilar um projeto como Gifsicle para WASM não é uma operação trivial, envolvendo um conjunto de ferramentas complexo geralmente envolvendo o projeto Emscripten. Muitas vezes, são necessárias muitas tentativas e erros para que tudo funcione.

Os agentes de codificação são fantásticos em tentativa e erro! Muitas vezes, eles podem usar a força bruta para chegar a uma solução da qual eu teria desistido após o quinto erro inescrutável do compilador.

Já vi Claude Code descobrir compilações WASM muitas vezes antes, então estava bastante confiante de que funcionaria.

“then build a web page that lets you open or drag-drop an animated GIF onto it“descreve um padrão que usei em muitas de minhas outras ferramentas.

Os uploads de arquivos HTML funcionam bem para selecionar arquivos, mas uma interface de usuário mais agradável, especialmente no desktop, é permitir que os usuários arrastem e soltem arquivos em uma zona de destaque em uma página.

Configurar isso envolve um pouco de JavaScript para processar os eventos e um pouco de CSS para a zona de lançamento. Não é complicado, mas é um trabalho extra suficiente para que eu normalmente não o adicione sozinho. Com um prompt é quase grátis.

Aqui está a IU resultante – que foi influenciada por Claude dando uma olhada em minha ferramenta existente de qualidade de redimensionamento de imagem:

Não solicitei a entrada do URL do GIF e não estou interessado nisso, porque só funciona em URLs para GIFs que são veiculados com cabeçalhos CORS abertos. Provavelmente removerei isso em uma atualização futura.

“then shows you that GIF compressed using gifsicle with a number of different settings, each preview with the size and a download button“descreve o principal recurso do aplicativo.

Não me preocupei em definir a coleção de configurações que queria – na minha experiência, Claude tem bom gosto em escolhê-las para mim, e sempre podemos alterá-las se as primeiras suposições não funcionarem.

Mostrar o tamanho é importante, pois se trata de otimizar o tamanho.

Eu sei por experiência anterior que solicitar um “botão de download” obtém um botão com os mecanismos HTML e JavaScript corretos configurados de forma que clicar nele fornece uma caixa de diálogo para salvar o arquivo, o que é uma boa conveniência em relação à necessidade de clicar com o botão direito do mouse e salvar como.

Also include controls for the gifsicle options for manual use - each preview has a “tweak these settings” link which sets those manual settings to the ones used for that preview so the user can customize them further

Este é um prompt bastante desajeitado – afinal, eu estava digitando no meu telefone – mas expressou minha intenção bem o suficiente para que Claude construísse o que eu queria.

Esta é a aparência da ferramenta resultante, esta captura de tela mostrando a versão móvel. Cada imagem possui um botão “Ajustar essas configurações” que, quando clicado, atualiza este conjunto de configurações manuais e controles deslizantes:

Run “uvx rodney --help” and use that tool to tray your work - use this GIF for testing https://static.simonwillison.net/static/2026/animated-word-cloud-demo.gif

Agentes de codificação funcionam muito melhor se você garantir que eles possam testar seu código enquanto estão trabalhando.

Existem muitas maneiras diferentes de testar uma interface web – Playwright, Selenium e agente-navegador são três opções sólidas.

Rodney é uma ferramenta de automação de navegador que eu mesmo construí, que é rápida de instalar e tem --help saída projetada para ensinar ao agente tudo o que ele precisa saber para usar a ferramenta.

Isso funcionou muito bem – na transcrição da sessão você pode ver Claude usando Rodney e corrigindo alguns pequenos bugs que detectou, por exemplo:

O CSS display: none está vencendo a redefinição de estilo inline. Eu preciso definir display: 'block' explicitamente.

As instruções de acompanhamento

Quando estou trabalhando com Claude Code, geralmente fico de olho no que ele está fazendo para poder redirecioná-lo enquanto ainda está em execução. Muitas vezes também tenho novas ideias enquanto estou trabalhando, que depois injeto na fila.

Include the build script and diff against original gifsicle code in the commit in an appropriate subdirectory

The build script should clone the gifsicle repo to /tmp and switch to a known commit before applying the diff - so no copy of gifsicle in the commit but all the scripts needed to build the wqsm

Eu adicionei isso quando percebi que estava colocando um muito de esforço para descobrir como fazer o Gifsicle funcionar com WebAssembly, incluindo corrigir o código-fonte original. Aqui está o patch e o script de construção adicionado ao repositório.

Eu sabia que já havia um padrão naquele repositório para onde os arquivos de suporte estavam, mas não conseguia lembrar qual era esse padrão. Dizer “em um subdiretório apropriado” foi suficiente para Claude descobrir onde colocá-lo – ele encontrou e usou o diretório lib/ existente.

You should include the wasm bundle

Provavelmente isso não era necessário, mas eu queria ter certeza absoluta de que o arquivo WASM compilado (que tinha 233 KB) estava comprometido com o repositório. eu sirvo simonw/tools através das páginas do GitHub em tools.simonwillison.net e eu queria que funcionasse sem a necessidade de ser construído localmente.

Make sure the HTML page credits gifsicle and links to the repo

Isso é simplesmente educado! Costumo construir wrappers WebAssembly em torno de projetos de código aberto de outras pessoas e gosto de garantir que eles recebam crédito na página resultante.

Claude adicionou isto ao rodapé da ferramenta:

Construído com gifsicle de Eddie Kohler, compilado para WebAssembly. gifsicle é lançado sob a Licença Pública Geral GNU, versão 2.