Placeholder Image Generator
Gere imagens de espaço reservado em SVG dinamicamente via interface interativa na web ou uma Edge API rápida.
Dimensões
Pré-visualização SVG em tempo real
420 × 420 pxUso da API e Exemplos de Integração
Embed vector placeholder images directly into your HTML, Markdown, or CSS layout mockups using the Edge API endpoint.
<img src="https://jsonforge.app/api/placeholder/420x420" alt="Placeholder Image" width="420" height="420" />O que é Placeholder Image Generator?
O Placeholder Image Generator renderiza imagens de espaço reservado em SVG, leves e vetoriais, sob demanda — seja interativamente na interface abaixo, seja por um endpoint HTTP público que você pode soltar direto num `<img src>`, numa imagem Markdown ou num layout de mockup. Cada imagem é construída a partir de um template simples de string SVG — um retângulo de fundo, um padrão de grade opcional e um rótulo de texto centralizado — sem canvas, sem binário do Sharp e sem navegador headless envolvidos, o que torna a geração praticamente instantânea. Você controla largura e altura de forma independente (de 1px até 10000px cada), cor de fundo e de texto como valores hex, um raio de canto opcional, uma sobreposição sutil de grade no fundo e um texto personalizado que volta para as próprias dimensões da imagem quando deixado em branco. A rota dedicada `/api/placeholder-image/{width}x{height}` roda no Next.js Edge Runtime e devolve o SVG com um cabeçalho Cache-Control imutável de um ano, então um CDN ou navegador que já tenha armazenado em cache uma dada URL nunca precisa regenerá-la.
Como usar Placeholder Image Generator
- Informe a Largura e Altura desejadas em pixels, ou selecione um tamanho predefinido como 420x420, 800x600 ou 1920x1080.
- Personalize a cor de fundo e a cor do texto com os seletores de cor ou códigos hex.
- Opcionalmente, informe um texto personalizado para sobrepor, ajuste o raio dos cantos e ative a grade de fundo.
- Clique em 'Copy Image URL' para obter instantaneamente um link do endpoint da API, ou em 'Download SVG' para salvar o arquivo gerado localmente.
Exemplos
Placeholder quadrado básico 420x420
Entrada
https://jsonforge.app/api/placeholder/420x420
Saída
Imagem SVG de espaço reservado 420x420 com fundo cinza padrão (#e5e7eb) e texto cinza escuro (#6b7280).
Cores e texto personalizados
Entrada
https://jsonforge.app/api/placeholder/800x600?bg=0f172a&color=ffffff&text=Hero+Banner
Saída
SVG de espaço reservado 800x600 com fundo ardósia escuro e texto branco centralizado 'Hero Banner'.
Cantos arredondados e grade sutil
Entrada
https://jsonforge.app/api/placeholder/600x400?bg=4f46e5&color=ffffff&radius=24&grid=true
Saída
SVG de espaço reservado 600x400 com fundo índigo, cantos arredondados de 24px e padrão de grade no fundo.
Rótulo padrão sem parâmetros
Entrada
https://jsonforge.app/api/placeholder/1200x630
Saída
SVG de espaço reservado 1200x630 com o fundo cinza padrão e o texto "1200 × 630" derivado automaticamente das dimensões, já que nenhum parâmetro de texto foi fornecido.
Erros comuns
- Incluir um caractere '#' nos parâmetros da query string sem codificação de URL (use `bg=2563eb` em vez de `bg=#2563eb`).
- Passar valores não numéricos para largura ou altura (por exemplo, `420px420`), o que retorna um erro HTTP 400.
- Esperar saída raster PNG/JPG diretamente (a implementação atual devolve imagens SVG vetoriais limpas).
- Solicitar dimensões extremas como 9999×9999 para mockups simples de layout — o SVG é válido em qualquer tamanho, mas incorporar dezenas de placeholders enormes numa página única ainda incha o DOM e torna a rolagem lenta.
- Esquecer de codificar em URL textos personalizados com caracteres especiais como `&` ou `#` ao construir a URL à mão — use `encodeURIComponent` em vez de concatenar strings brutas.
Por que usar esta ferramenta
- A geração leva menos de 10ms, já que é construída a partir de um template de string SVG em vez de renderização em canvas ou navegador headless, e as respostas carregam um cabeçalho Cache-Control imutável de 1 ano.
- Saída em SVG vetorial que permanece nítida em qualquer densidade e escala de tela.
- Largura, altura, cor de fundo/texto, raio de canto e a grade de fundo são definidos independentemente por parâmetros de consulta ou pelos controles da interface.
- Sem dependências externas, binários do Sharp, Canvas ou Puppeteer necessários.
- Um único endpoint serve tanto de prévia em tempo de design quanto de asset de produção — a URL exata que você copia da prévia ao vivo é segura para fixar em marcação entregue, já que a saída nunca muda para a mesma query string.