Gerador de imagem placeholder: PNG, JPG, WebP ou SVG | We.Inc
Crie uma imagem placeholder em qualquer tamanho, com suas próprias cores e texto. Baixe em PNG, JPG ou WebP, ou copie uma data URL SVG inline que não precisa de hospedagem de imagens.
Gerador de imagem placeholder
Defina largura, altura, fundo, cor do texto e um rótulo, e este gerador desenha um placeholder no seu navegador. Baixe em PNG, JPG ou WebP, ou copie uma pequena data URL SVG para colar direto em uma tag img ou no CSS, para que o seu protótipo nunca dependa de um serviço de imagens de terceiros.
Escolha o formato conforme onde o placeholder vai ficar
Formato
Melhor para
Observações
Data URL SVG
Protótipos e exemplos de código
Sem arquivo, sem requisição, nítido em qualquer zoom
PNG
Arquivos de design, envios para um CMS
Sem perdas, todo navegador suporta
JPG
Lugares que recusam PNG
Com perdas, sem transparência
WebP
Testar o peso real da página
Com perdas aqui, arquivos pequenos
Serviços de placeholder hospedados são práticos até um deles cair ou ser bloqueado por um filtro de rede, e aí todas as caixas cinza da sua demonstração quebram. Esta ferramenta cria a imagem localmente: você recebe um arquivo de verdade ou uma string SVG independente que fica dentro do seu código.
Escolha um tamanho comum na lista ou digite a sua própria largura e altura, até 4000 pixels de cada lado.
Escolha as cores do fundo e do texto. Deixe o rótulo vazio para mostrar as dimensões, ou digite algo como Foto principal.
A prévia é desenhada como SVG no seu navegador. Copie a data URL ou a tag img pronta para usar no código.
Para ter um arquivo de verdade, escolha PNG, JPG ou WebP e baixe. O canvas do seu navegador faz a codificação, então nada é enviado.
Mantenha sempre os atributos width e height na img, mesmo em placeholders, para que o layout não pule quando a foto real chegar.
Rotule os placeholders com o que vai ali, como Foto da equipe ou Frente do produto, para que o responsável pelo conteúdo saiba o que enviar.
Use um fundo cinza médio com texto mais escuro; caixas totalmente brancas somem em seções brancas da página.
Troque todos os placeholders antes do lançamento. Pesquise data:image/svg+xml no seu código para encontrar algum que tenha ficado para trás.
Perguntas frequentes
Essas imagens expiram?
Não. Um arquivo baixado é seu, e uma data URL SVG é só texto dentro da sua página, então não há nenhum servidor por trás que possa sumir.
Por que o JPG baixado não tem transparência?
O JPEG não tem canal alfa. Todos os placeholders aqui têm fundo sólido de qualquer forma, mas escolha PNG ou WebP se for editar o arquivo depois e precisar de uma área transparente.
Posso usar a data URL SVG no CSS?
Sim. Coloque-a em url("...") dentro de background-image. A ferramenta já troca as aspas duplas por simples e codifica #, < e > para que a string funcione dentro do CSS e de atributos HTML.
Quais navegadores conseguem exportar WebP?
Todo navegador é obrigado a exportar o canvas como image/png, enquanto JPEG e WebP são opcionais. Se um navegador não conseguir gerar WebP, ele devolve um PNG sem avisar, e o nome do arquivo aqui vai indicar isso.
Placeholders que ajudam em vez de esconder problemas
Um bom placeholder tem a mesma proporção da imagem final. Se o destaque vai ser uma foto 16:9, faça o protótipo com 1920 por 1080, não com um quadrado, ou o layout que você aprovar vai cortar mal depois.
Escreva o tamanho pretendido na caixa. Assim designers, redatores e fotógrafos veem o que precisam entregar sem abrir o código.
Data URLs versus arquivos
Uma data URL coloca os bytes da imagem no próprio src. Para um SVG pequeno, isso sai mais barato que uma requisição de rede e torna o trecho portátil: cole em qualquer lugar e ele aparece.
Para qualquer coisa que você vá enviar a um CMS, guardar em um arquivo de design ou manter por um tempo, baixe um arquivo de verdade. Data URLs longas são difíceis de ler em code review.
Tamanhos comuns de placeholder
Predefinições disponíveis no gerador
Uso
Largura
Altura
Card Open Graph
Destaque, 16:9
Miniatura de blog
Post quadrado
Story vertical
Avatar
Foto de produto, 4:5
Banner leaderboard
Placeholder em uma tag img e no CSS
Placeholder SVG inline, sem requisição
A mesma caixa cinza de 640 por 360 usada duas vezes: uma como fonte de imagem e outra como fundo no CSS.
Card Open Graph
Destaque, 16:9
Miniatura de blog
Post quadrado
Story vertical
Avatar
Foto de produto, 4:5
Banner leaderboard
Seu navegador não conseguiu abrir um canvas.
Não foi possível codificar a imagem.
{name} salvo ({n} KB).
Crie um placeholder
Escolha um tamanho, as cores e um rótulo opcional. Copie uma data URL SVG ou uma tag img, ou baixe um PNG, JPG ou WebP gerado no seu navegador.