Em resumo: imagens placeholder são gráficos fictícios, cinza (ou coloridos), nas dimensões exatas, que substituem as fotos reais enquanto você projeta. Seu verdadeiro valor é reservar o espaço certo cedo, para que o layout se comporte igual antes e depois de os recursos finais chegarem — sem refluxo, sem surpresas. Este guia cobre quando usá-las, qual formato exportar e como evitar o layout shift.

Esperar a fotografia definitiva antes de construir um layout é ao contrário. As imagens placeholder deixam você fixar primeiro as dimensões e depois inserir os visuais reais sem que o design se mova sob seus pés.

Reservar o espaço, não só preenchê-lo

O mais valioso que um placeholder faz é manter a largura e a altura exatas que a imagem real usará. Se um layout é construído em torno de imagens sem dimensões reservadas, colocar os recursos finais faz tudo saltar — o texto reflui, os botões se movem, e na web isso aparece como Cumulative Layout Shift. Projetar desde o início com placeholders do tamanho correto faz a troca final mudar a imagem, não a posição.

Respeite dimensões e proporção reais

Um placeholder só é útil se corresponder ao que vem. Defina as dimensões em pixels reais e o aspect ratio da imagem final — um hero 16:9, um avatar 1:1, uma miniatura 4:3 — para o mockup refletir a realidade. Rotular cada placeholder com seu tamanho (muitos geradores o imprimem na imagem) facilita detectar um descompasso na revisão.

Retina e alta densidade

Em telas de alta densidade uma imagem precisa de mais pixels físicos que seu tamanho de layout. Exportar um placeholder em 2×, 3× ou 4× deixa você testar como o recurso real ficará em telas retina e confirmar que planejou o arquivo maior que a versão final exigirá.

Qual formato exportar

  • PNG / WebP — para mockups e protótipos em tela.
  • SVG — independente de resolução, minúsculo, ideal quando o tamanho exato ainda é fluido.
  • Base64 / Data URI — incorpora o placeholder diretamente no HTML ou CSS, útil para um protótipo autônomo sem arquivos externos.

Um fluxo prático

  1. Liste os espaços de imagem do seu layout e suas dimensões reais.
  2. Gere-os no Gerador de Imagens Placeholder — use o modo em lote para produzir todos os tamanhos de uma vez.
  3. Coloque-os no design e confirme que nada se move ao redimensionar a viewport.
  4. Substitua os recursos reais um a um; como o espaço está reservado, o layout fica parado.

Se também precisa de texto fictício para preencher o conteúdo ao redor dessas imagens, combine o Gerador de Lorem Ipsum para que todo o mockup se leia com densidade realista.

Erros comuns a evitar

  • Usar placeholders com a proporção errada, de modo que a imagem real seja cortada de forma inesperada.
  • Não reservar as dimensões da imagem, causando layout shift quando as finais chegam.
  • Ignorar o escalonamento retina e subestimar o tamanho do arquivo.
  • Enviar um placeholder para produção porque nunca foi substituído.