BrowserTools
Início / Imagens / Gerador de imagens placeholder, cria imagens de teste no teu navegador

Gerador de imagens placeholder, cria imagens de teste no teu navegador

Gera imagens placeholder inteiramente no teu navegador. Define tamanho, cores, texto e formato (PNG, JPEG, WebP ou SVG) e descarrega ou copia um data URI.

Mantido por BrowserTools

A carregar Gerador de imagens placeholder, cria imagens de teste no teu navegador… Se nada acontecer, ativa o JavaScript.

Uma imagem placeholder é um gráfico provisório que ocupa o lugar das fotos e ilustrações finais enquanto uma página está a ser desenhada ou desenvolvida. Este gerador cria-as num instante e inteiramente dentro do teu navegador: escolhe uma largura e uma altura (de 1 até 4000 píxeis, com predefinições de um clique para tamanhos comuns como 1920×1080 ou 1200×630), escolhe uma cor de fundo e de texto, escreve a tua própria etiqueta se quiseres e descarrega o resultado como PNG, JPEG, WebP ou SVG. Por defeito, a imagem mostra as suas próprias dimensões, a convenção em que os programadores confiam para identificar os espaços de um layout num relance.

Perguntas frequentes

Para que serve uma imagem placeholder?
As imagens placeholder reservam espaço num layout antes de o material gráfico final existir. Os designers colocam-nas em wireframes e maquetes, os programadores usam-nas para testar espaços de imagem, comportamento responsivo e modelos de CMS, e os testers usam imagens de tamanho exato para verificar recortes e lógica de proporções. Etiquetar a imagem com as suas próprias dimensões torna cada espaço identificável num relance.
Esta ferramenta contacta um serviço como o placehold.co?
Não. Tudo é gerado localmente no teu navegador com a API de canvas ou marcação SVG embutida. Não há pedidos de rede, nem serviço externo, nem limites de utilização, nem dependências que possam ir abaixo. Funciona offline e nunca vê nem guarda nada do que geras.
Que formato de saída devo escolher?
O SVG é normalmente o melhor para placeholders: é minúsculo, escala na perfeição para qualquer resolução e pode ser colado como código. Escolhe PNG quando uma ferramenta do teu fluxo exigir um ficheiro raster, JPEG quando quiseres o raster mais pequeno em tamanhos grandes de tipo fotográfico e WebP para fluxos modernos que o suportem. Os quatro são gerados localmente.
O que é um data URI e quando devo usar um?
Um data URI incorpora a imagem inteira diretamente no HTML ou no CSS como uma cadeia base64 (ou SVG codificado em URL), por exemplo src="data:image/png;base64,...". É perfeito para protótipos rápidos e demos de ficheiro único porque não há nenhum recurso separado para alojar. Evita data URIs enormes em produção, porque não podem ser guardados em cache separadamente e incham o documento.
Porque é que a ferramenta me avisa que o data URI é grande?
A codificação base64 torna os dados binários cerca de 33% maiores do que o próprio ficheiro, e a cadeia inteira vive dentro do teu HTML ou CSS. Um PNG de 4000×4000 pode facilmente produzir um URI de vários megabytes que atrasa os editores e o carregamento da página. O aviso aparece para poderes mudar para um ficheiro descarregado ou para um SVG, que é drasticamente mais pequeno em imagens de cor uniforme.
Qual é o tamanho máximo de imagem que posso gerar?
A largura e a altura aceitam valores de 1 a 4000 píxeis, o que cobre desde um substituto de píxel de rastreio de 1×1 até faixas de 4K e além. O limite mantém razoável o uso de memória do canvas em dispositivos comuns; os navegadores começam a falhar em silêncio com canvas gigantescos, por isso a ferramenta fica confortavelmente abaixo desses limiares.
Posso pôr o meu próprio texto no placeholder?
Sim. Por defeito a imagem mostra as suas próprias dimensões, como 800×600, que é a etiqueta mais útil durante o desenvolvimento. Escreve o que quiseres no campo de texto para a substituir, por exemplo "Imagem principal", "Brevemente" ou o nome de um cliente. Se deixares o campo vazio, volta a etiqueta automática com as dimensões.
Como é escolhido o tamanho da letra no modo automático?
O modo automático dimensiona a etiqueta para cerca de um quinto do lado mais curto da imagem e encolhe-a ainda mais se o texto for transbordar a largura. Assim, as etiquetas curtas ficam grandes e legíveis, enquanto textos personalizados longos continuam a caber em faixas estreitas. Muda para o modo manual para definires tu mesmo um tamanho exato em píxeis.
Porque é que o SVG é muitas vezes melhor do que o PNG para placeholders?
Um placeholder SVG são apenas algumas linhas de marcação: um retângulo e um elemento de texto. Costuma pesar menos de meio kilobyte sejam quais forem as dimensões, mantém-se perfeitamente nítido em qualquer densidade de ecrã e pode ser editado à mão mais tarde. O PNG e outros rasters crescem com o número de píxeis e ficam desfocados quando ampliados.
Posso usar as imagens geradas comercialmente?
Sim. O resultado é um simples retângulo colorido com um texto que tu próprio configuraste; não contém material gráfico de terceiros, tipos de letra incorporados de serviços externos nem material licenciado. Podes usar os ficheiros gerados em maquetes comerciais, produtos, documentação ou onde quiseres, sem atribuição.

