Pressione Ctrl+D para adicionar esta página aos favoritos
O gerador de imagens placeholder é uma ferramenta online gratuita que cria imagens temporárias para desenvolvimento e design.
Como usar Imagem placeholder?
Insira as dimensões (largura × altura).
Defina cor de fundo, cor do texto e texto a exibir.
Clique em gerar e baixe a imagem ou copie a URL.
Perguntas frequentes sobre Imagem placeholder
Para que são usadas as imagens placeholder?
São usadas no desenvolvimento web para verificação de layout, wireframes, protótipos e mockups antes das imagens finais.
Posso exibir texto personalizado na imagem?
Sim, por padrão as dimensões são exibidas, mas você pode alterar para qualquer texto. Cor e fonte do texto também são personalizáveis.
O que quebra se uma imagem de espaço reservado chegar à produção?
Um único retângulo cinza avisa ao visitante que o site está incompleto e, numa página de produto, faz a pessoa hesitar na compra. Na busca também custa caro: o espaço reservado em branco é indexado no Google Imagens e, se o campo image dos seus dados estruturados de produto apontar para essa URL, a página pode perder a elegibilidade a resultados ricos. Antes de cada publicação, procure em todo o código por trechos como placeholder ou via.placeholder.
Que tamanho o espaço reservado deve ter para o layout não pular?
Ele precisa ter exatamente a mesma proporção da imagem que ocupará aquele espaço. Se a foto real carregar com outro formato, tudo abaixo dela desce de uma vez, e isso piora sua pontuação de Deslocamento Cumulativo de Layout nas métricas do Google. As dimensões em pixels não precisam bater, mas a proporção sim — e coloque os atributos width e height na tag img para o navegador reservar o espaço antes de o arquivo chegar.
Como aproveitar Imagem placeholder ao máximo?
Use a mesma proporção da foto real para o layout não se mexer na hora da troca.
Escreva o tamanho (1200x630) na própria imagem: agiliza muito a conversa sobre specs.
Mesmo provisória, a imagem merece um alt dizendo o que vai aparecer ali.