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

Consejos

  • 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.

Preguntas frecuentes

Se usan como "imágenes provisionales" en maquetas y wireframes de sitios web o aplicaciones cuando la foto o ilustración definitiva aún no está lista. Esto permite revisar el diseño y avanzar con la codificación sin esperar a que los recursos finales estén terminados.

No. Esta herramienta dibuja y codifica el PNG por completo dentro de tu navegador mediante el elemento , por lo que los datos de la imagen nunca se suben a ningún sitio. Al pulsar el botón de descarga, se guarda directamente en tu propio dispositivo.

Las principales redes sociales, como Facebook y X (Twitter), recomiendan 1200×630px (una relación de aspecto de aproximadamente 1.91:1). Un tamaño mucho más pequeño puede verse borroso, y una relación de aspecto diferente puede recortarse de forma inesperada al mostrarse.

Esta herramienta acepta valores de 1px a 4000px. Cada navegador impone sus propios límites de implementación para el elemento , así que es mejor evitar tamaños extremadamente grandes, como decenas de miles de píxeles por lado.
ツールくん

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 del navegador, sin depender de ningún servicio externo. No tendrá el realismo de una fotografía, pero resulta más que suficiente para comprobar tamaños y relaciones de aspecto, o para probar el diseño de una imagen para compartir en redes sociales — situaciones en las que solo necesitas una imagen con el tamaño correcto de inmediato.

Más herramientas en esta categoría