Pular para o conteúdo principal
DevTools by Decussi
  • Ferramentas
  • Dados
  • Segurança
  • Rede
  • Texto
  • Data
  • Web
  • Dev
  • SEO
  • Brasil
Ferramentas
  1. Início
  2. /Ferramentas
  3. /Web
  4. /Gerador de Imagem Placeholder

Gerador de Imagem Placeholder – Qualquer tamanho em PNG, JPEG, WebP ou SVG

Gere imagens placeholder no tamanho que precisar, com cor de fundo, cor e texto personalizados, e baixe em PNG, JPEG, WebP ou SVG.

🔒Processado no navegador – nenhum dado enviado ao servidor

Tamanhos prontos

Prévia · 1200 × 630 px
Placeholder de 1200 por 630 pixels

SVG (383 bytes)

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630"><rect width="100%" height="100%" fill="#27272a"/><text fill="#a1a1aa" font-family="system-ui, -apple-system, &apos;Segoe UI&apos;, Roboto, &apos;Helvetica Neue&apos;, Arial, sans-serif" font-size="157" font-weight="600" text-anchor="middle"><tspan x="600" y="370">1200×630</tspan></text></svg>

Como usar esta ferramenta

  1. Escolha um tamanho pronto (Open Graph, 16:9, quadrado, avatar, banner) ou digite largura e altura
  2. Defina a cor de fundo e a cor do texto; o texto padrão mostra as dimensões
  3. Escolha o formato e baixe o arquivo
  4. Para usar direto no código, copie o SVG ou o data URI

Sobre esta ferramenta

O que é

Placeholder é uma imagem provisória que ocupa o lugar da definitiva enquanto o layout é montado. Com as dimensões escritas nela, fica fácil ver se cada espaço recebeu a proporção certa — e um serviço externo de placeholder deixa de ser uma dependência que pode sair do ar no meio da demonstração.

Quando usar

  • Montar protótipos e layouts antes de ter as imagens finais
  • Criar uma imagem Open Graph provisória de 1200×630 para testar o compartilhamento
  • Preencher dados de teste e fixtures com imagens de tamanho conhecido
  • Gerar fundos simples de cor sólida com texto para slides e documentação

Segurança

Processamento 100% no navegador. Nenhum dado é enviado ao servidor — seus dados sensíveis permanecem no seu dispositivo.

Perguntas frequentes

Qual formato devo baixar?
SVG é o menor e fica nítido em qualquer escala — é o melhor para protótipo no navegador. PNG é a escolha para ferramentas que não aceitam SVG. JPEG e WebP servem para testar o peso e o comportamento de fotos reais no layout.
Como o tamanho do texto é escolhido?
O cálculo estima a largura do texto pela largura média de um caractere sans-serif e limita a fonte para a linha mais longa ocupar até 80% da largura e o bloco de linhas até metade da altura. Há um teto de 25% do menor lado para textos curtos não virarem letras gigantes.
Posso usar o data URI direto no HTML ou CSS?
Pode. O data URI copiado é o SVG em base64 e funciona em src de img, em background-image e em Markdown, sem arquivo separado e sem depender de um serviço externo.
Qual o tamanho máximo?
8000 px por lado. Acima disso vários navegadores recusam criar o canvas usado para gerar PNG, JPEG e WebP.

Ferramentas relacionadas

  • 🎨Conversor de Cores
  • ◐Contraste WCAG
  • 🖼Conversor de Imagem
  • ⭐Gerador de Favicon
  • 🖼Imagem ↔ Base64
  • 🎨Gerador de Paleta Tailwind
DevTools

Ferramentas para desenvolvedores, em português. Sem cadastro e sem instalação.

Criado e mantido por Decussi

Ferramentas

  • Todas as ferramentas
  • Dados
  • Segurança
  • Rede
  • Texto
  • Data
  • Web
  • Dev
  • SEO
  • Brasil

Referência

  • Consulta rápida
  • Guias
  • Códigos HTTP
  • Cron
  • Checagens de SEO

Desenvolvedores

  • API e devs
  • llms.txt
  • ai.txt
  • Sitemap

Newsletter

Receba novidades e novas ferramentas no seu email.

Sugira uma ferramenta

Tem uma ideia? Envie sua sugestão.