Para que servem imagens placeholder
Durante o desenho de um layout, nem sempre as imagens finais estão prontas. As imagens placeholder ocupam o espaço com as dimensões corretas e um rótulo, ajudando a visualizar a página antes do conteúdo definitivo. São úteis em mockups, wireframes, templates de e-mail e demonstrações.
Como usar
- Informe Largura (px) e Altura (px), de 1 a 4000.
- Escolha a cor de Fundo e a cor do Texto.
- Escreva um Rótulo ou deixe o campo vazio para mostrar as dimensões (por exemplo, "600 × 400").
- Clique em Baixar PNG para salvar o arquivo ou em copiar Data URI para colar a imagem direto no código.
Exemplos
- 1200 × 630 px com o rótulo "Imagem de compartilhamento", para reservar o espaço da imagem de redes sociais.
- 300 × 250 px, tamanho comum de banner, com fundo escuro e texto claro.
- O arquivo baixado recebe o nome com as medidas, como
placeholder-600x400.png.
Dúvidas frequentes
Posso usar o Data URI direto no HTML?
Sim. Copie o Data URI e use em <img src="data:image/png;base64,…"> sem precisar hospedar o arquivo. Em imagens grandes, o texto fica longo; nesses casos, baixar o PNG costuma ser mais prático.
O texto pode ficar cortado?
Sim. O tamanho da letra acompanha o menor lado da imagem e o rótulo fica em uma linha só, então textos longos em imagens estreitas podem passar da borda.
A imagem é gerada em algum servidor?
Não. Ela é desenhada no próprio navegador, em um elemento <canvas>.