Imagem de preenchimento para mockups

Gerador de placeholder de imagem online

Gere imagens de placeholder em SVG ou PNG com tamanho, cores e texto customizados. Ideal para protótipos, mockups e fallbacks de carregamento.

Geração 100% local: SVG construído no navegador, PNG renderizado via canvas.
Presets de tamanhos comuns (Open Graph, Full HD, quadrado, mobile).
Cores totalmente customizáveis e texto opcional sobreposto à imagem.

Ferramenta

Gere placeholders de imagem para mockups

Crie imagens de preenchimento com largura, altura, cores e texto personalizados. O SVG é gerado localmente no navegador e pode ser exportado em PNG ou copiado como Data URL — útil para protótipos, layouts em desenvolvimento e fallback de carregamento.

Largura (px)Entre 16 e 4096 pixels.Altura (px)Entre 16 e 4096 pixels.

Tamanhos comunsEscolha um preset para preencher largura e altura.

Cor de fundoMantenha contraste alto com a cor do texto.Cor do textoBranco ou cinza claro funcionam em fundo escuro.

Texto exibido (opcional)Se vazio, mostra a dimensão automaticamente.Formato de exportaçãoSVG é vetor — escala sem perder nitidez e ocupa pouco bytes.

Dimensão600 × 400

Texto600 × 400

Tamanho do SVG0.39 KB

Quando usar: protótipos no Figma ou Sketch antes de ter as imagens reais, fallback de carregamento em CMSs vazios, mockups de e-mail, testes de layout responsivo e exemplos em documentação. Substitua pelo conteúdo real antes de publicar — placeholder não é otimizado para SEO nem para acessibilidade.

Por que SVG: escala em qualquer resolução sem perder nitidez, ocupa muito menos bytes que um PNG equivalente e pode virar Data URL embutida direto em CSS ou HTML, sem requisição HTTP adicional. Use PNG só quando o destino exige raster (ex.: ferramenta antiga que não aceita SVG).

Visão geral

O que você encontra nesta página

O gerador de placeholder atende um caso clássico de design e desenvolvimento: precisar de uma imagem com tamanho exato para preencher um layout enquanto o conteúdo final ainda não existe. A página entrega o resultado em SVG (vetor) ou PNG (raster) já configurado.

Toda a renderização acontece localmente: o SVG é construído por concatenação de strings e o PNG é gerado por canvas no próprio navegador. Não há upload, requisição externa nem dependência de serviço.

Entenda a ferramenta

O que esta ferramenta faz

Gera SVG com largura, altura, cores de fundo e texto, mais um rótulo opcional sobreposto.
Renderiza versão PNG via canvas para destinos que não aceitam SVG.
Oferece presets de tamanhos comuns (Open Graph 1200×630, Full HD, quadrado, mobile).
Permite copiar o resultado como Data URL ou como código SVG para colar direto no HTML.

Quando usar

Em quais situações ela ajuda

Ao montar protótipo no Figma, Sketch ou XD com cards, galerias e thumbnails.
Ao criar fallback de carregamento para CMS sem imagens preenchidas.
Ao gerar exemplos para documentação de componentes e design system.

Passo a passo

Como usar

Defina largura e altura, ou escolha um preset comum.
Ajuste as cores de fundo e do texto, mantendo bom contraste para a legenda ficar visível.
Escreva um rótulo personalizado ou deixe vazio para mostrar a dimensão automaticamente.
Escolha entre SVG ou PNG e use Baixar, Copiar Data URL ou Copiar código SVG.

Exemplos práticos

Quando esse cálculo ou recurso costuma ser útil

Preencher cards de imagem em protótipo no Figma antes de receber o conteúdo final.
Criar miniaturas de teste para carrossel ou galeria em mockups.
Gerar Data URL para usar como fallback de carregamento sem requisição extra.

Leitura do resultado

Cuidados e interpretações importantes

O tamanho do arquivo SVG é mostrado em KB — costuma ser bem menor que um PNG equivalente.
Para usar como Data URL inline em CSS ou HTML, copie a Data URL e cole no atributo src ou na propriedade background-image.
Lembre de substituir o placeholder por imagem real antes de publicar — placeholder não tem valor de SEO nem acessibilidade.

Metodologia

Como a estimativa é construída

O SVG é construído por template literal com width, height, fill e elementos rect e text.
O texto é centralizado com text-anchor="middle" e dominant-baseline="middle"; o tamanho da fonte é proporcional à menor dimensão.
A conversão para PNG cria um Blob do SVG, carrega em um Image e desenha em canvas, que exporta toDataURL("image/png").

Credibilidade

Revisão editorial

Conteúdo mantido por Equipe editorial do Hub de Utilidades com revisão pública desta versão em 1 de maio de 2026.

As ferramentas têm caráter informativo e de apoio prático.
Resultados importantes devem ser conferidos com documentos, regras vigentes ou atendimento especializado.
Erros, ajustes e sugestões podem ser enviados para tbdevcompany@gmail.com.
Esta página foi construída para combinar ferramenta interativa, contexto e navegação relacionada.
Se você encontrar divergência material, use o canal de contato para relatar a situação.

Dúvidas comuns

Perguntas frequentes

Por que usar SVG em vez de PNG?

SVG é vetorial: escala em qualquer resolução sem perder nitidez e ocupa muito menos bytes que um PNG equivalente. Use PNG só quando o destino exigir imagem raster (ex.: editor antigo, e-mail que não aceita SVG inline).

O que é uma Data URL e quando usar?

É o conteúdo da imagem embutido direto no HTML ou CSS, sem requisição HTTP separada. Útil para imagens pequenas que aparecem em todas as páginas (logo, ícone) ou para fallback que precisa carregar antes do CSS principal.

O placeholder gerado serve para produção?

Não. Placeholder é texto sobre fundo colorido — não tem valor para SEO, prejudica acessibilidade (descrição genérica) e pode ser indexado por engano. Use só em rascunho, protótipo e mockup; substitua por imagem real antes de publicar.

Por que escolher cores com bom contraste?

O texto sobre o fundo precisa ser legível mesmo em tamanho reduzido. Combinações com baixo contraste (azul-claro em fundo cinza, por exemplo) somem na thumbnail e atrapalham a finalidade do placeholder.

O PNG é gerado no servidor?

Não. O PNG é renderizado dentro do seu navegador usando um elemento canvas — o SVG é desenhado nele e o canvas exporta a imagem como PNG. Tudo local, sem upload.

Próximos passos

Ferramentas relacionadas

Senha forte em segundos

Buscas relacionadas

Termos atendidos por esta página

gerador de placeholderplaceholder de imagemimage placeholderplaceholder svgmockup imagem