Generador de imágenes de marcador de posición (imágenes de muestra)
Genera una imagen de muestra directamente en tu navegador indicando ancho, alto, color de fondo y color de texto, y descárgala como PNG. La imagen nunca se envía a ningún servidor.
Tamaños habituales de imágenes de muestra
| Tamaño | Uso típico |
|---|---|
| 300×200 | Marcador de posición para un banner pequeño o un espacio publicitario |
| 800×600 | Imagen dentro de un artículo de blog o imagen temporal para un wireframe |
| 1200×630 | Imagen OGP para las tarjetas de Facebook y X (Twitter) |
| 1080×1080 | Publicación cuadrada para Instagram y otras redes sociales |
| 1920×1080 | Imagen principal Full HD o fondo de presentación de diapositivas |
| 640×360 | Miniatura de vídeo 16:9 o miniatura de interfaz en tarjetas |
Qué es una imagen de marcador de posición
Una imagen de marcador de posición es un sustituto que guarda un hueco mientras la fotografía o la ilustración de verdad está aún por llegar. No pasa de ser un rectángulo liso del tamaño que usted indique, por lo común con ese tamaño escrito encima, y sirve para probar una maquetación o montar una maqueta. Justamente porque su contenido nada significa, la vista se queda en la disposición y los márgenes en lugar de irse a la imagen.
Dé a esta herramienta un ancho, un alto, un color de fondo y un color de texto y dibujará al momento una vista previa que puede guardar como PNG. El texto superpuesto es opcional: si lo deja vacío, entran solas las cifras «ancho × alto», con lo que varias medidas puestas una junto a otra se distinguen de un vistazo. Los colores pueden escogerse en el selector o escribirse como códigos hexadecimales, ajustándose con exactitud a la paleta de una maqueta. Todo se genera dentro del navegador: la imagen nunca se envía a un servidor.
Cómo hacer una imagen de marcador de posición
- Fije las medidas Escriba el ancho y el alto en píxeles. Los ajustes 300×200, 800×600, 1200×630 (OGP) y 1080×1080 rellenan ambos campos de una vez.
- Escoja los colores Fije el color de fondo y el del texto. Además del selector, puede escribir directamente un código de color hexadecimal.
- Añada texto si lo necesita El texto superpuesto es opcional. Dejándolo vacío aparece solo «ancho × alto», que a menudo basta.
- Compruebe la vista previa Se redibuja con cada cambio. Mire aquí que el texto no se pierda contra el fondo.
- Descargue el PNG «Descargar PNG» lo guarda en su equipo. El archivo se construye por entero en su dispositivo y no va a ninguna otra parte.
Consejos para aprovecharla mejor
- El ajuste preestablecido "1200×630 (OGP)" te da al instante el tamaño estándar que se muestra sin recortes en las tarjetas de Facebook y X (Twitter).
- Si dejas el texto superpuesto en blanco, se muestran automáticamente los números de "ancho×alto", lo que facilita distinguir los tamaños de un vistazo al comparar varios wireframes.
- El color de fondo y el de texto se pueden elegir con el selector de color o escribir directamente como código hexadecimal, para que coincidan exactamente con la paleta de tu maqueta de diseño.
- La imagen generada solo se descarga a tu dispositivo local; nunca se envía ni se guarda en el servidor de este sitio.
Dónde ayudan las imágenes de marcador de posición
Montar esquemas y maquetas
Aun antes de decidir las fotografías, colocar cajas del tamaño exacto previsto permite avanzar con la maquetación. Como el tamaño va escrito en la imagen, no confundirá dos de ellas.
Reservar el marco de una imagen OGP
1200×630 es el tamaño que se muestra en una tarjeta de compartición sin recortes. Guarda el sitio hasta que la pieza definitiva esté lista.
Ejercitar una función de subida de imágenes
Como puede producirse al momento una imagen de cualesquiera medidas, conviene para probar los límites de un formulario y cómo se comporta la presentación.
Tantear una combinación de colores
Ponga varias en fila variando el fondo y el texto y verá pronto si la diferencia de claridad deja el texto legible.
Cuando quiera trabajar sobre una imagen real
Para cambiar las medidas de una imagen que ya tiene, use el redimensionado de imágenes; para cortar solo la parte que quiere, el recorte de imágenes.
Términos sobre las imágenes de marcador de posición
- Marcador de posición
- Elemento sustituto que guarda un lugar hasta que esté listo lo que propiamente le corresponde. Además de imágenes, el Lorem Ipsum cumple el mismo papel con el texto.
- Maqueta (mockup)
- Muestra inmóvil hecha para comprobar cómo se verá algo una vez terminado. Permite juzgar disposición y márgenes antes de que llegue el material de verdad.
- Imagen OGP
- La imagen que aparece como tarjeta cuando una página se comparte en redes sociales. 1200×630 es el tamaño de uso extendido; ceñirse a él hace improbable el recorte en los bordes.
- Código de color hexadecimal
- Manera de escribir un color con la forma #RRGGBB, dando la intensidad de rojo, verde y azul en dos dígitos cada una, de 00 a FF.
- Píxel
- La unidad mínima con que se construye una imagen. El ancho y el alto se dan aquí en esta unidad.
- PNG
- Formato de imagen de compresión sin pérdida. Una imagen que no es más que un fondo liso y algo de texto se le aviene bien, y el archivo queda pequeño.
Preguntas frecuentes
A propósito — la cultura de las imágenes de marcador de posición
El diseño web tiene desde hace tiempo la costumbre de usar imágenes de marcador de posición como sustitutas mientras las fotos o ilustraciones definitivas no están listas. Sigue la misma idea que el texto de relleno "lorem ipsum" utilizado en la industria de la imprenta para textos inacabados, solo que aplicada a imágenes.
Un servicio llamado "Lorem Picsum", lanzado en 2014, se popularizó como servicio de imágenes de marcador de posición que ofrece fotografías reales de forma aleatoria. Como devuelve una foto con solo indicar el ancho y el alto en la URL, se ha adoptado en innumerables maquetas de diseño y tutoriales. Aun así, depender de un servicio externo no siempre resulta práctico para el trabajo sin conexión o para proyectos con alta confidencialidad.
Esta herramienta adopta un enfoque distinto: genera al instante una imagen de color sólido con una etiqueta de texto, todo dentro del