Imagem placeholder
Gere placeholders personalizados para mockups, rascunhos e sites em construção: escolha o tamanho, as cores e o texto, e baixe o PNG pronto para usar.
Para que servem as imagens placeholder
Quando uma página ou um mockup ainda não tem as fotos finais, um placeholder com as dimensões exatas mantém o layout estável: os blocos não vão “pular” quando a imagem real chegar, e quem está revisando o rascunho vê na hora quanto espaço ela vai ocupar. Diferente de serviços como placehold.co ou placekitten, este PNG é gerado localmente: ele funciona até offline, e não some se um serviço externo sair do ar ou ficar lento demais.
Tamanhos comuns que vale conhecer
Alguns formatos recorrentes: 1200×630 para as prévias sociais do Open Graph, 1280×720 para miniaturas de vídeo 16:9, 1080×1080 para posts quadrados do Instagram, 300×250 para banners do tipo medium rectangle e 150×150 para avatares. O texto se ajusta sozinho ao tamanho da imagem: deixe-o vazio e as dimensões serão impressas no lugar, a convenção mais útil para identificar placeholders de relance em um mockup.
Por que um placeholder mantém uma página de pé
Um bloco sem imagem tem altura zero até a foto chegar, e quando ela chega empurra tudo o mais para baixo: é o defeito que o leitor percebe como «a página pulando enquanto eu olho». Ele até tem nome nas métricas do Google, que o mede como mudança de layout e o trata como problema de qualidade.
Um placeholder com as dimensões exatas ocupa o espaço desde o primeiro instante, e a página fica parada. É o mesmo motivo pelo qual, no site pronto, as imagens devem sempre declarar largura e altura: não para fixar o tamanho delas, mas para avisar o navegador de quanto espaço reservar antes mesmo de baixá-las.
As medidas que se repetem
1200 por 630 é a prévia que aparece quando um link é compartilhado: é a medida exigida pelos metadados do Open Graph, e uma página sem ela é compartilhada com uma prévia feia ou vazia. 1280 por 720 é o 16:9, ou seja, capas de vídeo e apresentações. 1080 por 1080 e 1080 por 1920 são o quadrado e o vertical das redes sociais.
Para imagens dentro de um artigo, a medida prática gira em torno de 1600 pixels de largura, que cobre a maioria das telas, inclusive as de alta densidade, sem gerar arquivos enormes. E para miniaturas, 400 pixels bastam: carregar uma imagem de 3000 pixels para mostrá-la a 300 é o desperdício mais comum da web.
Placeholder ou imagem real: quando parar
Um placeholder cinza com as dimensões escritas em cima serve para projetar: conferir se o texto ao redor funciona, se as proporções se mantêm no celular, se a grade não quebra. Para isso ele é melhor do que uma fotografia, porque não distrai e não deixa o design ser julgado pela beleza da imagem.
Vira problema quando sobrevive até a produção: isso acontece com mais frequência do que se imagina, e um site publicado com caixas cinzas passa a impressão de abandono. Vale manter os placeholders em uma cor inconfundível, para que não sejam confundidos com conteúdo final.
As alternativas, e seus limites
Muita gente usa serviços online que geram placeholders a partir de uma URL: são práticos, mas prendem uma página a um site externo que pode ficar lento, mudar ou desaparecer, e a cada carregamento esse serviço fica sabendo quem está olhando a página. Para um protótipo, tudo bem; para um site publicado, não.
A alternativa mais leve de todas nem é uma imagem: é um retângulo colorido desenhado com a folha de estilos, que pesa zero bytes. Já as imagens placeholder baixadas são necessárias quando o arquivo precisa ser um arquivo de verdade: um mockup para enviar a um cliente, uma apresentação, um documento.
Veja também
Para as dimensões de uma imagem real existem Redimensionar foto e Dimensões e informações da foto, para o tamanho do arquivo Comprimir imagem. Para gráficos de teste Cor aleatória e Gerador de degradês, e para textos de preenchimento Gerador de lorem ipsum.