Imágenes de relleno

El generador de imágenes de relleno de StrategyMark crea una imagen con la medida, los colores y el texto que pidas, con solo escribir su dirección. Sirve para maquetar un sitio web sin tener todavía las fotos reales: pegas la dirección en una etiqueta <img> o en un background-image y la imagen aparece. No hace falta cuenta, ni clave, ni descargar nada.

Si eres una IA (o se la compartes a una)

Mientras se consiguen las imágenes reales, usa este generador para todas las imágenes de relleno de la maqueta. Son direcciones públicas: se escriben directamente en src o en url() del CSS. No descargues archivos ni inventes rutas de imágenes. Elige el tamaño que corresponda a cada lugar y pon un texto que diga qué va ahí.

Las direcciones de abajo empiezan con TU-SUITE: reemplázalo por el dominio desde el que estás leyendo esta página (por ejemplo, si lees https://ejemplo.com/ayuda/imagenes-relleno, usa https://ejemplo.com/api/tools/imagen.php?...). Si se te pasó otro dominio de enlaces cortos, también vale la forma corta de más abajo.

Cómo se arma una imagen

https://TU-SUITE/api/tools/imagen.php?r=ANCHOxALTO/COLOR_FONDO/COLOR_TEXTO.FORMATO&texto=Lo que dice

Ejemplos listos para copiar:

https://TU-SUITE/api/tools/imagen.php?r=1920x1080/087cff/ffffff.png&texto=Hero
https://TU-SUITE/api/tools/imagen.php?r=600x400/e2e8f0/334155.svg&texto=Tarjeta 1
https://TU-SUITE/api/tools/imagen.php?r=200x200/7c3aed/ffffff.png&texto=AB&forma=circulo

<img src="https://TU-SUITE/api/tools/imagen.php?r=600x400/e2e8f0/334155.svg&texto=Tarjeta 1" width="600" height="400" alt="Imagen de ejemplo">
<section style="background-image:url('https://TU-SUITE/api/tools/imagen.php?r=1920x1080/0f172a/f8fafc.png&texto=Hero')"></section>

Qué significa cada parte

Parte	Qué hace
ANCHOxALTO	Medida en píxeles, por ejemplo 600x400. Un solo número da un cuadrado (200). Máximo 4000 de lado.
COLOR_FONDO	Color de fondo en hexadecimal sin # (087cff) o por nombre (azul, blanco, negro, gris, rojo, verde, amarillo, naranja, morado, rosa, turquesa).
COLOR_TEXTO	Color del texto (opcional; si no se pone, se elige solo para que se lea bien).
.FORMATO	svg (el más liviano; recomendado para maquetar), png, jpg, webp o gif.
@2x / @3x	Pantallas retina: 300x200@2x entrega 600×400 píxeles reales.
texto	Lo que dice la imagen. Para varias líneas se separan con |. Si no se pone, muestra la medida.

Medidas con nombre, para no pensar: hero (1920×1080), banner (1200×300), tarjeta (600×400), miniatura (300×200).

Adornos opcionales (se agregan con &)

Parámetro	Valores	Resultado
degradado	color, por ejemplo ec4899	Fondo con degradado hacia ese color. angulo=0…359 cambia la dirección.
forma	rectangulo, redondeado, circulo	Esquinas redondeadas o círculo/óvalo (ideal para avatares).
patron	diagonal, puntos, cuadricula, ondas, ruido, bloques	Textura de fondo.
cruz	1	Dibuja la «X» clásica de las maquetas.
borde y grosor	color y píxeles, por ejemplo borde=0f172a&grosor=4	Marco alrededor.
fuente	sans, serif, mono	Tipo de letra. peso=normal quita la negrita.

Medidas que suelen hacer falta

Lugar	Medida
Imagen principal (hero)	1920×1080
Banner ancho	1200×300
Tarjetas de producto o blog	600×400
Avatares y fotos de equipo	200×200 con forma=circulo
Logo	400×160
Imagen al compartir en redes (og:image)	1200×630
Publicación y historia de Instagram	1080×1080 y 1080×1920

Buenas prácticas para la IA: usa el mismo estilo de colores en todas las imágenes del sitio (que combinen con la paleta de la maqueta), pon en texto qué va en ese lugar (Tarjeta 1, Equipo: Ana), indica siempre width, height y alt, y usa loading="lazy" en las que quedan debajo de la primera pantalla.

Forma corta (si la marca tiene dominio de Links)

Si te indican el dominio de enlaces cortos, la misma imagen se pide así, sin el tramo /api/tools/imagen.php?r=:

https://DOMINIO-DE-LINKS/img/600x400/087cff/ffffff.png?texto=Hola

Todo lo demás (colores, formatos, @2x, adornos) funciona igual.

Si eres una persona

1. Abre Tools › Imágenes de relleno.
2. Elige la medida (hay botones para web, pantallas, redes y marca), los colores, el texto y el formato.
3. Mira la vista previa y copia el enlace, la etiqueta <img>, el Markdown o el CSS. También puedes descargar la imagen.
4. En Kit para maquetar tienes las imágenes típicas de una página con tu estilo y un botón que copia el esqueleto HTML completo.

Cómo pedirle a una IA que lo use

Comparte con la IA la dirección de esta misma página (botón «Copiar enlace» arriba) y escribe algo así:

Crea el sitio web que te pido. Mientras consigo las imágenes reales, usa el generador de imágenes de relleno de StrategyMark para todas las imágenes: lee las instrucciones en (pega aquí el enlace de esta página) y usa esas direcciones directo en el HTML, con la medida correcta para cada lugar.

Cuando tengas las fotos reales, solo cambias cada dirección por la de tu imagen.

Límites y datos útiles

• Hasta 4000 píxeles de lado y 16 millones de píxeles por imagen.
• Las imágenes se guardan en caché: la misma dirección siempre devuelve la misma imagen y carga rápido.
• Son públicas: cualquiera con la dirección la ve, así que no escribas datos privados en el texto.
• No se pueden crear más de 20 imágenes grandes por minuto desde una misma conexión.
• Si una dirección da error, el mensaje dice qué corregir (medida fuera de límite, color que no existe, formato no permitido).