¿Cómo funciona Picsum.photos? El Lorem Ipsum de las fotos de Stock

Si trabajas o has trabajado alguna vez en diseño gráfico o web, te habrás encontrado con el engorro que supone llenar una página con contenido de prueba, tan solo para que el cliente nos apruebe el diseño. Buscamos imágenes, las recortamos, a menudo aplicamos algún efecto en Photoshop… es posible que hayas perdido cientos de horas descargando fotografías de stock y adaptándolas al tamaño que necesitas, para luego tener que cambiarlas. ¿A donde va todo ese tiempo? Ya te lo digo yo: a la basura.

Para dar solución a este problema, la gente de digitalocean ha creado Lorem Picsum, la herramienta de fotos de prueba que te va a hacer ahorrar un montón de tiempo. ¿Quieres saber como funciona? ¡Te lo explicamos!

¿Que es picsum.photos?

Explicado de manera rápida, se trata del Lorem Ipsum de las fotos. Si Lorem Ipsum funciona generando texto falso con el que rellenar nuestro diseño, esta herramienta hace lo propio con las imágenes. Vamos a verlo con un ejemplo:

Ahora, si pruebas a recargar esta página, verás como se muestra una fotografía diferente cada vez.

¿Cómo funciona esto? Muy fácil, simplemente he añadido el siguiente código:

<img src="https://picsum.photos/800/400" />

A través de este sencillo fragmento de código, lo que he hecho es llamar a una fotografía aleatoria cortesía de Picsum.photos, y le he dicho que el tamaño sea de 800x400px. ¡Y sin instalar ningún plugin ni rompernos la cabeza con configuraciones! Suena interesante, ¿verdad? vamos a verlo con más calma 🙂

¿Cómo puede ayudarme a trabajar más rápido?

Seguramente lo que hayas hecho hasta ahora cada vez que necesitas una imagen de stock sea meterte en uno de los cientos de bancos de imágenes que existen en la red, hayas buscado alguna fotografía que se adapte a lo que necesitas, la hayas descargado, recortado a la medida que necesitas y luego subido a tu panel de medios. Por muy rápido que seas trabajando, en este proceso se van bastantes minutos que podrías estar dedicando a algo mucho más productivo. ¿O no?

¿Debo preocuparme por la licencia de las fotografías?

¡En absoluto! Esta herramienta utiliza las fotografías de Unsplash, por lo que no debes preocuparte por eso. Todas las imágenes se pueden usar de manera completamente gratis en tus proyectos, sean del tipo que sean. No debes pedir ningún permiso ni hacer atribución a la fuente. ¡Tan solo procura insertar el código correctamente y no te preocupes por nada más!

Cómo trabajar con Lorem Picsum

Para utilizar una imagen únicamente tienes que poner la url de la web y automáticamente accederás a una imagen aleatoria. Si trabajas en Photoshop, inDesign o Illustrator deberás descargar esa imagen a tu ordenador.  Y si estás usando WordPress u otra plataforma de desarrollo web, podrás insertar esa imagen directamente sin necesidad de descargarla y subirla de nuevo a tu panel de medios.

Obtener una fotografía aleatoria del tamaño deseado

Deberás utilizar el código que mostramos más abajo, asegurándote de indicar en la URL el tamaño deseado separado por una barra. Aquí vemos como lo haríamos para obtener una imagen al azar cuyas dimensiones sean de 1920 de ancho por 1080 de alto.

<img src="https://picsum.photos/1920/1080" />

En WordPress, la manera más sencilla es añadir directamente este fragmento en el editor de código. También podemos hacer clic en el botón ‘Añadir objeto’ y luego en ‘Insertar desde URL’. Las dos formas son igual de válidas, así que trabaja como te sea más cómodo 😉

Como añadir una imagen de Picsum a WordPress

Trabajar con una imagen específica

Es posible que hayas dado con una imagen que te guste, pero quieras utilizarla también a otros tamaños. Para usar una imagen concreta también es muy sencillo. Fíjate que cada vez que se genera una foto aleatoria, la URL cambia añadiendo /id/número/. Este ID hace referencia al código de identificación único de cada imagen, por lo que mantendremos este código y cambiaremos la información de los dos últimos parámetros para elegir el tamaño.

https://picsum.photos/id/123/200/300

¿Que hemos hecho? Hemos solicitado que se muestre la imagen correspondiente al ID 123, a un tamaño de 200 pixeles de ancho por 300 de alto. Fácil, ¿verdad?

Añadir efectos directamente sobre la foto

Como hemos dicho antes, se pueden añadir varios tipos de efectos directamente a la imagen, para que a la hora de insertarla ya tengan aplicado ese efecto y ganemos un montón de tiempo si, por ejemplo, queremos ponerla en blanco y negro.

Escala de grises

Para hacer que una fotografía sea en escala de grises tan solo debes añadir el parámetro /g/ al fragmento de código.

<img src="https://picsum.photos/g/800/400" />

Y quedaría de la siguiente manera:

Desenfoque / Blur

Para desenfocar la imagen, asegúrate de añadir /?blur al final de la URL.

<img src="https://picsum.photos/800/400/?blur" />

El resultado es este:

Combinar varios efectos

Estos efectos se pueden ir combinando de la manera que deseemos. En el siguiente ejemplo vamos a añadir una imagen cuadrada, de 400x400px, en blanco y negro y con efecto de desenfoque.

<img src="https://picsum.photos/g/400/400/?blur" />

Que se vería de la siguiente manera una vez insertado el código:

Conclusiones

Personalmente, esta herramienta ha supuesto un antes y un después en mi forma de trabajar. Reconozco que yo era un asiduo a Unsplash (y lo sigo siendo, a la hora de buscar una imagen de stock de un tema en concreto), pero desde que he descubierto Picsum la uso cada dos por tres. Es comodísimo llenar una web de contenido con esta herramienta, o buscar una imagen para adaptar a distintas medidas de banners digitales. Gracias a lo sencillo de usar de su código, lo que antes suponía tener que abrir Photoshop y ponerme a recortar ahora lo puedo hacer en segundos, y dedicar mi tiempo a cosas más productivas. En definitiva, una herramienta que me ha enamorado y espero que os guste a vosotros tanto como me ha gustado a mí 😉