Una imagen de marcador de posición es una imagen temporal que reserva espacio en un diseño, sitio web, pantalla de aplicación o diseño de CMS antes de que el medio final esté listo. Ayuda a conservar dimensiones, espaciado y jerarquía visual para que la página pueda revisarse sin áreas de imagen rotas.
Generador de imágenes de marcador de posición personalizadas
Usa este generador de imágenes de marcador de posición para crear recursos temporales para maquetas, bocetos de interfaz, pantallas de aplicaciones, tarjetas de artículos y diseños de producto. El flujo es sencillo: define el ancho y alto exactos, elige los colores de fondo y texto, añade una etiqueta personalizada o muestra las dimensiones automáticamente, y descarga un archivo PNG, JPG, WebP o SVG. Todo se genera en tu navegador, así que no hay carga de archivos ni registro.
Qué hace este generador de imágenes de marcador de posición
Esta herramienta crea imágenes estáticas de marcador de posición a partir de dimensiones y ajustes de estilo. Es útil cuando necesitas un bloque de imagen realista antes de que estén listas las fotos finales, ilustraciones, imágenes de producto o recursos del CMS.
| Ajuste | Qué puedes controlar | Uso práctico |
|---|---|---|
| Tamaño | Cualquier ancho y alto de 1x1 a 4000x4000 px | Ajustar tarjetas, banners, áreas principales, miniaturas y pantallas móviles |
| Colores | Color de fondo y color de texto | Crear imágenes claras, oscuras, con color de marca o gris neutro |
| Texto | Dimensiones automáticas o una etiqueta personalizada | Mostrar "1200 x 630", "Perfil", "Imagen de producto" o cualquier nota breve |
| Tamaño de fuente | Tamaño automático o manual de 8-200 px | Mantener las etiquetas legibles en miniaturas pequeñas y maquetas grandes |
| Formato | PNG, JPG, WebP o SVG | Elegir una imagen rasterizada para diseños reales o SVG para marcadores de posición escalables |
| Calidad | 70%, 80%, 90% o 100% para JPG/WebP | Reducir el tamaño del archivo cuando el marcador de posición no necesita calidad perfecta por píxel |
La salida predeterminada es una imagen ficticia simple y limpia con el tamaño impreso en el centro. Así diseñadores, desarrolladores y equipos de contenido pueden ver fácilmente qué recurso aún debe reemplazarse.
Cómo generar imágenes de marcador de posición paso a paso
1
Paso 1: Ingresa el tamaño exacto de la imagen
Escribe el ancho y alto que necesitas. Algunas opciones comunes son 1200x630 para vistas previas Open Graph, 1080x1080 para publicaciones sociales cuadradas, 1280x720 para miniaturas de vídeo, 300x250 para rectángulos de anuncios y 375x667 para maquetas de pantallas móviles. Si estás reemplazando una imagen existente, usa las mismas dimensiones en píxeles para que el diseño no se desplace después.
2
Paso 2: Elige los colores de fondo y texto
Usa un gris neutro para bocetos de interfaz, un color de marca para revisiones de diseño o un fondo oscuro cuando pruebes modo oscuro. Mantén suficiente contraste entre texto y fondo para que la etiqueta siga siendo legible en capturas y archivos de diseño.
3
Paso 3: Decide qué debe decir la etiqueta
Deja el texto personalizado desactivado para mostrar las dimensiones automáticamente. Actívalo cuando quieras etiquetas como "Imagen principal", "Avatar", "Foto de producto", "Miniatura de artículo" o "Captura de aplicación". Las etiquetas cortas funcionan mejor porque siguen siendo legibles en tamaños pequeños.
4
Paso 4: Elige el formato de salida
Usa PNG cuando quieras una opción predeterminada confiable, JPG cuando el tamaño de archivo importe más que el texto nítido, WebP para pruebas web modernas y SVG cuando quieras una imagen de marcador de posición escalable. Para JPG y WebP, usa 90% de calidad como buen equilibrio; baja a 70% u 80% si solo necesitas una imagen ficticia ligera.
5
Paso 5: Genera y descarga
Haz clic en el botón de generar y el archivo se descargará directamente. El nombre incluye las dimensiones, como `placeholder_1200x630.png`, para que siga siendo fácil de entender en las carpetas del proyecto.
Imágenes de marcador de posición para aplicaciones, perfiles y diseños
Cada marcador de posición debe dejar claro su papel. Un rectángulo gris genérico sirve para bocetos iniciales, pero las imágenes ficticias más específicas ayudan a los equipos a revisar diseños reales sin adivinar qué representa cada espacio vacío.
| Tipo de marcador | Tamaño sugerido | Etiqueta sugerida | Útil para |
|---|---|---|---|
| Imagen de aplicación | 375x667 o 768x1024 | Pantalla de aplicación | Maquetas de teléfono y tableta |
| Imagen de perfil | 300x300 o 512x512 | Perfil | Avatares y diseños de cuenta |
| Imagen de artículo | 1200x630 o 800x450 | Imagen de artículo | Tarjetas de blog y vistas previas de CMS |
| Imagen ficticia de producto | 800x800 o 1200x1200 | Imagen de producto | Cuadrículas de comercio electrónico y páginas de producto |
| Imagen ficticia cuadrada | 1080x1080 | Imagen cuadrada | Publicaciones sociales y diseños de tarjetas equilibradas |
| Imagen vertical de marcador de posición | 1080x1920 | Imagen para historia | Diseños verticales para historias y espacios de medios en formato retrato |
Si el marcador de posición irá a una herramienta de diseño, elige SVG para escalar con nitidez. Si irá a un sitio de prepublicación, elige el mismo formato que espera tu flujo final de recursos para que la carga de imágenes, el espaciado del diseño y la compresión se parezcan más a producción.
Imágenes oscuras de marcador de posición y otros consejos de estilo
Las imágenes oscuras de marcador de posición son útiles cuando estás probando modo oscuro o tarjetas de interfaz con muchas imágenes. Si una tarea de diseño pide una variante oscura o una imagen lo bastante oscura para paneles de control, el objetivo es el contraste, no el negro puro; el marcador aún debe comunicar tamaño y propósito.
Usa estas reglas simples:
- Para interfaz oscura, empieza con un fondo cercano a `#1f2937` y texto alrededor de `#9ca3af`.
- Para interfaz clara, empieza con un fondo cercano a `#e5e7eb` y texto alrededor de `#6b7280`.
- Para maquetas de marca, usa una versión suavizada del color de marca para que el marcador no parezca arte final.
- Para marcadores pequeños de perfil o icono, mantén el texto personalizado corto o usa dimensiones automáticas.
- Para imágenes principales o banners, usa tamaño de fuente manual si la etiqueta automática se ve demasiado pequeña en capturas de presentación.
Cuando un marcador de posición aparece en un prototipo, debe verse temporal pero intencional. El objetivo es proteger el espaciado, la relación de aspecto y la jerarquía de contenido sin fingir que la imagen final ya está lista.
Cómo elegir el formato correcto para una imagen de marcador de posición
El mejor formato depende de dónde se usará el marcador de posición.
| Formato | Mejor para | Notas |
|---|---|---|
| PNG | Maquetas de interfaz, capturas, revisiones de diseño | Texto nítido y soporte de navegador predecible |
| JPG | Bloques grandes de diseño donde importa el tamaño de archivo | Sin transparencia; los bordes del texto pueden suavizarse con menor calidad |
| WebP | Prepublicación web moderna y pruebas de rendimiento | Archivos más pequeños que PNG en muchos casos |
| SVG | Bocetos de interfaz escalables y sistemas de diseño | El texto y las formas se mantienen nítidos a cualquier tamaño |
Este generador de imágenes de marcador de posición no crea GIF animados de marcador. Si necesitas una animación de carga, usa la imagen generada aquí para el área estática y maneja el indicador de carga o el estado de esqueleto en CSS o en tu marco de interfaz.
Cómo funciona en tu navegador
Las versiones PNG, JPG y WebP se crean con la API Canvas del navegador. La versión SVG se genera como marcado vectorial con un rectángulo y texto centrado. No se sube ninguna imagen; el marcador de posición se crea por completo a partir de tus ajustes.
Esto importa por tres razones:
- Es rápido para crear imágenes ficticias repetidas porque el navegador hace el trabajo localmente.
- El archivo final es determinista: el mismo tamaño, colores, texto y formato producen el mismo resultado visual.
- Las etiquetas privadas del proyecto permanecen en tu dispositivo en lugar de enviarse a un servidor.
La herramienta es un generador visual, no un punto de conexión público de API para imágenes de marcador de posición. Si tu flujo necesita marcadores basados en URL, usa esta página para descargar recursos reutilizables o combínala con tu propio alojamiento de archivos estáticos.
Preguntas Frecuentes
Ingresa el ancho y alto, elige colores de fondo y texto, decide si mostrar dimensiones o texto personalizado, selecciona PNG, JPG, WebP o SVG, y luego genera el archivo. La imagen se descarga directamente en tu dispositivo.
Un generador de imágenes de marcador de posición es una herramienta que crea imágenes ficticias a partir de ajustes simples como tamaño, color, etiqueta y formato. Este funciona en el navegador, así que está pensado para maquetas rápidas, diseños de prepublicación, revisiones de interfaz y archivos de entrega de diseño.
Sí. Elige un color de fondo oscuro y un color de texto más claro. Por ejemplo, un fondo como `#1f2937` con texto como `#9ca3af` funciona bien para tarjetas de interfaz en modo oscuro, pantallas de aplicaciones y paneles de control.
Sí. Escribe el tamaño de pantalla o componente que necesitas, como 375x667 para una maqueta de teléfono o 768x1024 para un diseño de tableta. Usa una etiqueta como "Pantalla de aplicación" o "Captura" para que el marcador sea claro en revisiones de diseño.
Sí. Usa un tamaño cuadrado como 300x300, 512x512 o 1080x1080. Añade una etiqueta corta como "Perfil" o "Avatar", y exporta como PNG, WebP o SVG según tu proyecto.
Sí. La herramienta funciona bien como creador de imágenes ficticias para tarjetas de sitios web, bloques de producto, miniaturas de artículos, espacios de perfil y bocetos de interfaz. Para un resultado más claro, etiqueta cada imagen ficticia por propósito en lugar de usar un archivo genérico en todas partes.
Esta página no ofrece una API pública de imágenes de marcador de posición ni sintaxis de URL dinámica. Crea imágenes descargables en el navegador. Si necesitas un comportamiento tipo API, genera los archivos aquí y hospédalos en tu proyecto, CDN o recursos de sistema de diseño.
Usa PNG como opción segura por defecto, WebP para pruebas web modernas, JPG para marcadores grandes de baja prioridad y SVG cuando quieras salida vectorial escalable. Si el marcador luego se reemplazará por una foto de producto JPG, probar con JPG puede parecerse más al comportamiento final del archivo.
Puedes generar imágenes personalizadas desde 1x1 px hasta 4000x4000 px. Los archivos muy grandes pueden servir para áreas principales o maquetas de alta resolución, pero para pruebas normales de diseño web conviene coincidir con las dimensiones que usará la imagen final.