LoremPicsum.com

Lorsque l'on intègre une maquette ou lorsqu'il s'agit de designer une page sur Photoshop nous n'avons pas forcément les contenus définitifs. Plutôt que de mettre des carré vides à la place de vos images je vous propose de découvrir LoremPicsum.com. Un générateur de placeholder coloré basé sur des séries animées et des films d'animation.

LoremPicsum vous permet de générer rapidement une image à la place de vos contenus multimédia. Pour l'utiliser il vous suffit de choisir un thème, une taille et de taper l'url sous ce format :

http://lorempicsum.com/<theme>/<width>/<height>/<index entre 1 et 10>

# Par exemple
http://lorempicsum.com/futurama/800/200/2

Et voila votre image générée

Et vu que l'on a pensé aux plus feignants nous avons créé une petite extension photoshop qui vous permettra de générer ces images à la volée à partir d'une sélection (de moins de 1000px) sur votre zone de travail.

Si vous avez des idées d'autres films qui pourraient servir de placeholder n'hésitez pas à proposer ^^.


37 Commentaires

D7dd4dacf71ce20ac9d3bad7d78c8182?s=200&r=pg&d=mm
Phiphou, 28-10-2014 11:58:32 - Répondre

Pour quelque chose de similaire pour AngularJS, il y a angular-placeholders de Josh David Miller à voir ici : https://github.com/joshdmiller/angular-placeholders

42700
Squiweb, 01-10-2014 21:56:16 - Répondre

Un plugin vraiment sympa ! Merci graf'

Eb20202d427682821b0080c578ef50b0?s=200&r=pg&d=mm
Perclure, 20-06-2014 12:22:39 - Répondre

C'est vraiment pas mal !! Merci

14b827ff1402e33ae40dfe8e22fa9b08?s=200&r=pg&d=mm
Nicolas Vergoz, 20-06-2014 10:13:46 - Répondre

Dans le même esprit il y a fillerama qui est un lorem ipsum utilisant des répliques de futurama, dexter et d'autres séries tv.

Pour lorempicsum ce serait bien d'avoir aussi des plans paysages sans les persos, pour avoir le choix du neutre.

Et rajouter des images de série tv ca peut-être bien aussi, et un chouya plus sérieux selon la série.

13084
Shoodey, 16-06-2014 15:32:05 - Répondre

Moi j'aurais pensé à un petit plus, l'aléatoire :
http://lorempicsum.com/futurama/800/200 sans spécifier l'image générerait une image aléatoire appartenant au thème futurama :)

5d751152f31a97d99911e5ecb7fc79bd?s=200&r=pg&d=mm
Arcangeus, 06-06-2014 21:21:05 - Répondre

Ça reprend le mécanisme de http://lorempixel.com/ que j'utilisais déjà mais le fait de pouvoir utiliser un thème cartoon me plait assez.
Le plugin est vraiment sympa en tout cas, merci !

2ae4f833add05ef60005dd02b16865ed?s=200&r=pg&d=mm
flambi, 13-05-2014 19:51:04 - Répondre

Merci pour cette application certainement utile.
Néanmoins je vois mal proposer à mes clients des maquettes avec des images de Futurama ou du monde de Nemo, peut-être qu'il faudrait intégrer des thèmes plus neutre comme des paysages ou des images abstraites ?

Je l'ajoute quand même à mes favoris. :)

33725
Brandon-xprodeur, 20-05-2014 12:40:13 - Répondre

Bonjour, personnellement, à partir que tu veux générer des images dans une maquette, je vois pas le problème, bon après si, quand tu as un thème précis, comme la nature cela pose problème. :/

D7a6d49f650de4d7cb2535491506256e?s=200&r=pg&d=mm
Arrows78, 21-05-2014 23:44:12 - Répondre

Pour les images sur la nature (entre autres), tu peux utiliser http://lorempixel.com/

33725
Brandon-xprodeur, 23-05-2014 09:53:37 - Répondre

Je l'utilise. :) merci quand même.

63fb6bf95f5593564e443f21fdd535e8?s=200&r=pg&d=mm
raphaelvoyance, 23-05-2014 14:48:05 - Répondre

C'est rigolo quand même de proposer ce genre d'image.. Ca allège les esprits! Je trouve ca original! Merci pour cette ressource!

A61035066d5edcafdb5e869621d15111?s=200&r=pg&d=mm
Abdellah Rahim, 27-04-2014 17:19:15 - Répondre

Merci

257cfb76508ff92f85fb819f573c408a?s=200&r=pg&d=mm
GUiDRAW, 25-04-2014 21:34:03 - Répondre

