Generador de imágenes de marcador de posición
Genera una imagen de marcador de posición en cualquier tamaño, color de fondo y texto de etiqueta, y descárgala como PNG, JPEG o SVG. No se sube nada.
Imagen de marcador de posición
- Dimensiones
- 800 x 600
- Formato
- PNG
- Tamaño del archivo
- -
Cómo funciona
Un generador de imágenes de marcador de posición dibuja un rectángulo simple del tamaño y color elegidos, con una etiqueta, para que diseñadores y desarrolladores tengan una imagen provisional antes de que la definitiva esté lista, sin necesidad de un servicio de marcadores de posición ni de una solicitud de red.
- Definir tamaño
Escribe un ancho y alto, o elige un tamaño predefinido común como una imagen OG o una publicación de Instagram.
- Elige colores y etiqueta
La vista previa se actualiza mientras escribes. Deja la etiqueta en blanco para mostrar el tamaño en píxeles en su lugar.
- Descarga o copia
Guarda el archivo, o copia el URI de datos o una etiqueta <img> lista para pegar.
PNG, JPEG o SVG
Los tres formatos se generan localmente en tu navegador con las API Canvas y SVG; ninguna imagen se envía a un servidor.
- PNG: sin pérdida, admite colores planos sin transparencia de forma limpia y es la opción predeterminada más segura para prototipos.
- JPEG: generalmente produce un archivo más pequeño para imágenes tipo foto, pero los rectángulos de marcador de posición se comprimen casi igual en ambos formatos, así que PNG suele ser la mejor opción aquí.
- SVG: marcado independiente de la resolución que escala a cualquier tamaño sin pérdida de calidad ni límite de píxeles, ideal cuando el mismo marcador de posición debe funcionar en varios tamaños.
Nada sale de tu dispositivo
La imagen se dibuja completamente en un lienzo HTML o se construye como texto SVG en tu navegador. Descargar, copiar el URI de datos y copiar la etiqueta <img> funcionan sin conexión una vez cargada la página.
Preguntas frecuentes
¿Cómo creo una imagen de marcador de posición para un esquema o prototipo?
Ingresa un ancho y alto, o haz clic en un tamaño predefinido, luego elige un color de fondo y de texto, y una etiqueta opcional. La vista previa y la descarga se actualizan en vivo al cambiar cualquier campo. Haz clic en Descargar para obtener un archivo, o en Copiar para el URI de datos que aparece debajo de la vista previa.
¿Cómo uso una imagen de marcador de posición en línea en HTML sin un archivo separado?
Haz clic en Copiar para copiar el URI de datos del cuadro de salida, o haz clic en Copiar etiqueta <img> para obtener un elemento listo para pegar, como <img src="data:image/png;base64,..." width="800" height="600" alt="Placeholder">. Pega cualquiera de los dos directamente en tu HTML; no se necesita servidor ni referencia de archivo.
¿Qué tamaños predefinidos comunes están disponibles?
Imagen OG (1200x630), publicación de Instagram (1080x1080), miniatura de YouTube (1920x1080), encabezado de Twitter (1500x500), pantalla de celular (375x812), captura de App Store (1290x2796), iPad (768x1024) e historia de Instagram (1080x1920). Haz clic en cualquier ajuste preestablecido para aplicar esas dimensiones y luego personaliza los colores y el texto.
¿Puedo generar un marcador de posición SVG en lugar de una imagen de mapa de bits?
Sí. Elige SVG en la lista de formato de archivo. La salida es un elemento <svg> pequeño y correctamente escapado con un rectángulo de fondo, líneas guía diagonales opcionales y una etiqueta de texto. SVG es independiente de la resolución y no tiene límite de tamaño en píxeles, a diferencia de PNG o JPEG.
¿Cuál es el tamaño máximo de imagen que puede generar esta herramienta?
El ancho y el alto tienen un límite de 4.096 px cada uno para PNG y JPEG, ya que los lienzos muy grandes pueden agotar la memoria de textura de la GPU en dispositivos básicos y producir una salida en blanco. Para un marcador de posición mayor a unos 2.048 px por lado, usa el formato SVG, que no tiene límite de resolución en píxeles.