Skip to content
Korben, roi d’internet, logo bébé avec des lunettes en mode thug life

Lorem Picsum – Pour remplir vos projets web de photos temporaires

Non, rien à voir avec l’oncle Picsou (roh roh), mais si vous êtes développeur, vous connaissez sans doute ce qu’on appelle les « placeholders », c’est à dire les images bouche trou qu’on met sur un site en attendant d’avoir des images définitives. Un peu comme ce qu’on fait avec le texte en Lorem Ipsum justement.

Dans le même esprit que Placeholder.com, le service Lorem Picsum permet de placer des images plutôt jolies au format de votre choix, simplement en changeant les paramètres dans l’URL.

Par exemple, si vous avez besoin d’une image carrée de 200 px de côté, il vous suffit d’appeler dans votre balise img ou votre CSS, l’URL suivante :

https://picsum.photos/200

Et si vous voulez une image de 200 de largeur et 300 de hauteur :

https://picsum.photos/200/300

Ensuite, comme il s’agit d’images aléatoires, il est possible de les rendre fixes en utilisant un « seed », c’est-à-dire en mettant un mot clé de votre choix dans l’URL. Par exemple, cette URL avec mon mot clé KORBEN affichera toujours la même image :

https://picsum.photos/seed/korben/200/300

Si vous cherchez une image spécifique, vous pouvez également consulter la galerie de Picsum ici et récupérer l’ID de la photo qui vous intéresse pour l’appeler comme ceci :

https://picsum.photos/id/1003/300

Si vous voulez passer une image en noir et blanc, il suffit d’ajouter le paramètre ?grayscale dans l’URL :

https://picsum.photos/200/300?grayscale

Même chose pour le filtre « blur » pour mettre du flou, dont vous pouvez régler l’intensité comme ceci :

https://picsum.photos/id/870/200/300?grayscale&blur=2
https://picsum.photos/id/870/200/300?blur=5

Voilà pour Lorem Picsum. Il y a bien sûr d’autres options, mais je vous laisse lire la doc sur le site.

À découvrir ici évidemment !


Les articles du moment