🖼️Gerador de Imagem Placeholder (Largura × Altura em PNG)
Gere uma imagem de placeholder com as medidas exatas — a cor de fundo e o texto que você escolher, com as dimensões escritas no centro. A prévia é atualizada a cada tecla e a saída sai em PNG ou em SVG copiável, tudo com processamento 100% local no navegador.
🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.
Fonte: Processamento local — curadoria própria (Canvas API e SVG inline) — dimensões, fonte proporcional e texto central calculados no navegador; nada é enviado a servidores · Última verificação em 07/10/2026
O gerador de imagem placeholder cria um PNG com a largura e a altura exatas que você digitar, cor de fundo e legenda centralizados. Há presets para 300 × 250, 728 × 90, 1200 × 630 e 1080 × 1080, além de cópia do SVG equivalente. Tudo é gerado no navegador, sem upload.
Como usar o gerador de placeholder
- Defina largura e alturaComece por um preset — 300 × 250 e 728 × 90 para banners, 1200 × 630 para compartilhamentos e 1080 × 1080 para posts quadrados — ou digite qualquer medida entre 1 e 4000 pixels.
- Ajuste cores e textoEscolha a cor de fundo e a cor do texto nos seletores. O campo de texto vem com as dimensões atuais e se atualiza sozinho enquanto você não digitar nada nele.
- Baixe o PNG ou copie o SVGA prévia mostra exatamente o que sai no arquivo. O PNG é baixado na medida final e o SVG é copiado para a área de transferência em um clique.
Como funciona a geração
A imagem é desenhada em um canvas com a largura e a altura que você definiu: primeiro um retângulo com a cor de fundo cobre a área inteira, depois o texto é escrito no centro com alinhamento horizontal e vertical nas próprias coordenadas do meio. O tamanho da letra acompanha o formato: é 11% do menor lado da imagem, com piso de 12 pixels para que o texto nunca desapareça em faixas finas como 728 × 90. Assim, quanto maior a imagem, maior a legenda, mantendo sempre a mesma presença visual.
O SVG copiável é montado com as mesmas medidas: um elemento de retângulo com a cor de fundo e um elemento de texto ancorado no centro, com fonte de sistema compatível com todos os navegadores. Como o SVG é um código de descrição de vetores, ele escala sem perda e continua editável no seu editor favorito. Os dois formatos saem do mesmo cálculo, então o que você vê na prévia é literalmente o que o arquivo contém. Nada disso depende de servidor: o desenho e a exportação acontecem no seu navegador.
Exemplo resolvido
Com o preset Open Graph de 1200 × 630, a área é 1200 × 630 = 756.000 pixels quadrados e o menor lado é 630, então a fonte fica em arredondar(0,11 × 630) = 69 pixels. O texto padrão 1200 × 630 aparece centralizado em (600, 315), e o PNG baixado tem exatamente 1200 × 630 — a medida usada por redes sociais e blogs para imagem de compartilhamento.
Agora escolha o banner de 728 × 90: o menor lado cai para 90, e 11% dele daria apenas 9,9 pixels. O piso de 12 entra em ação e a legenda sai com 12 px, legível na faixa sem ocupar altura demais. Um placeholder de 300 × 250 usa fonte de 28 pixels, porque 0,11 × 250 = 27,5, arredondado para cima. Se você digitar 600 × 600 e escrever Status em manutenção, o texto substitui as dimensões e mantém o mesmo central e a mesma proporção de tamanho. E, ao copiar o SVG, o código gerado carrega width, height e viewBox idênticos, pronto para colar numa página.
Suposições e limitações
- As medidas aceitas vão de 1 a 4000 pixels por lado, com área limitada para o navegador desenhar sem travar
- O fundo é sempre opaco: a ferramenta não gera transparência, mesmo que você escolha um tom muito claro
- O texto segue o tamanho automático de 11% do menor lado quando você não digita uma legenda própria
- A fonte do SVG é uma família de sistema, então o render pode variar ligeiramente entre navegadores
- A cópia do SVG depende da permissão de área de transferência do navegador; sem ela, o texto fica disponível na prévia para seleção manual
- Processamento 100% local: nada do que você digitar é enviado a servidores
Dicas para tirar o melhor proveito
Use os placeholders como marcadores de espaço em protótipos: reserve os pixels certos desde o primeiro dia e evita retrabalho quando a arte final chegar. Para testes de layout, gere variantes com o mesmo tamanho e cores diferentes, assim dá para alternar rapidamente sem mexer no código. O preset de 1200 × 630 também serve para conferir como um link vai aparecer ao ser compartilhado.
Se a legenda automática ficar grande demais para o seu formato, escreva um texto mais curto no campo: o tamanho é calculado sobre o menor lado, então frases curtas aproveitam melhor a faixa. Para manter um padrão visual em vários tamanhos, escolha sempre as mesmas cores — os seletores mantêm o último valor escolhido. E como o processamento é 100% local, dá para gerar dezenas de medidas em sequência, sem espera de upload, e copiar o SVG de cada uma direto para o projeto.
Erros comuns a evitar
O erro mais comum é digitar medidas em centímetros ou polegadas no campo de pixels: a ferramenta trabalha apenas em pixels, e 10 cm não significa nada aqui. Para converter, use a calculadora de tamanho de imagem e volte com o valor em px. Outro problema é confundir proporção com tamanho: 1200 × 630 e 600 × 315 têm a mesma proporção, mas áreas diferentes, e só a segunda cabe onde se pede a primeira.
Também é frequente esquecer que o placeholder é uma imagem de teste, não a arte final: publicá-lo em produção deixa a página com um retângulo cinza visível. E cuidado ao ampliar o PNG depois de baixado: pixels a mais não existem, e a legenda fica serrilhada. Para escalar sem perda, use o SVG copiado, que é vetorial por natureza.
Veja também
Se esta ferramenta foi útil, você também pode precisar destas relacionadas: Gerador de favicon, Redimensionador de imagem para redes sociais, Gerador de imagem de baixa qualidade, Calculadora de Tamanho de Imagem: px, cm e DPI.
Ferramentas relacionadas
⭐Gerador de favicon
Gere favicon.ico e PNGs de 16 a 512 px a partir de uma imagem.
Abrir ferramenta →📐Redimensionador de imagem para redes sociais
Ajuste sua imagem ao tamanho exato de Instagram, YouTube, Facebook, LinkedIn e X.
Abrir ferramenta →📉Gerador de imagem de baixa qualidade
Degrade uma imagem de propósito com JPEG repetido, ruído e cores saturadas.
Abrir ferramenta →📐Calculadora de Tamanho de Imagem: px, cm e DPI
Converta pixels em centímetros e polegadas e veja megapixels e bytes brutos.
Abrir ferramenta →Perguntas frequentes
O que é uma imagem placeholder?
É uma imagem provisória com as medidas exatas do espaço que a arte final vai ocupar. Serve para montar layouts, testar proporções e reservar o tamanho correto antes de ter o conteúdo pronto.
Quais tamanhos de placeholder posso gerar?
Qualquer medida de 1 a 4000 pixels por lado, além dos presets 300 × 250, 728 × 90, 1200 × 630 e 1080 × 1080. Basta digitar largura e altura e a prévia se atualiza.
Posso editar depois o que foi gerado?
Sim, se copiar o SVG: o código é editável em qualquer editor de vetores ou direto no HTML. O PNG, por ser raster, precisa de um editor de imagens para alterações.
Os dados que eu escrevo saem do navegador?
Não. O desenho, o download do PNG e a cópia do SVG acontecem no seu aparelho, com processamento 100% local. Nada é enviado a servidores.
A imagem sai com transparência?
Não. O fundo é sempre preenchido com a cor escolhida, pois a ideia é um marcador de espaço visível. Para arquivos com alfa, use um conversor de imagem depois de baixar.
Qual medida usar para imagem de compartilhamento?
1200 × 630 px é a proporção 1,91:1 usada na maioria das redes e cards de link. O preset Open Graph do gerador já vem nesse tamanho por padrão.
Explore mais ferramentas gratuitas
Dezenas de calculadoras, conversores e geradores — todos funcionam no navegador, sem cadastro e sem instalar nada.