Sobre Gerador de imagens placeholder, cria imagens de teste no teu navegador

A maioria dos serviços de placeholders funciona pedindo uma imagem a um servidor remoto, o que significa que cada maquete que abres dispara pedidos de rede, deixa de funcionar quando estás offline, atrasa o desenvolvimento local e expõe os URLs do teu trabalho em curso a terceiros. Esta ferramenta faz o mesmo trabalho com zero envolvimento da rede: a imagem é desenhada num canvas (ou montada como marcação SVG) diretamente no teu dispositivo. Nada é pedido, enviado ou registado em lado nenhum, as pré-visualizações aparecem de imediato e o gerador continua a funcionar num avião, atrás de uma firewall empresarial rígida ou num ambiente de demonstração sem ligação.

Além de descarregares um ficheiro, podes copiar a imagem como data URI e colá-la diretamente num atributo src ou num background-image de CSS, o que mantém os protótipos rápidos totalmente autossuficientes, sem ficheiros de recursos para gerir. A ferramenta avisa-te quando um data URI está a ficar grande, porque o base64 aumenta o tamanho em cerca de um terço e URIs muito grandes incham o HTML e as folhas de estilo. Se escolheres a saída SVG, também podes copiar o próprio código SVG, que costuma ser a opção mais pequena e mais nítida, já que escala para qualquer resolução e muitas vezes pesa apenas algumas centenas de bytes.

Os usos habituais incluem wireframes e maquetes de design, dados de exemplo para CMS, testes unitários e de layout que precisam de uma imagem com um tamanho exato, substitutos de cartões Open Graph e de redes sociais (a predefinição 1200×630), miniaturas de vídeo (1920×1080) e grelhas de comércio eletrónico à espera da fotografia de produto. O tamanho da letra é calculado automaticamente para que a etiqueta continue legível em quaisquer dimensões, ou podes defini-lo manualmente para um aspeto específico. Quando os recursos reais chegarem, o redimensionador de imagens e o gerador de favicons deste site ajudam-te a prepará-los, e o gerador de gradientes pode produzir fundos provisórios mais decorativos.

Lorem Ipsum para imagens: como os placeholders se tornaram um clássico da web

Muito antes da web, os designers de imprensa marcavam os layouts inacabados com as letras FPO, abreviatura de "for position only" (apenas para posição), carimbadas sobre o material gráfico provisório para que ninguém enviasse por engano uma imagem de rascunho para a gráfica. O texto recebia o mesmo tratamento através do "greeking" e da famosa passagem Lorem Ipsum, latim baralhado usado como enchimento desde que os tipógrafos o popularizaram nos anos 60 a partir de um texto de Cícero do século I. Quando o design passou para os ecrãs, a caixa cinzenta FPO acompanhou-o e simplesmente aprendeu a descrever-se a si própria, com as suas dimensões em píxeis impressas ao centro.

A web transformou os placeholders num serviço. No início da década de 2010 surgiu uma vaga de pequenos sites de propósito único em que o próprio URL era a API: o placehold.it servia caixas cinzentas no tamanho que escrevesses no endereço, o placekitten.com devolvia fotografias de gatinhos recortadas às dimensões pedidas, e o lorempixel, o placebear, o fillmurray (fotos de Bill Murray) e o placecage (Nicolas Cage) seguiram a mesma receita. Os placeholders de gatinhos e de celebridades tornaram-se uma piada recorrente no trabalho de agência, e mais do que uma equipa tem uma história sobre uma foto de gato ou de Nicolas Cage que sobreviveu por acidente até uma demonstração ao cliente ou a um lançamento em produção.

Essa comodidade tinha um custo escondido: todo o placeholder remoto é uma dependência de rede. Quando o popular serviço lorempixel se tornou instável e o placehold.it mudou de domínio, incontáveis maquetes, tutoriais e até bases de código publicadas ficaram cheias de imagens partidas, um pequeno lembrete de que os recursos ligados a quente apodrecem. A prática moderna voltou aos placeholders autossuficientes, pequenos SVG embutidos, data URIs em base64 e ficheiros gerados localmente, que é exatamente a abordagem desta ferramenta: a clássica caixa cinzenta etiquetada com as dimensões, mas sem o servidor.

Ferramentas relacionadas

Redimensionar imagens, altera o tamanho de fotos online

Redimensiona imagens por largura, altura ou percentagem, bloqueia a proporção e escolhe um modo de ajuste. 100 % no teu navegador, sem envios.

Gerador de Favicon

Gera PNG de favicon em todos os tamanhos padrão e um ficheiro .ico multirresolução a partir de qualquer imagem, inteiramente no teu navegador.

Gerador de Gradientes CSS

Cria gradientes CSS lineares, radiais e cónicos com uma pré-visualização em direto e código pronto a copiar.

Otimizador de SVG

Limpa e reduz ficheiros SVG removendo metadados do editor, comentários e espaços em branco redundantes, localmente no teu navegador.
Apoiar