Merci beaucoup pour ton article, cela va me servir forcement.
*ajout aux favoris*

F56a1d5027c5f85ae1c7a176bbbb5777?s=200&r=pg&d=mm
ghassen, 20-04-2014 16:53:53 - Répondre

c'est super, merci pour cette astuce

2467d3497080e2d248d7af2e1a6bdde2?s=200&r=pg&d=mm
Eyecom, 19-04-2014 21:37:27 - Répondre

cool grand merci pour ce petit outil, je souhait juste que les client comprendrons que c pas les images infinitive de leur site ^_^"

1254
Samovar, 11-04-2014 16:42:47 - Répondre

C'est pas mal comme idée ! Je mets ça en Favoris :)

7155581d028dc644bd589e3de8a02384?s=200&r=pg&d=mm
gmourier, 16-03-2014 12:05:36 - Répondre

L'initiative est excellente, un outil que je vais utiliser pour sur dans mes futurs projets. Merci ;)

2e7d8ca7cdcef87c3cba911b1154695d?s=200&r=pg&d=mm
AtomeAtome, 14-03-2014 21:21:41 - Répondre

Ca c'est c'est vraiment cool comme outil.

Le graphiste à kiffé ! ;)

Thomas, Développeur web à Strasbourg, http://www.thomasmoreira.fr

636e93fbeb6855684ed7df14bf4f6e5d?s=200&r=pg&d=mm
Fab#1, 11-03-2014 14:51:27 - Répondre

Super initiative mais Quid des droits sur ces images ? Sinon je n'arrive vraiment pas a concevoir comment vous avez pu oublier Toy Story :s

27a5bdef9d016403b02ddae84e2b315d?s=200&r=pg&d=mm
Roulianne, 11-03-2014 07:40:12 - Répondre

C'est une trés bonne idée. Mais une question me vient...
Comment on fait un plugin photoshop ?
J'avoue avoir cherché deux trois truc mais c'est très loin d'être claire... et en français.
Si tu as un moment pour dire comment tu as fabriqué ce plugin, ce serait chouette. Pour ma part je fait des script JS photoshop mais c'est moins classe qu'un plugin.
Cordialement.

59df9bdc52fc3ca126c7270dc445df0e?s=200&r=pg&d=mm
Nectrooox, 10-03-2014 04:05:09 - Répondre

Je prend le plugin ps ! merci

33569
Stitou Yahya, 09-03-2014 17:23:35 - Répondre

Super idée surtout le plugin Photoshop !

9f08c553164d95db99248642820b3a4f?s=200&r=pg&d=mm
Etienne, 08-03-2014 18:33:56 - Répondre

Super !!
ça change des vieilles photos de lorempixel ...
sinon comme film, vous pouvez utiliser "Moi, Moche et Méchant" ou "Shrek".

0fcd67a7277ff2b5d9a194ed76c39c2b?s=200&r=pg&d=mm
K-lenzo, 07-03-2014 16:12:10 - Répondre

Super tuto :D
Pour ceux qui cherche a faire un petit truc sur le site directement, je vous passe un code PHP qui les génère aléatoirement.
<?php
$theme = rand(1,5);
switch($theme) {
case 1:
$theme = 'nemo';
break;
case 2:
$theme = 'futurama';
break;
case 3:
$theme = 'rio';
break;
case 4:
$theme = 'simpsons';
break;
case 5:
$theme = 'up';
break;
}
$image = rand(1,9);
echo '<img src="http://lorempicsum.com/'.$theme.'/1200/300/'.$image.'"/>';
?>
Les tailles sont à changer dans l'URL directement :)

1209
Typhon, 09-03-2014 21:25:31 - Répondre

Ou plus modulable est plus propre (si des nouveaux thèmes/index arrivent) ;)

<?php
$themes = array('nemo', 'futurama', 'rio', 'simpsons', 'up');
$indexes = array('min' => 1, 'max' => 9);

$theme = $themes[rand(0, sizeof($themes) - 1)];
$index = rand($indexes['min'], $indexes['max']);

echo '<img src="http://lorempicsum.com/'.$theme.'/1200/300/'.$index.'" alt="Une image LoremPicsum">';
?>

B74a1a5d3c8b52283bf935bcf95d96eb?s=200&r=pg&d=mm
mastertaskone, 07-03-2014 12:14:10 - Répondre

Hello,

Un petit tuto de prévu pour nous expliquer comment tu as développé ça (du même genre que "Créer un Bonjour") ?

