Como faço uma imagem placeholder de um tamanho específico?

Digite a largura e a altura acima e a imagem é gerada na hora. Baixe como SVG ou PNG, ou copie o data URI.

Por que usar data URI em vez de um serviço?

Elimina uma requisição por imagem, funciona off-line e não quebra quando um serviço externo cai ou limita o uso.

SVG ou PNG para placeholders?

SVG para tela: pesa algumas centenas de bytes e fica nítido em qualquer tamanho. PNG quando uma ferramenta exige um bitmap.

Qual o tamanho de uma imagem Open Graph?

1200 por 630 pixels, que é a predefinição incluída: é o que Facebook, LinkedIn e a maioria das prévias recortam.

Gerador de imagens placeholder

Crie imagens placeholder de qualquer tamanho, como SVG, PNG ou data URI pronto para colar.

O Gerador de imagens placeholder funciona inteiramente no seu navegador: o SVG é montado e rasterizado no seu dispositivo e nada é enviado.

Abrir o Gerador de Open Graph

Sobre Gerador de imagens placeholder

Serviços de imagem placeholder colocam uma requisição de rede no meio de um layout que você ainda está desenhando, e uma página cheia delas fica lenta, inútil off-line e dependente de um terceiro continuar no ar. Gerar o mesmo retângulo cinza localmente elimina a dependência: o resultado é um SVG que dá para salvar, rasterizar em PNG ou colar como data URI sem requisição alguma. Os tamanhos cobrem os que se usam de verdade — cartões sociais, formatos de anúncio, avatares, banners — e o rótulo mostra as dimensões por padrão.

Recursos

Qualquer largura e altura, com predefinições sociais, de anúncio e gerais
Cor de fundo e de texto próprias, com um valor legível por padrão
O rótulo mostra as dimensões ou o texto que você escrever
Raio de canto e a cruz diagonal típica de wireframes
Baixa como SVG ou rasterizado em PNG na resolução total
Data URI que funciona off-line e não custa uma requisição

Como usar Gerador de imagens placeholder

Informe largura e altura ou escolha uma predefinição
Escolha as cores e um rótulo, ou deixe as dimensões
Copie o data URI ou baixe o SVG ou o PNG
Cole o trecho de HTML, CSS ou JSX no seu layout

Exemplo

Entrada

1200 × 630 · #e5e7eb background

Saída

<img src="data:image/svg+xml,%3Csvg…" width="1200" height="630" alt="" />

Um placeholder de cartão Open Graph como data URI: sem requisição, sem queda e com a mesma aparência off-line.

Erros comuns e solução de problemas

O data URI quebra a folha de estilo. — Coloque entre aspas duplas dentro de url(), como faz o trecho de CSS daqui.
O PNG fica borrado em uma tela retina. — Gere no dobro do tamanho de exibição: ele é rasterizado exatamente nos pixels informados.

Perguntas frequentes

Como faço uma imagem placeholder de um tamanho específico?: Digite a largura e a altura acima e a imagem é gerada na hora. Baixe como SVG ou PNG, ou copie o data URI.
Por que usar data URI em vez de um serviço?: Elimina uma requisição por imagem, funciona off-line e não quebra quando um serviço externo cai ou limita o uso.
SVG ou PNG para placeholders?: SVG para tela: pesa algumas centenas de bytes e fica nítido em qualquer tamanho. PNG quando uma ferramenta exige um bitmap.
Qual o tamanho de uma imagem Open Graph?: 1200 por 630 pixels, que é a predefinição incluída: é o que Facebook, LinkedIn e a maioria das prévias recortam.

Ferramentas relacionadas

Gerador de BlurHash — Codifica e decodifica placeholders de imagem borrados.
Gerador de ícones de app — Transforme uma imagem em todos os tamanhos de ícone de app para iOS, macOS e Android, baixados em um ZIP, no seu navegador.
SVG para PNG — Transforme marcação SVG ou um arquivo .svg em um PNG ou JPG nítido em qualquer escala, no navegador.
Otimizador de imagens — Recodifique e reduza imagens (JPEG/WebP/PNG), com redimensionamento opcional.
Calculadora de proporção de tela — Simplifica proporções, resolve dimensões, CSS incluído.
Gerador de Open Graph — Gere meta tags Open Graph e Twitter com prévia do card social.