Como crio uma imagem placeholder de um tamanho exato?

Digite a Largura (px) e Altura (px), escolha as cores ou um tema de cor e clique em Baixar PNG, Baixar JPG ou Baixar SVG. Por padrão, a imagem mostra suas dimensões, como 800 x 600, como rótulo.

Qual é a maior imagem placeholder que posso gerar?

Largura e altura devem estar entre 1 e 4000 px cada. Valores fora desse intervalo mostram o erro Largura e altura devem estar entre 1 e 4000 px.

Como coloco uma imagem placeholder diretamente no HTML sem um arquivo?

Clique em Copiar como data URL e cole no atributo src de uma tag img. Você também pode usar Copiar trecho HTML ou Copiar fundo CSS. Não é necessário hospedar a imagem externamente.

Posso gerar tamanhos padrão para redes sociais ou web?

Sim. Os Tamanhos predefinidos incluem Publicação do Instagram, História do Instagram, Cartão Twitter, Open Graph, Miniatura do YouTube, Capa do Facebook e Cabeçalho de email. Baixar todas as predefinições (ZIP) salva todos os onze como arquivos PNG.

Como coloco meu próprio texto ou linhas diagonais no placeholder?

Digite um rótulo em Texto personalizado, por exemplo, Imagem de destaque, em vez de mostrar as dimensões. Marque Mostrar linhas diagonais (X) para desenhar diagonais suaves. Textos longos encolhem automaticamente para caber na largura.

Sim. Todas as ferramentas são gratuitas, sem conta e sem cartão de crédito. O processamento acontece no seu dispositivo, e não nos nossos servidores, e é isso que permite manter tudo gratuito.

Sim. Funciona nos navegadores móveis atuais em iOS e Android, sem instalar nada.

🖼️

Gerador de Imagem Placeholder grátis

Gere imagens placeholder coloridas com dimensões, texto e cores personalizados. Tamanhos padrão para redes sociais, mockups e comps de design.

Executa no seu navegadorSem inscrição, sem pop-upsSem login necessárioGratuito para sempre

Largura (px)

Altura (px)

Tamanhos predefinidos

Temas de cores

Fundo

Texto / linhas

Texto personalizado (deixe em branco para dimensões)

Mostrar dimensões se não houver texto personalizadoMostrar linhas diagonais (X)

💡 Para mockups HTML: use a opção Copiar como data URL e cole em <img src="..."> para placeholders inline. Para designs no Figma / Sketch, baixe o PNG e arraste para dentro.

Usos comuns

Imagens de Espaço Reservado para Mockups de DesignGere caixas coloridas dimensionadas para usar no Figma, Sketch ou mockups de design da web antes que imagens reais estejam prontas.
Espaços Reservados Inline para Protótipos HTMLUse "Copiar como URL de Dados" para incorporar imagens de espaço reservado diretamente em HTML para protótipos rápidos.
Espaços Reservados para Slots de Conteúdo CMSAo demonstrar um modelo CMS, use imagens de espaço reservado em vez de conteúdo real para visualizações sensíveis.
Modelos de Imagem de Redes SociaisGere espaços reservados dimensionados corretamente para modelos de posts do Instagram, Facebook, Twitter e LinkedIn.
Imagens de Teste de Layout CSSGere imagens em proporções de aspecto extremas para teste de stress de layouts CSS responsivos.

Como funciona

Tudo acontece no seu navegador usando a API HTML Canvas e marcação SVG escrita à mão — sem servidor, sem envio, sem serviço de terceiros. Define dimensões, cores, e texto de etiqueta, e a ferramenta pinta a imagem diretamente num elemento canvas em tempo real, depois serializa-a para PNG, JPEG, ou SVG a pedido.

1
Configure dimensões e cores
Escreva uma largura e altura (1–4000 px cada), ou escolha uma de onze predefinições cobrindo tamanhos comuns de redes sociais e design. Escolha uma cor de fundo e texto dos temas integrados ou insira qualquer valor hexadecimal diretamente; um seletor de cor nativo e um campo de texto validado permanecem sincronizados.
2
A Canvas API renderiza a pré-visualização instantaneamente
Um efeito React chama drawPlaceholder() a cada mudança. Esta função usa CanvasRenderingContext2D para preencher o retângulo com a cor de fundo, opcionalmente desenhar linhas de mira diagonais ténues a 15% de opacidade, depois medir e centrar o seu texto de etiqueta — reduzindo automaticamente a fonte até caber dentro de 90% da largura do canvas.
3
Exportar como PNG, JPEG, ou SVG
Os downloads PNG e JPEG chamam canvas.toDataURL(), convertem o resultado base64 em um Blob em memória e disparam o download — tudo sincronamente dentro do gesto do usuário para que as regras de download do iOS Safari sejam satisfeitas. A exportação SVG constrói uma string SVG autocontida com um rect correspondente, linhas diagonais opcionais e um elemento de texto, e então salva como um arquivo .svg.
4
Exportação em lote e atalhos de cópia
O botão 'Baixar todas as predefinições' importa dinamicamente o JSZip, re-renderiza cada um dos onze tamanhos predefinidos em um canvas fora da tela usando a mesma função de desenho e empacota todos os PNGs em um único ZIP. Os botões de copiar emitem uma URL de dados PNG, uma tag img SVG inline ou uma declaração CSS background-image para colagem imediata em código.