Pular para o conteúdo

Gerador de imagem de placeholder

Gere uma imagem de placeholder em qualquer tamanho, cor de fundo e texto de rótulo, e baixe como PNG, JPEG ou SVG. Nada é enviado.

px
px

1 a 4.096 px por lado.

Tamanhos comuns
Aparência
#
#
px

Imagem de placeholder

Dimensões
800 x 600
Formato
PNG
Tamanho do arquivo
-

Como funciona

Um gerador de imagem de placeholder desenha um retângulo simples com tamanho e cor escolhidos, além de um rótulo, para que designers e desenvolvedores tenham uma imagem provisória antes que a definitiva esteja pronta, sem precisar de um serviço de placeholder ou de uma requisição de rede.

  1. Definir tamanho

    Digite uma largura e altura ou escolha um modelo comum, como uma imagem OG ou um post do Instagram.

  2. Escolha as cores e o rótulo

    A visualização é atualizada enquanto você digita. Deixe o rótulo em branco para mostrar o tamanho em pixels.

  3. Baixe ou copie

    Salve o arquivo, copie o URI de dados ou uma tag <img> pronta para colar.

PNG, JPEG ou SVG

Todos os três formatos são gerados localmente no seu navegador com as APIs Canvas e SVG; nenhuma imagem é enviada a um servidor.

  • PNG: sem perdas, suporta cores planas sem transparência de forma limpa e é a opção padrão mais segura para mockups.
  • JPEG: geralmente resulta em um arquivo menor para imagens semelhantes a fotos, mas retângulos de espaço reservado têm compressão similar em ambos os formatos, então PNG é normalmente a melhor escolha aqui.
  • SVG: marcação independente de resolução que escala para qualquer tamanho sem perda de qualidade e sem limite de pixels, ideal quando o mesmo espaço reservado precisa funcionar em vários tamanhos.

Nada sai do seu dispositivo

A imagem é desenhada inteiramente em um canvas HTML ou construída como texto SVG no seu navegador. Baixar, copiar o URI de dados e copiar a tag <img> funcionam offline assim que a página for carregada.

Perguntas frequentes

Como criar uma imagem de espaço reservado para um wireframe ou mockup?

Digite uma largura e altura ou clique em um modelo, depois escolha uma cor de fundo e de texto e um rótulo opcional. A visualização e o download são atualizados em tempo real conforme você altera qualquer campo. Clique em Baixar para obter um arquivo ou em Copiar para o URI de dados exibido abaixo da visualização.

Como usar uma imagem de espaço reservado diretamente no HTML sem um arquivo separado?

Clique em Copiar para copiar o URI de dados da caixa de saída ou clique em Copiar tag <img> para obter um elemento pronto para colar, como <img src="data:image/png;base64,..." width="800" height="600" alt="Placeholder">. Cole diretamente no seu HTML; nenhuma referência a servidor ou arquivo é necessária.

Quais predefinições de tamanho comuns estão disponíveis?

Imagem OG (1200x630), postagem do Instagram (1080x1080), miniatura do YouTube (1920x1080), cabeçalho do Twitter (1500x500), tela de celular (375x812), captura de tela da App Store (1290x2796), iPad (768x1024) e story do Instagram (1080x1920). Clique em qualquer predefinição para aplicar essas dimensões e personalize as cores e o texto.

Posso gerar um placeholder SVG em vez de uma imagem rasterizada?

Sim. Escolha SVG na lista de formato de arquivo. A saída é um pequeno elemento <svg> corretamente escapado com um retângulo de fundo, linhas-guia diagonais opcionais e um rótulo de texto. O SVG é independente de resolução e não tem limite de tamanho em pixel, ao contrário de PNG ou JPEG.

Qual é o tamanho máximo de imagem que esta ferramenta pode gerar?

A largura e a altura são limitadas a 4.096 px para PNG e JPEG, pois telas muito grandes podem esgotar a memória de textura da GPU em dispositivos básicos e gerar uma saída em branco. Para um placeholder maior que cerca de 2.048 px de lado, use o formato SVG, que não tem limite de resolução em pixel.