Gerador de imagens placeholder

Como criar uma imagem placeholder

1. Introduz a Largura (px) e a Altura (px), de 1 a 10 000 píxeis. A pré-visualização e a respetiva proporção são atualizadas enquanto escreves.
2. Escreve um Texto, ou deixa-o vazio para mostrar o tamanho, como «1200×630».
3. Escolhe a Cor de fundo e a Cor do texto.
4. Deixa o Tamanho da letra (px) em 0 para um tamanho automático ajustado à imagem, ou introduz um tamanho em píxeis. Escolhe uma Fonte.
5. Escolhe o Formato: PNG, JPG, WebP ou SVG, e clica em Transferir imagem.

Para criar vários tamanhos de uma vez, abre Lote de tamanhos comuns, marca os tamanhos de que precisas (ou usa Selecionar tudo / Desmarcar tudo) e clica em Transferir os tamanhos selecionados (ZIP). Cada imagem usa as cores, a fonte e o formato definidos acima; com o texto vazio, cada imagem mostra o seu próprio tamanho.

Que formato escolher

• O SVG é o mais leve (algumas centenas de bytes, seja qual for o tamanho) e mantém-se nítido com qualquer zoom. É ideal para maquetes, protótipos e modelos HTML. O texto usa uma fonte do sistema, por isso o aspeto pode variar ligeiramente de computador para computador.
• O PNG dá píxeis exatos e sem perdas. Escolhe-o para programas de design e quando é mesmo preciso um bitmap.
• O JPG produz ficheiros pequenos em tamanhos grandes e é aceite em todo o lado, incluindo sistemas de gestão de conteúdos antigos.
• O WebP é mais pequeno do que o PNG e o JPG e é suportado por todos os navegadores atuais.

Os formatos bitmap estão limitados a cerca de 16,7 milhões de píxeis (por exemplo 4096 × 4096), o maior canvas que os navegadores conseguem codificar. O SVG não tem esse limite.

Tamanhos comuns do lote

Os tamanhos de anúncio seguem as unidades padrão do IAB usadas pela maioria das redes de publicidade; os tamanhos para redes sociais correspondem às recomendações das principais plataformas.

Para que servem as imagens placeholder?

Os placeholders reservam o espaço exato que uma imagem vai ocupar antes de a imagem real existir. Assim, designers e programadores podem verificar uma maquete, testar os pontos de quebra de um design responsivo ou mostrar a um cliente onde vão ficar os elementos visuais, sem andar à procura de fotos de banco de imagens. Mostrar as dimensões na própria imagem deixa claro que tamanho cada espaço espera, e um cinzento neutro mantém a atenção na disposição e não no conteúdo.

Como esta ferramenta cria ficheiros reais, podes usá-los sem ligação à internet, guardá-los num repositório ou largá-los num programa de design, sem depender de um serviço externo de placeholders que pode ficar indisponível ou seguir os visitantes.