Gerador de Imagens Placeholder
Gere imagens de substituição em formato SVG com as dimensões, cores de fundo e texto que escolher. Descarregue-as ou copie diretamente o URL/data URI.
Configuração
Pré-visualização
<img src="data:image/svg+xml;base64,…" width="1280" height="720" alt="placeholder">
const img = new URL("/placeholder.png", import.meta.url);
Como usar: Placeholder
- 1Escolha um preset ou indique a largura e a altura em píxeis.
- 2Personalize o texto, as cores e o formato.
- 3Descarregue a imagem ou copie o código para a incorporar.
Para que serve?
- Preencher maquetes com imagens do tamanho exato.
- Testar layouts responsivos antes de ter as fotos finais.
- Criar imagens de exemplo para modelos e documentação.
Imagens de substituição para o layout
Para que servem
Reservam o espaço de uma imagem enquanto o recurso final não existe, para validar o layout e as proporções.
Evitar saltos de layout
Defina sempre largura e altura reais no HTML: o navegador reserva o espaço e evita o deslocamento cumulativo de layout (CLS), uma métrica Core Web Vitals.
Formatos
As imagens geradas são leves e descarregam instantaneamente. Substitua-as por imagens reais otimizadas antes de publicar.
Ferramentas relacionadas
Perguntas frequentes
Que formatos gera?+
Gera SVG escalável e a sua representação como data URI para usar em <img> sem ficheiros.