Desenvolvimento Web
Placeholder Image Generator
Gerar uma imagem de espaço reservado do tamanho especificado para layouts e design.
A placeholder of the right size lets you check a layout before real images are ready — with correct proportions and dimensions labeled right on the image, so you can orient yourself in the mockup.
How to use it
- Enter a width and height in pixels and a placeholder image is generated instantly with its dimensions labeled.
- Optionally set the background and text color to match the mockup's theme.
- Download the finished image or copy a link to use directly in a src attribute.
Common uses
- Laying out a page before real photos or illustrations arrive from a designer.
- Testing a responsive image grid with various aspect ratios and sizes.
- Demoing a prototype to a client with clear dimensions instead of empty boxes.
Things to keep in mind
SVG placeholders weigh just a handful of bytes regardless of the size you set — the format choice affects how much real weight they add to a page during development.
A placeholder is meant purely for temporary use in development — it must be swapped for a real image before launch.
Perguntas frequentes
Como controlo o tamanho e a aparência da imagem?
Você define a largura e altura em pixels, além das cores de fundo e texto; se você não digitar texto personalizado, a ferramenta mostra por padrão as próprias dimensões, como 600x400.
Para que serve esta ferramenta?
É destinada a mockups e prototipagem de layout — inserir uma imagem de espaço reservado permite verificar espaçamento, proporções e design antes que as imagens reais estejam prontas.
Posso usar a imagem sem baixar um arquivo?
Sim, além de baixar você pode copiar a imagem como Data URI e colá-la diretamente no seu HTML ou CSS.
Qual a diferença entre um placeholder em SVG e um em PNG?
Um placeholder em SVG é vetorial, então escala sem perda de qualidade e costuma pesar apenas alguns kilobytes independente do tamanho, enquanto PNG é um formato raster cujo peso cresce com o tamanho da imagem, o que simula melhor o comportamento de uma foto real ao testar o desempenho da página.
O tamanho do placeholder realmente afeta a velocidade de carregamento da página durante o desenvolvimento?
Placeholders em SVG praticamente não afetam a velocidade, já que pesam apenas alguns bytes independente das dimensões definidas, enquanto placeholders raster grandes podem adicionar um peso perceptível à página — por isso, para testes de desempenho, vale escolher um formato próximo da futura imagem real.