Generador de imágenes aleatorias para tu Web

Uno de los mayores engorros cuando estas maquetando una web nueva es buscar imágenes de prueba que sabes que vas a volver a cambiar.

Es decir, todo el tiempo que emplees es tiempo perdido a la larga pero si no dedicas tiempo a elegir buenas imágenes la web de prueba se verá fea y eso no mola nada.

Puede parecer exagerado buscar un generador de imágenes aleatorias pero créeme que no lo es. Todo lo contrario.

Yo lo uso de forma conjunta con AlfredApp.

Con Alfred he creado un atajo de teclado para que me añada la url del creador de imágenes aleatoria y así no tengo que recordar nada.

Mira si me gustan los generadores de imágenes para el desarrollo web que ya hablé de uno hace 3 años, concretamente de Picsum Photos.

Pero sin más vamos al lío.

La herramienta se llama lorem.space y su funcionamiento es muy simple como veréis a continuación.

Tutorial en Vídeo

Funcionamiento básico del Generador de imágenes aleatorias

Lo único que tenemos que hacer es añadir la url que nos da la herramienta en el lugar que queremos que aparezca una imagen.

Aquí un ejemplo:

https://api.lorem.space/image/movie?w=150&h=220

Si usamos la url para que aparezca una imagen este sería el resultado

Si nos fijamos en la url anterior vemos que tiene diferentes parámetros que vamos a ver a continuación

Categoría de las imágenes

Podemos ver que en la imagen anterior aparece una película y ello es porque aparece en la url la palabra movie.

La herramienta nos permite cambiar la categoría de la imagen por las siguientes:

• movie
• game
• album
• book
• face
• fashion
• shoes
• watch
• furniture

Por lo que, simplemente cambiando la palabra movie por face veremos que nos aparecen imágenes de caras en vez de películas:

Y así con cada una de las categorías

Tamaño de las imágenes

Además de las categorías de las imágenes, también podemos cambiar el tamaño de ellas.

Es tan sencillo como cambiar el tamaño que aparece al final de la url:

https://api.lorem.space/image/face?w=150&h=220

Si nos fijamos, aparece:

• ?w=150 –> Hace referencia al ancho de la imagen en píxeles
• h=220 –> Hace referencia al alto de la imagen en píxeles.

Si queremos una imagen de 450 660 tendríamos que poner:

https://api.lorem.space/image/face?w=450&h=660

Y el resultado sería:

Como puedes ver su funcionamiento no puede ser más sencillo.

Espero que te sirva 😉