Por que depender de um serviço externo de imagem placeholder pode deixar testes de UI instáveis?

Porque cada carregamento de página faz uma requisição de rede real para o servidor externo, fora do controle do seu ambiente de teste. Se esse serviço estiver lento, com rate limit ou indisponível durante a execução de uma suíte automatizada, o teste falha por um motivo que não tem relação com o código sendo testado — um clássico teste 'flaky'.

Uma imagem SVG serve para testar comportamento de layout como se fosse uma foto real?

Para testar dimensão, proporção e posicionamento (object-fit, grid, comportamento responsivo), sim — o navegador trata SVG como qualquer outra imagem no fluxo de layout. Para testar especificamente comportamento de compressão ou formato de arquivo (como lazy loading condicionado ao tipo MIME), um teste dedicado com um bitmap real pode ser necessário.

O texto exibido na imagem placeholder pode ser customizado, ou é sempre a dimensão da imagem?

Pode ser customizado — se nenhum texto for informado, a imagem exibe a dimensão (largura × altura) automaticamente, útil para conferir visualmente que um componente está renderizando no tamanho esperado; se um texto for informado, ele substitui a dimensão como conteúdo exibido.

Gerador de Imagem Placeholder

Gere uma imagem de teste (SVG) no tamanho e cores que você escolher — útil para mockups e protótipos.

Largura (px)

Altura (px)

Cor de fundo

Cor do texto

Texto (opcional)

Imagem gerada localmente (SVG), sem depender de nenhum serviço externo — a URL pode ser usada direto num <img src="..."> enquanto você monta o layout.

Documentação técnica

Gerador de Imagem Placeholder: SVG, não um serviço de terceiros que pode cair

A maioria das ferramentas de "imagem placeholder" conhecidas (placeholder.com, via.placeholder.com e similares) funciona como um serviço externo: seu protótipo faz uma requisição HTTP para o servidor deles a cada carregamento de página, e a imagem só aparece se esse serviço estiver no ar. Isso introduz uma dependência de rede em algo que deveria ser puramente visual — e é uma causa real e documentada de testes de UI instáveis (flaky), quando um serviço de placeholder externo fica lento ou indisponível durante uma execução de teste automatizado.

Por que SVG em vez de PNG/JPEG gerado no servidor

Este gerador produz a imagem como SVG — um formato vetorial baseado em texto (XML), não uma imagem rasterizada. Isso tem duas vantagens técnicas diretas para uso em protótipo: o arquivo é tipicamente uma fração do tamanho de um PNG equivalente (algumas centenas de bytes, contra dezenas de KB), e a imagem escala para qualquer tamanho sem perda de nitidez, já que é definida por instruções vetoriais (retângulo + texto centralizado), não por uma grade de pixels. Para o caso de uso — ocupar espaço visual num layout com dimensões e cores controladas — SVG é estritamente mais eficiente que gerar e servir um bitmap.

Uso em protótipos e testes de layout sem dependência externa

Como a imagem é gerada diretamente pela URL (dimensões, cores e texto como parâmetros), ela pode ser referenciada diretamente num <img src> de um protótipo estático, sem exigir JavaScript nem uma chamada de API separada — o mesmo padrão de uso dos serviços externos citados acima, mas servido pela própria infraestrutura deste site, sob o mesmo domínio das outras ferramentas. Para testes automatizados de UI que precisam de imagens de teste com dimensões específicas (testar comportamento de object-fit, grid responsivo, ou carregamento de imagem em diferentes proporções), gerar via este endpoint garante uma resposta rápida e determinística, sem o risco de instabilidade de rede de um serviço externo de terceiros.