Generador de Imágenes Placeholder

Genera imágenes de relleno para maquetas, cualquier tamaño, tus colores y tu texto, en PNG, JPG, WebP o SVG. Gratis, en tu navegador y sin subir nada.

🌐 English

Preview of a 600 by 400 pixel placeholder image

Preview at 600 × 400 px, scaled to fit. Auto-contrast picked black text (background luminance 0.60, threshold 0.18).

🔒 Privado por diseño: todo funciona localmente en tu navegador; nada se sube nunca a ningún servidor.

Escrito y mantenido por Última actualización

Cómo generar una imagen placeholder

  1. Escribe el ancho y el alto en píxeles en Width (ancho) y Height (alto), y elige un formato en Format: PNG, JPG, WebP o SVG.
  2. Elige un color en Background colour (color de fondo). Si dejas marcado Auto-contrast text colour (color de texto con contraste automático), el color de la etiqueta se calcula solo; desmárcalo para elegirlo tú.
  3. Si quieres, escribe tu propio texto en Label text (texto de la etiqueta). Si lo dejas vacío, la imagen se etiqueta con sus propias dimensiones; desmarca Show a label (mostrar etiqueta) para obtener un bloque de color liso.
  4. Pulsa Generate image (generar imagen) para descargar el archivo, o Copy data URI (copiar data URI) para llevarte la versión en base64 al portapapeles.
  5. ¿Necesitas un juego completo? Pega una lista de tamaños en Batch sizes (tamaños por lotes) y el botón pasa a ser Generate ZIP.

Por qué generar los placeholders en local en vez de enlazarlos

Los servicios de imágenes placeholder alojados son cómodos hasta que dejan de serlo. Apuntar una maqueta a una URL externa significa que cada vista previa, cada captura de pantalla y cada demo dependen de que ese servicio siga en pie, siga siendo gratuito y siga siendo accesible desde donde estés: un tren, una red corporativa cerrada, la oficina de un cliente con una política de seguridad de contenido estricta o un avión. Cuando el servicio cambia su esquema de URLs o empieza a limitar peticiones, todas las imágenes del diseño se rompen a la vez, normalmente durante la demo.

Un archivo generado no tiene esa fragilidad. Vive en tu repositorio o en tu archivo de diseño como cualquier otro recurso, se ve sin conexión, sobrevive a la desaparición del servicio que lo creó y nunca filtra la URL de un proyecto sin anunciar a los registros de otro servidor. Lo mismo vale para un data URI pegado en una hoja de estilos o en un fixture de tests: funciona siempre y con cero peticiones de red.

Hay un segundo motivo, más silencioso. Las imágenes placeholder de verdad hacen evidentes los errores de maquetación. Un bloque etiquetado “1200 × 630” te dice de un vistazo si tu hueco de imagen para Open Graph mide realmente lo que crees, y un lote de tamaños de banner colocado en una maqueta publicitaria muestra al instante qué hueco está aplastando a su vecino. Los rectángulos grises sin etiqueta esconden esos problemas hasta que llega el contenido real.

Tamaños que conviene tener a mano

Ciertas dimensiones se repiten una y otra vez, y para eso está la caja de lotes. La publicidad display sigue girando en torno a unos pocos estándares del IAB: 728×90 (leaderboard), 300×250 (rectángulo mediano), 160×600 (rascacielos ancho) y 320×50 (banner móvil). En redes sociales se han asentado 1200×630 para las vistas previas de enlaces y 1080×1080 para las publicaciones cuadradas. Las rejillas de producto y las tarjetas de blog suelen pedir algo cercano a 600×400. Pega una vez el conjunto que uses y podrás regenerar toda la familia con los colores de tu proyecto cada vez que cambie el diseño.

Todo ocurre en tu dispositivo

Nada de lo que escribas aquí (ni la etiqueta, ni los colores, ni los tamaños) se envía a ningún sitio. Las imágenes PNG, JPG y WebP se pintan sobre un canvas HTML dentro de la propia página y las codifica el navegador; la opción SVG es marcado de texto que se compone en la página y se te entrega como archivo. No hay subida, ni cola, ni renderizado en servidor, y por eso el resultado aparece al instante y la herramienta sigue funcionando, una vez cargada la página, incluso con la red apagada.

