Refresh

This website korben.info/lorem-picsum.html is currently offline. Cloudflare's Always Online™ shows a snapshot of this web page from the Internet Archive's Wayback Machine. To check for the live version, click Refresh.

Lorem Picsum - Pour remplir vos projets web de photos temporaires

par Korben -

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 :

200.webp
![Lorem Picsum - Un site de photos temporaires pour vos projets web](200.webp)
Et si vous voulez une image de 200 de largeur et 300 de hauteur :
200.webp/300
![Image d'un paysage naturel offert par Lorem Picsum](200.webp/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 :
300.webp
![Photo de ville urbaine disponible sur Lorem Picsum](300.webp)
Si vous cherchez une image spécifique, vous pouvez également [consulter la galerie de Picsum](https://picsum.photos/images) ici et récupérer l'ID de la photo qui vous intéresse pour l'appeler comme ceci :
300.webp
![Image haute résolution de nature proposée par Lorem Picsum](300.webp)
Si vous voulez passer une image en noir et blanc, il suffit d'ajouter le paramètre ?grayscale dans l'URL :
200.webp/300?grayscale
![Photo de la faune offerte par Lorem Picsum](200.webp/300?grayscale)
Même chose pour le filtre "blur" pour mettre du flou, dont vous pouvez régler l'intensité comme ceci :
300grayscaleblur2.webp
![Image artistique de Lorem Picsum](300grayscaleblur2.webp)
``` 300blur5.webp ```
![Photo professionnelle pour vos projets web offerte par Lorem Picsum](300blur5.webp)
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 !