Desarrollo Web
Placeholder Image Generator
Generar una imagen de marcador de posición del tamaño indicado para maquetas y diseño.
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.
Preguntas frecuentes
¿Cómo controlo el tamaño y apariencia de la imagen?
Estableces el ancho y alto en píxeles más los colores de fondo y texto; si no escribes texto personalizado, la herramienta muestra por defecto las dimensiones mismas, como 600x400.
¿Para qué sirve esta herramienta?
Está pensada para maquetas y prototipado de diseño — insertar una imagen de marcador de posición te permite verificar espaciado, proporciones y diseño antes de que las imágenes reales estén listas.
¿Puedo usar la imagen sin descargar un archivo?
Sí, además de descargar puedes copiar la imagen como Data URI y pegarla directamente en tu HTML o CSS.
¿Cuál es la diferencia entre un placeholder en SVG y uno en PNG?
Un placeholder en SVG es vectorial, así que escala sin pérdida de calidad y suele pesar apenas unos pocos kilobytes independientemente del tamaño, mientras que PNG es un formato rasterizado cuyo peso crece con el tamaño de la imagen, lo que imita mejor el comportamiento de una foto real al probar el rendimiento de la página.
¿El tamaño del placeholder afecta realmente a la velocidad de carga de la página durante el desarrollo?
Los placeholders en SVG apenas afectan a la velocidad, ya que pesan unos pocos bytes independientemente de las dimensiones indicadas, mientras que los placeholders rasterizados de gran tamaño sí pueden añadir un peso notable a la página; por eso, para probar el rendimiento conviene elegir un formato cercano a la futura imagen real.