Lorem Picsum

Ambas opciones te dan una imagen repetible, pero funcionan de forma distinta. Un ID de imagen extrae una foto exacta del catálogo de Picsum, que va del #1 al #1084 — la URL queda como picsum.photos/id/237/640/480, y esa imagen concreta se carga siempre. Una seed es cualquier cadena de texto que elijas, como el nombre de tu proyecto; Picsum la convierte mediante hash en una foto aleatoria pero consistente usando una ruta /seed/tutexto/. La diferencia clave es control frente a comodidad: un ID garantiza una imagen conocida que ya has visto, mientras que una seed garantiza la misma foto aleatoria para todos los miembros del equipo sin que tengas que elegirla tú. Usa un ID cuando una imagen concreta importe, y una seed cuando simplemente quieras que las maquetas dejen de cambiar en cada actualización. Esta herramienta genera cualquiera de las dos URLs por ti y previsualiza el resultado al instante.

Picsum aplica los efectos mediante parámetros de URL, y esta herramienta los añade por ti con un interruptor y un control deslizante. Para blanco y negro, agrega ?grayscale al enlace, generando algo como picsum.photos/800/600?grayscale. Para el desenfoque, añade ?blur=N, donde N es un nivel de 1 a 10 — cuanto más alto el número, más se suaviza la imagen, así que ?blur=5 es moderado y ?blur=10 queda muy difuminado. Si activas ambos, se combinan en una sola cadena de consulta. Estos efectos son útiles para wireframes de baja fidelidad, texturas de fondo discretas detrás de texto, o para comprobar que los pies de foto superpuestos sigan siendo legibles sobre una imagen recargada. Activa el interruptor de escala de grises o mueve el control de desenfoque aquí, y la vista previa en vivo y el fragmento listo para copiar se actualizan de inmediato para que pegues la URL exacta en tu marcado.

Especificar el ancho y el alto le indica al navegador cuánto espacio ocupará una imagen antes de que termine de descargarse. Sin esas dimensiones, el navegador no conoce el tamaño de la imagen, así que el contenido de alrededor salta a medida que la foto carga — un problema que se mide con Cumulative Layout Shift (CLS), una de las Core Web Vitals de Google. Al reservar el espacio correcto de antemano, mantienes el diseño estable y proteges tu puntuación de CLS, algo que importa incluso cuando la fotografía definitiva sustituya a tus imágenes de relleno. Por eso el fragmento HTML de esta herramienta viene con los atributos width y height ya rellenados junto con loading="lazy", y la salida de Next.js incluye las propiedades width y height que next/image requiere. Genera tu imagen de relleno aquí y el marcado listo para copiar llevará las dimensiones correctas automáticamente, para que adoptes buenos hábitos de diseño desde la etapa de prototipo.

Sí. Más allá de una sola imagen, la galería por lotes crea varias imágenes de relleno con un solo clic: elige entre 4, 6, 9 o 12, o define cualquier cantidad hasta 24. Puedes mantener todas las imágenes con las mismas dimensiones para una cuadrícula uniforme, o dejar que la herramienta las varíe entre relaciones de aspecto habituales para simular el contenido mixto que tendría un layout real tipo masonry o de tarjetas. Esa variedad es justo lo que revela los problemas de diseño desde el principio: cómo se reacomodan las tarjetas en distintas formas, dónde se abren huecos y si una fila respira bien en móvil. Cada tarjeta de la galería es independiente: puedes actualizarla para obtener una foto nueva, fijarla con una seed para que deje de cambiar, abrirla en una pestaña nueva, descargarla como JPEG o eliminarla. Es la forma más rápida de poblar una cuadrícula de prototipo con imágenes realistas en lugar de cajas grises.

Ambas ofrecen fotografías reales como relleno, pero provienen de fuentes distintas con controles distintos. El modo Picsum predeterminado extrae del catálogo de picsum.photos, con imágenes curadas numeradas del #1 al #1084, admite IDs de imagen y seeds exactas para obtener resultados repetibles, y acepta parámetros de escala de grises y desenfoque. El modo Unsplash Source obtiene fotos de la biblioteca más amplia y variada de Unsplash, y resulta útil cuando quieres fotografía de aspecto fresco y actual, o un estilo visual diferente. En la práctica, elige Picsum cuando necesites una imagen específica y reproducible o un ID de catálogo conocido, y cambia a Unsplash cuando quieras más variedad y no necesites fijar una foto exacta. Ambas opciones arman la URL en tu navegador mientras que las imágenes reales provienen de esas CDN externas. Alterna entre los dos servicios en esta herramienta y copia la URL que mejor se ajuste a tu maqueta.