Generador de Imagen Placeholder
Imágenes de relleno para diseño y desarrollo web, gratis.
Para qué sirve
Placeholders a medida en segundos
Sin dependencias
Generadas en tu navegador, sin llamadas a servicios externos. Funcionan sin conexión.
100% privado
Ningún dato ni imagen se envía a servidores. Todo ocurre localmente.
Colores a medida
Personaliza fondo, texto y etiqueta para que encajen con tu paleta de diseño.
Instantáneo
La imagen se genera en milisegundos. Sin esperas ni colas.
Cómo funciona
Tres pasos, sin complicaciones
Define las dimensiones
Introduce el ancho y el alto en píxeles para tu imagen placeholder.
Personaliza colores y texto
Elige el color de fondo, el color del texto y el texto de la etiqueta (por defecto muestra las dimensiones).
Descarga o copia la URL
Descarga la imagen PNG directamente o usa la data URI generada para incrustarla en tu HTML o CSS.
Preguntas frecuentes
¿Tienes dudas?
Una imagen placeholder o imagen de relleno es una imagen temporal que ocupa el espacio donde irá la imagen definitiva durante el diseño o desarrollo de una página web. Su propósito es visualizar el layout antes de tener el contenido real. Se usan en wireframes, prototipos y durante el desarrollo front-end.
Los tamaños más comunes son: hero (1920x1080 o 1440x900), tarjeta de producto (400x300), avatar/perfil (128x128 o 64x64), thumbnail de blog (800x450 o 16:9), banner lateral (300x250 o 300x600) y og:image para redes sociales (1200x630).
Los servicios externos como Lorem Picsum o Placeholder.com requieren conexión a internet y pueden ser lentos o estar caídos. Generar placeholders localmente garantiza que tus maquetas funcionen sin conexión, no hay dependencias externas y el contenido no varía inesperadamente.
En HTML puedes usar la data URI directamente en el atributo src de una etiqueta img. En CSS puedes usarla como background-image. También puedes referenciar la URL de descarga si la sirves localmente. Para React o Vue, la data URI funciona igual que una URL normal.
Facebook/LinkedIn: 1200x630 (og:image). Twitter/X: 1200x675. Instagram cuadrado: 1080x1080. Instagram historia/reels: 1080x1920. Pinterest: 1000x1500. YouTube thumbnail: 1280x720.
Imágenes placeholder: su papel en el diseño y desarrollo web
El concepto de placeholder en diseño proviene del wireframing, la técnica de crear esquemas de baja fidelidad de una interfaz antes de tener el contenido definitivo. Los wireframes usan cajas grises con una X para indicar donde irán las imágenes — esta convención visual se estandarizó en los años 90 con herramientas como Visio y más tarde con Sketch y Figma. La abreviación FPO (For Position Only) es el término profesional en inglés para este tipo de contenido.
En el desarrollo front-end, las imágenes placeholder resuelven un problema práctico: el código necesita imágenes para renderizarse correctamente antes de que el equipo de contenido las tenga listas. Servicios como Lorem Picsum (lorempicsum.com) o placeholder.com popularizaron el uso de URLs de imágenes de relleno, pero dependen de servidores externos. Las imágenes generadas localmente eliminan esta dependencia.
En diseño responsive, los placeholders también ayudan a verificar que los layouts de imagen se adapten correctamente a diferentes tamaños de pantalla. Generar placeholders con las dimensiones exactas del diseño final (por ejemplo, 16:9 para videos o 1:1 para avatares) permite validar el comportamiento visual antes de tener el contenido real.