Gerador de Imagem Placeholder

Gere imagens placeholder simples de qualquer tamanho com cores e texto personalizados — útil para mockups e protótipos. Ideal para designers e desenvolvedores front-end.

Estúdio · ambiente neutro

Tamanhos comuns

Tamanho (px)

Fundo / texto

Texto personalizado (vazio = dimensões)

Fonte px

Funcionalidades

Largura e altura personalizadas

Cores personalizadas

Texto personalizado

Descarregar em PNG ou SVG

Como Usar

1. Escolha um tamanho comum (imagem OG, avatar, HD…) ou digite as dimensões exatas em pixels.

2. Defina as cores de fundo e texto — o xadrez ajuda quando a imagem ficará sobre fundos desconhecidos.

3. Baixe o PNG ou copie como data URL para colar direto em um atributo src.

Sobre esta ferramenta

Enquanto um layout está sendo montado, as fotos reais muitas vezes ainda não estão prontas, e ícones de imagem quebrada dificultam avaliar o espaçamento. Este gerador cria imagens de marcação de cor sólida em tamanhos exatos em pixels, com as cores de fundo e de texto que você escolher, identificadas com as próprias dimensões ou com um texto seu, para que todo mundo saiba como o arquivo final precisa ser. As predefinições cobrem as necessidades comuns — imagem Open Graph de 1200 × 630, card do Twitter de 1600 × 900, post quadrado de 1080 × 1080, HD de 1920 × 1080, 4:3, banner de 1500 × 500 e avatar de 400 × 400 — ou você pode digitar qualquer largura e altura. Baixe o resultado como PNG, ou copie como data URL e cole direto no atributo src de um img num protótipo, template de e-mail ou fixture de teste.

Perguntas Frequentes

O que é uma data URL e por que copiá-la?

Uma data URL contém a imagem inteira codificada como texto, começando com data:image/png;base64. Você pode colá-la num <img src> ou num fundo CSS sem salvar nem hospedar arquivo nenhum, o que é prático para protótipos rápidos.

As imagens de marcação devem ter as dimensões finais?

Sim. Usar o tamanho e a proporção finais exatos revela cedo deslocamentos de layout, cortes e quebras de texto, então as imagens reais entram sem surpresas.

Qual o tamanho ideal de uma imagem Open Graph?

1200 × 630 pixels é o tamanho mais recomendado para prévias de links no Facebook, no LinkedIn e em muitos apps de mensagem. Mantenha textos importantes longe das bordas, porque algumas plataformas cortam em formato quadrado.

Por que escolher um fundo quadriculado ou neutro?

Um cinza neutro ou um padrão quadriculado deixa claro que a imagem é provisória e ajuda a ver como ela fica sobre fundos desconhecidos, então é menos provável que seja confundida com uma arte finalizada.

Posso usar essas imagens em produção?

Elas foram feitas para mockups e desenvolvimento. Deixar imagens provisórias num site no ar passa impressão de coisa inacabada, e os buscadores não encontram conteúdo de imagem útil, então troque-as por imagens reais com texto alternativo antes do lançamento.