Generador de imágenes placeholder
Crea imágenes de relleno para maquetas, wireframes y espacios publicitarios en cualquier tamaño, color y formato. Descarga el archivo o cópialo como data URI, sin depender de un servicio externo.
- Vista previa al instante
- HTML y data URI
- Lote en ZIP
- No se sube nada
Déjalo vacío para mostrar el tamaño. Puedes usar {w}, {h} y {ratio} en cualquier parte del texto.
Muchos tamaños a la vez
Escribe cada tamaño como 300x250. Todas las imágenes usan los colores y el formato elegidos arriba. Hasta 60 tamaños.
Cómo crear una imagen placeholder
Tres pasos, y la vista previa cambia mientras escribes.
- 1
Define el tamaño
Escribe el ancho y el alto en píxeles o elige un tamaño habitual como 300 × 250, 1200 × 630 o 1920 × 1080.
- 2
Elige el aspecto
Selecciona el fondo, el color del texto, la fuente y el texto. Deja el texto vacío para mostrar el tamaño en la imagen.
- 3
Descarga o copia
Guarda el archivo como PNG, JPG, WebP o SVG, o copia la imagen, una data URI o código HTML, CSS y Markdown ya preparado.
Todo lo que necesita un placeholder
Pensado para quienes diseñan y desarrollan y necesitan una imagen de relleno ahora mismo.
Cualquier tamaño
Cualquier ancho y alto de 1 a 8000 px, con tamaños predefinidos para web, anuncios y redes sociales.
Tus colores
Color liso, degradado de dos colores, cruz de wireframe o rayas, con temas de color ya preparados.
Texto propio
Escribe tu propia etiqueta y usa {w}, {h} y {ratio} para insertar el tamaño automáticamente.
Cuatro formatos
PNG, JPG y WebP en píxeles, y SVG para el archivo más ligero, nítido a cualquier tamaño.
Archivos Retina
La exportación en 2× y 3× crea imágenes nítidas para pantallas de alta resolución.
Copiar como código
Copia una etiqueta <img>, una regla CSS de fondo o Markdown, con la imagen incrustada si lo prefieres.
Exportación por lotes
Pega una lista de tamaños y descarga todos los placeholders en un solo archivo ZIP.
Sin dependencias
La imagen es un archivo real de tu proyecto, así que nada falla si un servicio de placeholders se cae.
¿Qué es una imagen placeholder y cuándo conviene usarla?
Una imagen placeholder es una imagen de relleno neutra que reserva el espacio de una imagen real que todavía no existe. En diseño se usa en wireframes y maquetas, en desarrollo mientras se crean plantillas, tiendas y temas, y en publicidad para marcar los espacios de los anuncios. Como el placeholder tiene exactamente el tamaño en píxeles de la imagen final, el diseño puede construirse y probarse antes de que lleguen las fotos.
Muchos proyectos cargan los placeholders desde un servicio externo mediante una URL. Es rápido, pero cada visita a la página depende entonces de un servidor de terceros, le envía una petición y falla si el servicio va lento o está caído. Un archivo generado aquí es una imagen normal que guardas en tu proyecto o incrustas como data URI, de modo que también funciona sin conexión, en plantillas de correo y en pruebas automatizadas.
En la mayoría de los casos el mejor formato es SVG: un placeholder de 600 × 400 ocupa solo unos cientos de bytes y se ve nítido en cualquier pantalla. Elige PNG cuando una herramienta solo acepte imágenes de píxeles, JPG o WebP para probar con tipos de archivo realistas, y la opción 2× para comprobar cómo se comporta un diseño con imágenes de alta resolución. Escribe siempre los atributos width y height en el HTML para que la página no dé saltos mientras cargan las imágenes.
Tamaños de placeholder habituales
| Uso | Tamaño en px | Proporción |
|---|---|---|
| Imagen para compartir Open Graph | 1200 × 630 | 1,91:1 |
| Cabecera o fotograma Full HD | 1920 × 1080 | 16:9 |
| Anuncio rectángulo mediano (IAB) | 300 × 250 | 6:5 |
| Anuncio leaderboard (IAB) | 728 × 90 | 8,09:1 |
| Publicación vertical de Instagram | 1080 × 1350 | 4:5 |
| Avatar o miniatura cuadrada | 400 × 400 | 1:1 |
Consejos
- Cuando lleguen las imágenes reales, llévalas al tamaño reservado con Redimensionar imagen para que el diseño quede exactamente como se planteó.
- ¿Necesitas una imagen para compartir de verdad en lugar de un recuadro gris? El Generador de imágenes OG crea imágenes de 1200 × 630 con título, logo y fondo.
- Con Redimensionar para redes sociales puedes producir las imágenes finales de cada red a partir de una sola.
- Para presentaciones a clientes usa el fondo wireframe: el recuadro con una cruz es la señal clásica de «aquí va una imagen» y nunca se confunde con el diseño definitivo.
Preguntas frecuentes
¿No encuentras tu respuesta? Escríbenos: respondemos rápido.
¿El generador de placeholders es gratuito?
Sí. No hay registro, ni marca de agua, ni límite en el número de imágenes. Puedes usar los placeholders en proyectos privados y comerciales.
¿Se envían mis ajustes o imágenes a un servidor?
No. La imagen se dibuja en tu navegador con el canvas de tu dispositivo y la descarga se crea en local. No se sube nada.
¿Qué formato me conviene?
SVG es la opción más ligera y nítida para sitios web. Usa PNG si un programa necesita una imagen de píxeles, y JPG o WebP si quieres hacer pruebas con esos tipos de archivo.
¿Qué significan 2× y 3×?
El archivo contiene el doble o el triple de píxeles en cada dirección, por ejemplo 1200 × 800 px para un placeholder de 600 × 400. El tamaño en el HTML sigue siendo 600 × 400 y la imagen se ve nítida en pantallas de alta resolución.
¿Puedo crear muchos tamaños a la vez?
Sí. Abre Muchos tamaños a la vez, escribe un tamaño por línea, por ejemplo 300x250, y descarga hasta 60 placeholders en un archivo ZIP.
¿Qué es una data URI?
Una data URI contiene toda la imagen como texto dentro del HTML o del CSS, de modo que no se solicita ningún archivo aparte. Resulta práctica para placeholders pequeños, prototipos y plantillas de correo.
Más herramientas gratuitas para imágenes
Redimensiona, comprime, convierte y limpia imágenes: rápido, gratis y en privado, directamente en tu navegador.