Wireframes antes de los assets reales. Storybook/Figma con placeholders por componente. Probar lazy-loading o CSS de aspect-ratio. Reemplazar servicio externo en proyectos con CSP estricta.

SVG no es raster. Para PNG: captura o conversor. Data URIs largas son incómodas en herramientas/diffs — prefiere descarga para mockups grandes. La etiqueta auto no se localiza. Escribe texto custom si lo necesitas. Colores solo en hex HTML. Para rgba() edita el SVG. El tamaño es intrínseco. Escalado CSS con preserveAspectRatio="none" . No lo dejes en producción.

Generador de Imagen Placeholder

Genera imágenes SVG placeholder de cualquier tamaño con texto y colores personalizados. Salida como data URI o SVG descargable.

Width (px)

Height (px)

Background colour

Text colour

Label text (leave blank for "WxH")

Preview

SVG markup

Data URI

Download

¿Para qué sirve?

Al diseñar una página, a menudo necesitas una imagen de tamaño específico antes de tener el asset real. Servicios como via.placeholder.com añaden una petición externa. Esta herramienta produce un SVG inline autocontenido con el tamaño y etiqueta que quieras — data URI o descarga. Nada sale de tu navegador.

Cuándo usarlo

Wireframes antes de los assets reales.
Storybook/Figma con placeholders por componente.
Probar lazy-loading o CSS de aspect-ratio.
Reemplazar servicio externo en proyectos con CSP estricta.

Errores comunes

SVG no es raster. Para PNG: captura o conversor.
Data URIs largas son incómodas en herramientas/diffs — prefiere descarga para mockups grandes.
La etiqueta auto no se localiza. Escribe texto custom si lo necesitas.
Colores solo en hex HTML. Para rgba() edita el SVG.
El tamaño es intrínseco. Escalado CSS con preserveAspectRatio="none".
No lo dejes en producción.