Uma imagem placeholder exatamente do tamanho que você precisa
Digite uma largura e uma altura e receba uma imagem lisa desse tamanho com as dimensões escritas no meio — o substituto de que um layout precisa antes de a foto real chegar. Mude as cores, escreva seu próprio texto e baixe em PNG, JPEG, WebP ou SVG, ou copie como data URI para colar direto no HTML ou CSS. Tudo é desenhado no seu navegador.
Como criar uma imagem placeholder
- 1Digite a largura e a altura em pixels, ou escolha um tamanho comum como 300 × 250 ou 1920 × 1080.
- 2Deixe o texto vazio para mostrar as dimensões, ou digite o seu — uma nova linha começa uma segunda linha de texto.
- 3Escolha as cores do fundo e do texto, a fonte e o tamanho do texto.
- 4Baixe em PNG, JPEG, WebP ou SVG, copie a imagem ou copie o data URI SVG para um
<img src>.
Raster ou vetor
- PNG, JPEG, WebP
- Um bitmap exatamente com a largura e a altura que você digitou, para formulários de upload, arquivos de design e tudo que espera um arquivo de imagem de verdade.
- SVG
- Algumas centenas de bytes de marcação que escalam para qualquer tamanho sem borrar. Cole inline, ou use o data URI para que o placeholder não precise de arquivo nenhum.
Texto que cabe
O texto se ajusta à imagem automaticamente: grande em um banner amplo, pequeno em um anúncio leaderboard, nunca passando da borda. O controle de tamanho do texto ajusta a escala a partir daí.
O texto do SVG é desenhado com as fontes do dispositivo que o exibe, então pode parecer um pouco diferente em outro computador; os formatos bitmap ficam iguais em qualquer lugar.
Sem serviço de placeholder
Serviços de placeholder online podem sair do ar ou deixar a página lenta com uma requisição extra. Um arquivo baixado ou um data URI funciona offline e nunca muda.
Para ajustar uma foto real a uma plataforma, use o redimensionador de imagens para redes sociais; para preencher um layout com texto provisório, use o gerador de lorem ipsum.
Perguntas frequentes
- Qual é o maior placeholder que posso criar?
- Até 8000 pixels em cada lado. Bitmaps muito grandes podem passar do que alguns navegadores permitem para um canvas; o SVG não tem esse limite.
- Posso mudar o texto da imagem?
- Sim. Digite o que quiser na caixa de texto; deixe vazia para mostrar as dimensões. Pressione Enter para uma segunda linha.
- Como uso o placeholder sem um arquivo?
- Copie o data URI e use como src de uma imagem ou como url() de um background-image no CSS. A imagem inteira está dentro do texto.
- Alguma coisa é enviada?
- Não. A imagem é desenhada no seu navegador e nunca sai do seu dispositivo.