Eso importa más de lo que parece en trabajos para clientes. Las etiquetas de los placeholders suelen ser el primer sitio donde aparece el nombre de un producto sin anunciar, un nombre en clave o el título interno de una campaña, y escribirlo en un servicio de imágenes alojado lo deja en un registro de peticiones que no controlas. Aquí no sale nunca de la pestaña.

Usos habituales

Cómo funciona, en imágenes

Captura de pantalla de la herramienta Generador de Imágenes Placeholder con ancho y alto en píxeles con formato PNG, JPG, WebP o SVG, un color de fondo con texto de etiqueta de contraste automático, y un campo opcional por lotes que admite varios tamaños ANCHOxALTO a la vez
Generador de Imágenes Placeholder en pleno proceso: ancho y alto en píxeles con formato PNG, JPG, WebP o SVG, un color de fondo con texto de etiqueta de contraste automático, y un campo opcional por lotes que admite varios tamaños ANCHOxALTO a la vez.
Diagrama: dónde ocurre el trabajo en una página de SysFenix que no tiene ninguna entrada de archivo: la herramienta llega como JavaScript normal dentro de la página, calcula la respuesta en tu propio dispositivo y la muestra ahí mismo, de modo que la subida, la cola y el registro en servidor que necesita una herramienta online típica no ocurren nunca
Dónde ocurre el trabajo en una página de SysFenix que no tiene ninguna entrada de archivo: la herramienta llega como JavaScript normal dentro de la página, calcula la respuesta en tu propio dispositivo y la muestra ahí mismo, de modo que la subida, la cola y el registro en servidor que necesita una herramienta online típica no ocurren nunca.

Preguntas frecuentes

¿Se suben las imágenes a un servidor?

No. La imagen se dibuja dentro de tu navegador (sobre un canvas HTML para PNG, JPG y WebP, o como marcado SVG en texto plano para la opción SVG) y no se envía a ningún sitio. Por eso, una vez cargada la página, la herramienta sigue funcionando sin conexión a internet, y los archivos que descargas son tuyos para subirlos a un repositorio sin depender de ningún servicio externo.

¿Qué tamaños puedo generar?

Desde 1×1 hasta 5000×5000 píxeles. Escribe el ancho y el alto que necesites; los valores fuera de ese rango se ajustan automáticamente al límite y los decimales se redondean a píxeles enteros. La etiqueta muestra por defecto las propias dimensiones (por ejemplo "600 × 400"), la misma convención que usan los servicios de placeholder alojados.

¿Cómo genero varios tamaños de una vez?

Pega una lista en la caja "Batch sizes" (tamaños por lotes), un ANCHOxALTO por línea, o separados por comas o puntos y coma. El botón pasa a producir un único ZIP llamado placeholder-images.zip con un archivo por tamaño, cada uno llamado placeholder-ANCHOxALTO con la extensión que hayas elegido. Los tamaños repetidos se descartan para que no haya dos archivos con el mismo nombre dentro del ZIP.

¿Para qué sirve el botón "Copy data URI"?

Copia la imagen al portapapeles como un data URI en base64 que puedes pegar directamente en el atributo src de una etiqueta de imagen, en un background-image de CSS o en un fixture de tests, sin archivo y sin petición HTTP. Solo está disponible para una imagen suelta, porque un ZIP con varias imágenes no es algo que un navegador pueda mostrar desde un data URI.

¿Qué formato me conviene?

SVG es la mejor opción por defecto para maquetas porque ocupa muy poco y se mantiene nítido a cualquier zoom. PNG es lo más seguro cuando una herramienta no acepta SVG. JPG y WebP sirven cuando necesitas comprobar cómo se comporta tu maquetación con esos formatos concretos. Si tu navegador no puede codificar el formato elegido, la herramienta muestra un error y te pide que pruebes con otro, en lugar de darte un PNG renombrado.

¿La interfaz está en español?

El artículo, las preguntas frecuentes y toda esta página están en español, pero los controles de la herramienta (Width, Height, Format, Generate image…) están en inglés, porque el widget interactivo es el mismo componente en todos los idiomas. Abajo indicamos entre paréntesis la traducción de cada botón para que no haya dudas.

¿Cómo se elige el color del texto?

Por defecto la herramienta mide la luminancia relativa del color de fondo con la fórmula sRGB en la que se basan los ratios de contraste de WCAG, y elige entre negro y blanco el que da mayor contraste. Desmarca "Auto-contrast text colour" si prefieres elegir tú el color del texto.

Herramientas relacionadas