Gerador de imagem placeholder
Crie uma imagem de exemplo simples no tamanho exato de que você precisa, com o tamanho escrito nela, para mockups, layouts e testes.
Funciona inteiramente no seu navegador
Deixe em branco para mostrar o tamanho.
Largura e altura de 1 a 8000 pixels, até 100 megapixels no total. O texto ocupa uma linha, com tamanho ajustado para caber.
Como criar uma imagem placeholder
- Digite a largura e a altura ou clique em uma predefinição, como 1200 × 630 para um card de rede social ou 300 × 250 para um anúncio.
- Escolha as cores do fundo e do texto. Deixe o texto em branco para mostrar o tamanho ou escreva o seu próprio rótulo.
- Escolha PNG, JPEG, WebP ou SVG e clique em Baixar, ou copie a imagem como data URI.
Como escolher o tamanho do placeholder
Uma imagem placeholder ocupa o lugar de uma imagem real enquanto você monta uma página, então o que importa é que ela tenha o formato certo. Layouts quebram mais por causa da proporção do que da resolução: uma imagem de destaque 16:9 se comporta de um jeito diferente de um avatar quadrado, mesmo que as duas sejam pequenas. Escrever o tamanho na imagem faz com que qualquer pessoa olhando o mockup veja qual espaço precisa de quais dimensões.
As predefinições cobrem tamanhos que aparecem o tempo todo: 1200 × 630 é o formato que a maioria das redes sociais usa nas prévias de links, 1080 × 1080 um post quadrado, 1920 × 1080 e 1280 × 720 os quadros de vídeo mais comuns, 300 × 250 e 728 × 90 dois espaços de anúncio padrão, e 150 × 150 um avatar típico.
No uso real, lembre que um placeholder é cor chapada. PNG e SVG armazenam isso quase sem custo, enquanto o JPEG em tamanho grande borra o texto. Se você colar a imagem no código como data URI, mantenha-a pequena: cada byte da imagem é repetido na sua página.
Dicas
- Precisa da imagem real nesse tamanho? Redimensionar imagem e Recortar imagem deixam uma foto no tamanho exato do espaço.
- Para embutir uma imagem pronta como texto, use Imagem para Base64.
- Escolha cores que combinem com o Conversor de cores e contraste.
Perguntas frequentes
Alguma coisa sai do meu dispositivo?
Não. Nada do que você digita é enviado a lugar nenhum. A imagem é desenhada pelo seu navegador, e o download é criado no seu dispositivo.
Qual formato devo escolher?
O SVG tem algumas centenas de bytes e fica nítido em qualquer tamanho, então combina com layouts para a web. O PNG é exato e sem perdas para cores chapadas. JPEG e WebP geram arquivos menores em tamanhos grandes, e o JPEG deixa o texto levemente borrado. Alguns lugares que aceitam envios, como muitos campos de CMS, só aceitam imagens bitmap, então use PNG nesses casos.
Como o tamanho do texto é escolhido?
Automaticamente. O texto fica o maior possível em uma linha, dentro de cerca de 80 por cento da largura e 40 por cento da altura, então tanto um banner largo como 728 × 90 quanto um alto como 160 × 600 ficam bons.
Para que serve a data URI?
Uma data URI é a imagem escrita como texto, para você colar direto em uma tag img do HTML ou em um fundo CSS, sem arquivo separado. Funciona bem para imagens pequenas. Um PNG grande vira uma sequência longa que deixa a página pesada, então a ferramenta avisa quando o resultado fica maior do que o razoável e se recusa a copiar qualquer coisa acima de 1 MB.
O SVG precisa de fontes especiais?
Não. Ele usa a fonte sans-serif do sistema, então fica um pouco diferente em cada dispositivo, mas sempre cabe, e o texto é escapado para que caracteres como & e < fiquem seguros.
Quais são os limites de tamanho?
Cada lado pode ter de 1 a 8000 pixels, e o total pode chegar a 100 megapixels. Imagens maiores demoram mais para ser desenhadas e podem não abrir em alguns programas.