Generador de Imágenes Placeholder
Genera imágenes placeholder SVG personalizadas de forma dinámica mediante una interfaz web interactiva o una API Edge rápida.
Dimensiones
Vista previa SVG en tiempo real
420 × 420 pxUso de la API y ejemplos de integración
Embed vector placeholder images directly into your HTML, Markdown, or CSS layout mockups using the Edge API endpoint.
<img src="https://jsonforge.app/api/placeholder/420x420" alt="Placeholder Image" width="420" height="420" />¿Qué es Generador de Imágenes Placeholder?
El Generador de Imágenes Placeholder renderiza bajo demanda imágenes placeholder ligeras en SVG vectorial — ya sea de forma interactiva en la interfaz o a través de un endpoint HTTP público que puedes meter directamente en un `<img src>`, una imagen de Markdown o un layout de mockup. Cada imagen se construye a partir de una simple plantilla de cadena SVG — un rectángulo de fondo, un patrón de rejilla opcional y una etiqueta de texto centrada — sin canvas, sin binario de Sharp y sin navegador headless, que es lo que hace la generación prácticamente instantánea. Controlas el ancho y el alto de forma independiente (de 1px hasta 10000px cada uno), el color de fondo y de texto como valores hex, un radio de esquina opcional, una sutil rejilla de fondo superpuesta y un texto de etiqueta personalizado que, si se deja vacío, muestra las propias dimensiones de la imagen. La ruta dedicada `/api/placeholder-image/{width}x{height}` se ejecuta en el Edge Runtime de Next.js y devuelve el SVG con una cabecera Cache-Control inmutable de un año, así que un CDN o navegador que ya haya cacheado una URL dada nunca tiene que regenerarla.
Cómo usar Generador de Imágenes Placeholder
- Introduce el Ancho y Alto deseados en píxeles, o selecciona un tamaño preset como 420x420, 800x600 o 1920x1080.
- Personaliza el Color de Fondo y el Color de Texto con los selectores de color o códigos hex.
- Opcionalmente introduce texto personalizado para superponer, ajusta el radio de las esquinas y activa la rejilla de fondo.
- Pulsa 'Copiar URL de Imagen' para obtener al instante un enlace al endpoint de la API, o 'Descargar SVG' para guardar el archivo generado en local.
Ejemplos
Placeholder cuadrado básico de 420x420
Entrada
https://jsonforge.app/api/placeholder/420x420
Salida
Imagen placeholder SVG de 420x420 con fondo gris por defecto (#e5e7eb) y texto gris oscuro (#6b7280).
Colores y texto personalizados
Entrada
https://jsonforge.app/api/placeholder/800x600?bg=0f172a&color=ffffff&text=Hero+Banner
Salida
Placeholder SVG de 800x600 con fondo gris pizarra oscuro y texto blanco centrado 'Hero Banner'.
Esquinas redondeadas y rejilla sutil
Entrada
https://jsonforge.app/api/placeholder/600x400?bg=4f46e5&color=ffffff&radius=24&grid=true
Salida
Placeholder SVG de 600x400 con fondo índigo, esquinas redondeadas de 24px y patrón de rejilla de fondo.
Etiqueta por defecto sin parámetros
Entrada
https://jsonforge.app/api/placeholder/1200x630
Salida
Placeholder SVG de 1200x630 con el fondo gris por defecto y el texto "1200 × 630" derivado automáticamente de las dimensiones, ya que no se suministró el parámetro text.
Errores comunes
- Incluir un carácter '#' en los parámetros de la query sin codificar la URL (usa `bg=2563eb` en lugar de `bg=#2563eb`).
- Pasar valores no numéricos como ancho o alto (p. ej. `420px420`), lo que devuelve un error HTTP 400.
- Esperar salida raster PNG/JPG directamente (la implementación actual devuelve imágenes SVG vectoriales y limpias).
- Solicitar dimensiones extremas como 9999×9999 para simples mockups de layout — el SVG es válido a cualquier tamaño, pero incrustar decenas de placeholders enormes en una página sigue hinchando el DOM y ralentizando el scroll.
- Olvidar codificar como URL el texto personalizado con caracteres especiales como `&` o `#` al construir la URL a mano — usa `encodeURIComponent` en lugar de concatenar cadenas en bruto.
Por qué usar esta herramienta
- La generación tarda menos de 10ms al construirse desde una plantilla de cadena SVG en lugar de un render de canvas o navegador headless, y las respuestas llevan una cabecera Cache-Control inmutable de 1 año.
- Salida SVG vectorial que se mantiene nítida a cualquier densidad y escala de pantalla.
- Ancho, alto, color de fondo/texto, radio de esquina y rejilla de fondo se fijan cada uno de forma independiente mediante parámetros de consulta o los controles de la interfaz.
- Sin dependencias externas, binarios de Sharp, Canvas ni Puppeteer.
- Un único endpoint sirve tanto de vista previa en tiempo de diseño como de recurso de producción — la URL exacta que copias de la vista previa en vivo es segura para incrustar en el markup publicado, porque la salida nunca cambia para la misma query string.