Gerador de Imagem Placeholder

Como usar imagens placeholder

Imagens placeholder são usadas durante o desenvolvimento para reservar espaços antes das imagens reais estarem disponíveis. Cole a URL gerada diretamente em tags <img src="..."> ou em propriedades CSS de background-image.

Este gerador usa o serviço placehold.co que suporta personalização de tamanho, cores e texto via URL.

Imagens placeholder no design e no desenvolvimento

Imagens placeholder são gráficos fictícios com as dimensões exatas que você precisa, mas sem o conteúdo final. São essenciais ao montar wireframes e mockups, testar layouts responsivos, validar comportamento de lazy-loading ou preencher cards de um CMS enquanto a foto editorial ainda está em produção. Exibir um placeholder enquanto a imagem real carrega também evita o layout shift (CLS) — uma das três Core Web Vitals que o Google usa para ranquear páginas.

Vários serviços gratuitos resolveram esse problema muito antes de existirem geradores no navegador. Os mais populares hoje são placehold.co (altamente configurável, aceita texto e cores), picsum.photos (Lorem Picsum, devolve fotos reais do Unsplash), dummyimage.com e placebear.com para memes. O histórico via.placeholder.com foi descontinuado e não é mais confiável.

Tamanhos comuns que vale memorizar

• 1920×1080 — banner hero em Full HD / fundo desktop
• 1200×630 — Open Graph e Twitter Card (Facebook, LinkedIn, X)
• 800×800 — post quadrado para redes sociais (feed do Instagram)
• 400×400 — avatar grande / foto de perfil
• 64×64 — favicon, thumbnail de lista

Escolhendo o formato

PNG é lossless e suporta transparência alpha — ideal para logos e screenshots. JPG é lossy mas menor; mire em qualidade 70–85% para fotos. WebP é em média ~30% menor que JPG/PNG na mesma qualidade percebida. AVIF é ~50% menor que JPG e tem suporte universal desde o Chrome 85 e Safari 16. Para um placeholder usado só em dev, PNG é a escolha mais segura porque todo editor de imagem aceita.

Placeholders inline sem requisição HTTP

Dois padrões evitam um round-trip extra na rede. O primeiro é um SVG inline com preenchimento sólido — escala perfeitamente e pesa ~150 bytes:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300">
  <rect width="400" height="300" fill="#ccc"/>
  <text x="50%" y="50%" text-anchor="middle" fill="#666">400×300</text>
</svg>

O segundo é uma data URI em base64 embutida diretamente no src. Mantenha-a abaixo de ~1 KB; acima disso, o HTML cresce mais rápido do que custaria baixar um arquivo externo. Combine qualquer das abordagens com a propriedade CSS aspect-ratio para que a caixa reserve espaço antes da imagem real chegar e o LCP (Largest Contentful Paint) fique limpo.

Perguntas frequentes

O gerador devolve uma imagem real ou só as dimensões? Devolve um PNG/JPG/WebP de verdade com as dimensões, cor de fundo e legenda que você escolher — dá para clicar com o botão direito e salvar, ou jogar a URL gerada direto em uma tag <img>.

Posso customizar a cor de fundo? Sim. Use o seletor de cor ou digite o hex de seis caracteres. A cor do texto é independente e por padrão fica em um tom mais escuro para contraste.

Serve para SEO? Não. Buscadores precisam de imagens reais e descritivas com alt apropriado. Placeholders são uma muleta de desenvolvimento — substitua antes de publicar.