Generador de imágenes de relleno (placeholder)
Crea imágenes de relleno de cualquier tamaño hasta 4000×4000 con tus colores y texto. Descarga en PNG, JPEG, WebP o SVG, o copia el data URI, sin servicios externos.
Déjalo vacío para mostrar las dimensiones.
¿Qué es Generador de imágenes de relleno?
Crea imágenes de relleno sencillas que muestran sus dimensiones (como 640×360) o tu propio texto, de cualquier tamaño entre 1 y 4000 píxeles. Elige los colores de fondo y de texto y exporta en PNG, JPEG, WebP o SVG. Las imágenes se dibujan en local, así que no dependes de ningún servicio web de placeholders.
Cómo usar Generador de imágenes de relleno
- Introduce el Ancho (px) y el Alto (px).
- Elige el Fondo y el Color del texto, y escribe un Texto o déjalo vacío para mostrar el tamaño.
- Elige el Formato.
- Descarga la imagen o copia el código SVG o el data URI.
Ejemplo
Ancho 300, Alto 150, Fondo #cccccc, Color del texto #555555, Formato SVG
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="150" viewBox="0 0 300 150"><rect width="100%" height="100%" fill="#cccccc"/><text x="50%" y="50%" fill="#555555" font-family="Arial, Helvetica, sans-serif" font-size="30" text-anchor="middle" dominant-baseline="central">300×150</text></svg>
Cuándo usar Generador de imágenes de relleno
Úsalo para wireframes, mockups de diseño, pruebas de diseños responsive y componentes de imagen, y para rellenar demos de CMS o comercio electrónico. Para previsualizaciones realistas usa fotos reales o de stock; para placeholders difuminados de carga, usa una versión de baja resolución de la imagen real.
Cómo funciona Generador de imágenes de relleno
Para PNG, JPEG y WebP, la imagen se pinta en un canvas HTML del tamaño pedido: un rectángulo relleno más el texto centrado en Arial, con un tamaño de fuente de un quinto del lado más corto (reducido en textos largos para que quepan), y después se exporta con canvas.toDataURL. Para SVG, la herramienta escribe un archivo vectorial diminuto con un <rect> y un elemento <text> centrado, que se ve nítido a cualquier zoom y suele ocupar menos de 400 bytes.
Casos de Uso Comunes
- Rellenar huecos de imagen en wireframes y prototipos
- Probar relaciones de aspecto y CSS de imágenes responsive
- Poblar productos de demostración en una tienda online
- Incrustar pequeños placeholders SVG como data URI
Preguntas Frecuentes
¿Qué formato debo elegir?
SVG es el más pequeño y nítido para placeholders planos; PNG es mejor cuando se necesita un archivo de mapa de bits; JPEG y WebP sirven para probar flujos de procesamiento de fotos.
¿Puedo enlazar estas imágenes directamente?
No hay alojamiento. Descarga el archivo o pega el data URI o el código SVG directamente en tu HTML o CSS.
¿Cuál es el tamaño máximo?
4000 × 4000 píxeles. Los PNG muy grandes pueden tardar un momento en exportarse, según tu dispositivo.