Gerador de imagem placeholder
Uma imagem placeholder (ou imagem de espaço reservado) ocupa o lugar de uma foto ou banner que ainda não está pronto. Designers e desenvolvedores usam placeholders em protótipos, layouts e testes para conferir tamanhos, proporções e o comportamento da página antes de ter o conteúdo final. Este gerador cria a imagem no seu navegador com largura, altura, cores, texto e estilo à sua escolha, em PNG, JPG, WebP ou SVG.
Como usar
- Informe a largura e a altura em pixels ou escolha um tamanho pronto, como banner, post, story ou Open Graph.
- Escolha as cores do fundo e do texto e o estilo: liso, com X, em grade ou com ícone de imagem.
- Deixe o texto vazio para mostrar as dimensões (por exemplo, 1200 × 630) ou escreva o que quiser, como “Foto do produto”.
- Baixe o arquivo ou copie o código: o Data URI pode ser colado direto no atributo
srcde uma imagem, e o SVG pode ser colado no HTML.
Tamanhos comuns
| Uso | Tamanho (px) |
|---|---|
| Avatar e foto de perfil | 150 × 150 |
| Banner médio (anúncio retângulo) | 300 × 250 |
| Leaderboard (faixa horizontal de anúncio) | 728 × 90 |
| Post quadrado | 1080 × 1080 |
| Story | 1080 × 1920 |
| Imagem de compartilhamento (Open Graph) | 1200 × 630 |
| HD e Full HD | 1280 × 720 e 1920 × 1080 |
SVG ou PNG?
O SVG é texto puro, tem poucos bytes e fica nítido em qualquer tela, por isso é o melhor formato para usar direto no código de protótipos. Os formatos PNG, JPG e WebP são melhores quando a imagem será enviada a ferramentas que não aceitam SVG, como alguns construtores de sites, planilhas e apresentações.
Boas práticas
- Use cores neutras, como cinza claro, para o placeholder não chamar mais atenção que o conteúdo do layout.
- Mostrar as dimensões na própria imagem ajuda a equipe a saber qual arte final produzir.
- Não esqueça de trocar os placeholders pelas imagens finais antes de publicar: buscadores e visitantes percebem imagens genéricas.
- Gere as imagens localmente em vez de depender de serviços externos de placeholder, que podem ficar fora do ar e deixar o protótipo com imagens quebradas.
Para criar o texto provisório do layout, use o gerador de Lorem Ipsum. Para gerar as metatags de compartilhamento, use o gerador de meta tags.