A+

Fa7209bd628029cfdbccb80c5e07ffca?s=200&r=pg&d=mm
error500, 07-03-2014 06:25:54 - Répondre

Dans le même style avec d'autres themes, il y a
http://lorempixel.com /{x}/{y}/{theme}/{text}...
Sauf erreur tu en avais parlé déjà dans un précédent tuto

A7acac617c41910f7ee4c6fa97161687?s=200&r=pg&d=mm
galyb, 06-03-2014 11:20:21 - Répondre

Je ne suis pas fan de se genre de système car sa peut poser beaucoup de problème en création (le client ne pourra fournir d'image final, les images seront toute en noir et blanc, etc.) et sa peut remettre en question toute la créa. Il faut normalement toute les images et texte ou au moins en avoir une majorité pour commencé quoi que ce soit.

Bfc9210282734ce6f04b13de7ce7c380?s=200&r=pg&d=mm
LuciferX, 18-03-2014 06:16:28 - Répondre

Tout dépend de l'usage qu'on en fait, mais pour présenter un mock-up rapidement, ca peut être très utile !!

Sinon, il y a aussi http://placehold.it/ qui propose la même chose, mais en affichant juste un fond gris avec les dimensions de la zone.

C8016f1a9c30c065934423a09240b3ab?s=200&r=pg&d=mm
zebulonbof, 05-03-2014 21:24:07 - Répondre

Ce qui manque c'est une petite docs sur le site comme ici, avec

http://lorempicsum.com/{theme}/{width}/{height}/[1, 9]

pour montrer directement comment s'en servir sans devoir regarder via le lien copié. (on ce fait une idée rapide et c'est quand même plus clair).

28308
Francois Coron, 05-03-2014 21:01:54 - Répondre

Super idée surtout le plugin Photoshop !

Pour les thèmes voici quelques pistes :

- Star wars
- American dad
- South Park

D8915c01ed690571f4beb297b2aa2892?s=200&r=pg&d=mm
Lo-X, 05-03-2014 19:36:31 - Répondre

J'aime beaucoup les chats de placekitten, mais alors du Futurama je ne peux pas refuser. J'utilise tout de suite dans mon projet en cours :)

B6ae0ace03ce7a373685a81b49e0fdc2?s=200&r=pg&d=mm
valentincreative, 05-03-2014 19:17:15 - Répondre

Cool !

Quelques idées de thèmes :
• American Dad!
• Family Guy
• Le Grand Détournement - La Classe Américaine
• Monty Pythons

564d1589f36e3f51d3968a1e1b2de16e?s=200&r=pg&d=mm
D1ablo, 05-03-2014 18:00:18 - Répondre

Oui je l'avais déjà vu dans une de tes vidéo ;) Très pratique.

3678434352341c440f1a3a06cfade1d8?s=200&r=pg&d=mm
Youness-M, 12-03-2014 11:52:26 - Répondre

merci de partager ce vidéo pour savoir plus de cet astuce ^_^

4458feac0e21f254a188e4fb5c936d28?s=200&r=pg&d=mm
Blinkers, 05-03-2014 17:24:28 - Répondre

Ton lien n'est pas valide en cliquant dessus directement ;)
Sinon moi qui utilise souvent LoremPixel, je trouverais bien qu'il y a une fonction aléatoire

Le souci avec une fonction aléatoire c'est que le navigateur va charger l'image et que si il y a plusieurs fois la même, il va aller charger la même image.

Ce que je cherche à avoir c'est un lien du type http://lorempicsum.com/up/255/200/random
Qui charge une image aléatoirement et qui va être différente à chaque fois
http://lorempicsum.com/up/255/200/random = une image choisie aléatoirement
http://lorempicsum.com/up/255/200/random = une autre image choisie aléatoirement

Ca serait très pratique par exemple lors d'un slider :)

Fcd476cfe3a385bc4bddf5cbbff79fb4?s=200&r=pg&d=mm
Pewel-OutOfNutella, 05-03-2014 19:31:19 - Répondre

Le problème Blinkers, c'est l'authentification.

Il faut bien que le site reconnaisse que les appels viennent du même endroit, pour te proposer des images différentes à chaque fois).
Comment veut tu que le service en question puisse reconnaitre que tu es bien la même personne sans passer par une authentification qui ne ferait que ralentir le processus ?

Le seul moyen que je vois est d'utiliser l'adresse IP et ce n'est même pas fiable parce qu'elle peut changer entre deux appels (par exemple pour les mobiles qui changent de zones réseau)