Generador de Imágenes Placeholder
Genera imágenes de sustitución en formato SVG con las dimensiones, colores de fondo y texto que elijas. Descárgalas o copia la URL/Data URI directamente.
Configuración
Vista previa
<img src="data:image/svg+xml;base64,…" width="1280" height="720" alt="placeholder">
const img = new URL("/placeholder.png", import.meta.url);
Cómo usar: Placeholder
- 1Elige un preset o indica el ancho y el alto en píxeles.
- 2Personaliza el texto, los colores y el formato.
- 3Descarga la imagen o copia el código para insertarla.
¿Para qué sirve?
- Rellenar maquetas con imágenes del tamaño exacto.
- Probar diseños responsive antes de tener las fotos finales.
- Crear imágenes de ejemplo para plantillas y documentación.
Imágenes de relleno para maquetación
Para qué
Reservan el espacio de una imagen mientras no existe el recurso final, de modo que el diseño y las proporciones puedan validarse.
Evita saltos de diseño
Define siempre ancho y alto reales en el HTML: así el navegador reserva el hueco y se evita el desplazamiento acumulado de diseño (CLS), una métrica de Core Web Vitals.
Formatos
Las imágenes generadas aquí son ligeras y se descargan al instante. Sustitúyelas por imágenes reales optimizadas antes de publicar.
Herramientas relacionadas
Preguntas frecuentes
¿Qué formatos genera?+
Genera SVG escalable y su representación como Data URI para usar en <img> sin archivos.