Gerador de Placeholder

1. Informe largura e altura, de 10 a 4000 pixels.
2. Escolha as cores de fundo e de texto, e um texto opcional.
3. Selecione o padrão visual: sólido, xadrez ou degradê.
4. Escolha o formato — PNG, JPEG, WebP ou SVG — e baixe.

Ela ocupa o espaço de uma imagem real enquanto o conteúdo definitivo não existe. Isso permite avaliar o layout com as proporções corretas, sem esperar pela produção das fotos.

Usar uma imagem real bonita no protótipo tem o mesmo problema do texto real: ela desvia a avaliação para o conteúdo em vez do arranjo. Um retângulo cinza com as dimensões escritas mantém o foco na estrutura.

É também a forma de testar como o layout se comporta com proporções diferentes: uma imagem muito alta ou muito larga revela quebras que a foto ideal esconderia.

O SVG é vetorial, então o arquivo é minúsculo — normalmente algumas centenas de bytes, independentemente das dimensões declaradas.

Ele também escala sem perder nitidez, o que é útil quando o mesmo marcador aparece em tamanhos diferentes no protótipo.

Para prototipagem em ferramenta de design que não importa SVG, ou para testar o pipeline real de imagens, prefira PNG ou WebP.

O padrão xadrez tem uso específico: ele torna óbvio quando uma imagem está sendo esticada, porque os quadrados deixam de ser quadrados.

Imagem de preenchimento publicada é o equivalente visual do Lorem ipsum esquecido no texto. Ela é indexada, aparece em compartilhamento e passa a impressão de site inacabado.

Pior: se a imagem de preenchimento estiver na tag de compartilhamento social, é ela que aparece quando alguém divulga o link.

A geração acontece inteiramente no seu navegador; nada é enviado a servidores.