Gerador de imagens de espaço reservado (imagens de exemplo)
Gere uma imagem de exemplo diretamente no navegador definindo largura, altura, cor de fundo e cor do texto, e baixe-a como PNG. A imagem nunca é enviada a nenhum servidor.
Tamanhos comuns de imagens de exemplo
| Tamanho | Uso típico |
|---|---|
| 300×200 | Espaço reservado para banner pequeno ou espaço publicitário |
| 800×600 | Imagem dentro de um artigo de blog ou imagem temporária de wireframe |
| 1200×630 | Imagem OGP para os cartões de compartilhamento do Facebook e X (Twitter) |
| 1080×1080 | Publicação quadrada para Instagram e outras redes sociais |
| 1920×1080 | Imagem principal Full HD ou fundo de apresentação de slides |
| 640×360 | Miniatura de vídeo 16:9 ou miniatura de interface em cartões |
O que é uma imagem de espaço reservado
Uma imagem de espaço reservado é um substituto que guarda um lugar enquanto a fotografia ou a ilustração de verdade ainda está por vir. Não passa de um retângulo liso do tamanho que você indicar, em geral com esse tamanho escrito por cima, e serve para provar uma diagramação ou montar uma maquete. Justamente porque o seu conteúdo nada significa, a vista fica na disposição e nas margens em vez de ir para a imagem.
Dê a esta ferramenta uma largura, uma altura, uma cor de fundo e uma cor de texto e ela desenhará na hora uma pré-visualização que você pode guardar como PNG. O texto sobreposto é opcional: se o deixar vazio, entram sozinhos os números «largura × altura», com o que várias medidas postas lado a lado se distinguem de relance. As cores podem ser escolhidas no seletor ou escritas como códigos hexadecimais, ajustando-se com exatidão à paleta de uma maquete. Tudo é gerado dentro do navegador: a imagem nunca é enviada a um servidor.
Como fazer uma imagem de espaço reservado
- Fixe as medidas Escreva a largura e a altura em pixels. Os ajustes 300×200, 800×600, 1200×630 (OGP) e 1080×1080 preenchem ambos os campos de uma vez.
- Escolha as cores Fixe a cor de fundo e a do texto. Além do seletor, pode escrever diretamente um código de cor hexadecimal.
- Acrescente texto se precisar O texto sobreposto é opcional. Deixando-o vazio aparece sozinho «largura × altura», o que muitas vezes basta.
- Confira a pré-visualização É redesenhada a cada mudança. Olhe aqui para que o texto não se perca contra o fundo.
- Baixe o PNG «Baixar PNG» guarda-o no seu equipamento. O arquivo é construído por inteiro no seu dispositivo e não vai a lugar algum.
Dicas para aproveitar melhor
- A predefinição "1200×630 (OGP)" fornece instantaneamente o tamanho padrão exibido sem cortes nos cartões de compartilhamento do Facebook e do X (Twitter).
- Deixar o texto sobreposto em branco exibe automaticamente os números "largura×altura", facilitando distinguir tamanhos rapidamente ao comparar vários wireframes.
- A cor de fundo e a cor do texto podem ser escolhidas com o seletor de cores ou digitadas diretamente como código hexadecimal, permitindo combinar exatamente com a paleta do seu mockup de design.
- A imagem gerada é apenas baixada para o seu dispositivo local — ela nunca é enviada ou armazenada no servidor deste site.
Onde as imagens de espaço reservado ajudam
Montar esquemas e maquetes
Mesmo antes de decidir as fotografias, colocar caixas do tamanho exato previsto permite avançar com a diagramação. Como o tamanho vai escrito na imagem, não confundirá duas delas.
Reservar a moldura de uma imagem OGP
1200×630 é o tamanho que se mostra num cartão de compartilhamento sem cortes. Guarda o lugar até que a peça definitiva esteja pronta.
Exercitar uma função de envio de imagens
Como pode produzir-se na hora uma imagem de quaisquer medidas, convém para provar os limites de um formulário e como a apresentação se comporta.
Tatear uma combinação de cores
Ponha várias em fila variando o fundo e o texto e verá logo se a diferença de claridade deixa o texto legível.
Quando quiser trabalhar sobre uma imagem real
Para mudar as medidas de uma imagem que já tem, use o redimensionamento de imagens; para cortar só a parte que quer, o recorte de imagens.
Termos sobre as imagens de espaço reservado
- Espaço reservado
- Elemento substituto que guarda um lugar até que esteja pronto o que propriamente lhe corresponde. Além de imagens, o Lorem Ipsum cumpre o mesmo papel com o texto.
- Maquete (mockup)
- Amostra imóvel feita para conferir como algo ficará depois de pronto. Permite julgar disposição e margens antes de chegar o material de verdade.
- Imagem OGP
- A imagem que aparece como cartão quando uma página é compartilhada nas redes sociais. 1200×630 é o tamanho de uso corrente; ater-se a ele torna improvável o corte nas bordas.
- Código de cor hexadecimal
- Maneira de escrever uma cor na forma #RRGGBB, dando a intensidade de vermelho, verde e azul em dois dígitos cada, de 00 a FF.
- Pixel
- A unidade mínima com que se constrói uma imagem. A largura e a altura são dadas aqui nesta unidade.
- PNG
- Formato de imagem de compressão sem perda. Uma imagem que não passa de um fundo liso e algum texto ajusta-se-lhe bem, e o arquivo fica pequeno.
Perguntas frequentes
Curiosidade — a cultura das imagens de espaço reservado
O design web tem, há muito tempo, o costume de usar imagens de espaço reservado como substitutas até que as fotos ou ilustrações finais estejam prontas. Segue a mesma ideia do texto de preenchimento "lorem ipsum", usado na indústria gráfica para textos inacabados, só que aplicada a imagens.
Um serviço chamado "Lorem Picsum", lançado em 2014, tornou-se amplamente utilizado como serviço de imagens de espaço reservado que fornece fotografias reais aleatoriamente. Como ele retorna uma foto apenas ao especificar largura e altura na URL, foi adotado em inúmeros mockups de design e tutoriais. Ainda assim, depender de um serviço externo nem sempre é prático para trabalho offline ou projetos com alta confidencialidade.
Esta ferramenta adota uma abordagem diferente: gera instantaneamente uma imagem de cor sólida com um rótulo de texto, tudo dentro do