Generador de imágenes de marcador

Una imagen de relleno es un gráfico temporal que se usa mientras la foto o ilustración definitiva no está lista. Suele ser un rectángulo de color liso con las dimensiones exactas del espacio que ocupa, a menudo etiquetado con sus medidas — por ejemplo, un bloque gris de 600×400 que muestra "600 × 400". Diseñadores y desarrolladores las insertan en mockups, wireframes y prototipos para que el layout se vea completo antes de que lleguen las imágenes reales. También se conoce como imagen dummy, imagen placeholder o imagen de marcador de posición.

Apunta una etiqueta <img> a la imagen. La forma más autónoma es un data URI, así no necesitas ningún archivo externo: <img src="data:image/svg+xml,…" width="600" height="400" alt="Placeholder">. Haz clic en la pestaña '<img>' aquí y copia — la etiqueta completa con el data URI y el ancho y alto ya rellenos llega a tu portapapeles, lista para pegar. También puedes guardar el archivo descargado y referenciarlo normalmente, por ejemplo <img src="/img/placeholder-600x400.png">.

Sí — y más respetuosa con la privacidad. Placehold.co, via.placeholder.com y dummyimage.com sirven imágenes desde sus servidores, lo que añade peticiones de red, puede alcanzar límites de uso y significa que esos servicios rastrean qué páginas enlazan sus imágenes. UtiloKit genera las imágenes de relleno completamente en tu navegador, así que ninguna petición sale de tu dispositivo. Obtienes un archivo descargable o un data URI autocontenido que funciona sin conexión y nunca se rompe si un servicio externo cae.

Las imágenes de relleno se usan en mockups de sitios web y aplicaciones, wireframes, plantillas de email, entregas de diseño y desarrollo front-end mientras los recursos reales aún están en producción. Reservan el espacio exacto del layout (lo que evita el desplazamiento de diseño / CLS), ayudan a probar puntos de ruptura responsivos y rellenan contenido de demostración en plantillas de CMS y librerías de componentes. Un solo bloque de 1280×720 puede representar cada miniatura de vídeo en una cuadrícula durante el desarrollo, permitiendo que todo el equipo revise el layout sin esperar los recursos finales.

Debe coincidir con las dimensiones exactas en píxeles del espacio que ocupa, para que el layout no se desplace cuando cargue la imagen real. Medidas habituales: 1200×630 para imagen de compartir en redes sociales / OG, 1080×1080 para publicación cuadrada de Instagram, 1280×720 para miniatura de vídeo, 256×256 para avatar, 1920×1080 para banner hero a ancho completo y 728×90 para un banner leaderboard. Usa los presets de tamaño y proporción aquí para configurarlos con un clic, o escribe cualquier ancho y alto personalizados de hasta 4000 px.

Escribe tu etiqueta en el campo Texto — por ejemplo "Hero", "Avatar" o "Espacio publicitario 300×250". Déjalo en blanco y la imagen se etiquetará automáticamente con sus dimensiones (p. ej. "600 × 400"). También puedes configurar el color del texto y el tamaño de fuente, para que cada espacio en un mockup indique claramente qué representa. Esto es especialmente útil en revisiones de diseño cuando los clientes necesitan entender qué representa cada área de imagen sin ver los recursos finales.

Para un bloque de color liso con texto, SVG suele ser la mejor opción: pesa solo unos pocos cientos de bytes, se ve perfectamente nítido a cualquier tamaño y se inserta bien como data URI — ideal para la web. Usa PNG cuando una herramienta necesita un archivo raster o quieres transparencia, JPG cuando algo exige un formato de foto, y WebP para el archivo raster más ligero. Esta herramienta exporta los cuatro formatos, y SVG es el predeterminado porque es el más práctico para flujos de trabajo de desarrollo web.

Lorem Picsum (picsum.photos) sirve fotografías reales aleatorias, lo que es genial cuando quieres imágenes realistas, pero significa que cada carga es una foto diferente obtenida de un servidor de terceros. Esta herramienta crea bloques de color sólido deterministas con el tamaño, colores y etiqueta exactos que tú defines — predecibles, livianos y generados sin conexión en tu navegador, así no se sube nada y el resultado nunca cambia entre cargas. Usa Picsum para mockups de fotos realistas; usa esta herramienta para placeholders de layout limpios y controlados.

Los servicios alojados como placehold.co te dan una URL como placehold.co/600x400 porque un servidor renderiza la imagen en cada petición. Esta herramienta se ejecuta completamente en tu navegador sin servidor, así que en lugar de una URL hotlinkeada te da un data URI autocontenido que puedes pegar donde sea que vaya una URL (un src de <img>, un url() de CSS), además de un archivo descargable en SVG, PNG, JPG o WebP. Sin petición de red, sin límites de uso y sigue funcionando sin conexión.

Establece el fondo en un gris claro como #e2e8f0 y el texto en un gris medio como #475569 — ese es el aspecto neutro clásico del placeholder. Selecciona el preset de paleta Gris para aplicar ambos colores a la vez, elige tu tamaño y descarga. El gris transmite "espacio intencionalmente vacío", así que el placeholder nunca compite visualmente con el diseño circundante durante la revisión. Esta es la convención estándar utilizada por Figma, Sketch y la mayoría de sistemas de diseño para los espacios de placeholder.

Sí, completamente. La herramienta funciona en cualquier navegador moderno, incluyendo Safari en iPhone y Chrome en Android. Define las dimensiones, elige colores, añade texto y descarga o copia el data URI directamente desde tu teléfono. Es especialmente práctico cuando revisas un layout responsivo en tu dispositivo y necesitas rellenar rápidamente un slot de imagen para una captura de pantalla o entrega de diseño. No se necesita instalar ninguna app — solo abre la página en tu navegador móvil.

Selecciona un preset de proporción (1:1, 4:3, 3:2, 16:9, 2:1 o 9:16) y el alto se actualiza automáticamente para coincidir con tu ancho — escribe 1280 de ancho con 16:9 y obtienes 1280×720. Activa "Bloquear relación de aspecto" para mantener esa proporción mientras escalas cualquiera de las dimensiones. Esto es útil para slots de imágenes responsivas que deben mantener una ratio fija en distintos breakpoints, o para diseñar grids de tarjetas donde cada miniatura necesita tener la misma proporción.

Sí — cada imagen es gratis, sin registro, marca de agua, cuenta ni límite de uso. A diferencia de algunas herramientas de imágenes en línea que limitan a los usuarios gratuitos a un número determinado de descargas por día o requieren registro por email, esta herramienta no tiene ninguna restricción. Es una alternativa respetuosa con la privacidad frente a placehold.co, dummyimage.com y via.placeholder.com: en lugar de enlazar sus servidores, generas la imagen localmente y eres propietario del archivo o data URI, sin depender de la disponibilidad de servicios de terceros.