Lorsque l'on travaille sur une maquette ou un site Web et qu'on n'a pas encore les visuels définitifs, c'est assez pénible de chercher des images / photos gratuites dans le bon thème. Il est souvent plus préférable d'insérer des images génériques. Voici une sélection de générateurs d'images qui vous permettront d'aller plus vite lors de la conception de votre maquette ou de votre site Internet en attendant d'avoir les illustrations définitives.

Lorem Pixel

J'ai déjà présenté Lorem Pixel dans un précédent article. Cet outil est l'un des premiers à avoir vu le jour dans le marché des générateurs d'images.

Pour obtenir une image aléatoire de 400px de large et 200px d'hauteur :

http://lorempixel.com/400/200

Vous pouvez ajouter une catégorie (abstract, animals, business, cats, city, food, nighlife, fashion, people, nature, sports, technics, transport), ajoutez-la à la fin :

http://lorempixel.com/400/200/technics

Pour une photo en noir et blanc, ajoutez le paramètre g avant les dimensions :

http://lorempixel.com/g/400/200/cats

Lorem Picsum

Lorem Picsum permet d'obtenir des photos très simplement. Par défaut, si vous ne spécifiez qu'une largeur, le site va vous renvoyer une photo carrée. Vous pouvez ajouter une hauteur à la suite :

https://picsum.photos/200/300

Vous pouvez afficher une image en noir et blanc avec le paramètre supplémentaire /g/ :

https://picsum.photos/g/200/300

Egalement, si vous souhaitez une photo floutée, ajoutez ?blur à la fin de l'URL :

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

Une liste complète des images au format JSON est mise à disposition par Lorem Picsum.

Lorem Flickr

LoremFlickr propose d'utiliser sous forme de placeholder des photos Flickr sous licence Creative Commons. L'auteur et la licence attribuée sont affichés sur l'image.

La taille est à spécifier (largeur/hauteur) :

https://loremflickr.com/320/240

Vous pouvez afficher une image d'un mot-clé particulier :

https://loremflickr.com/320/240/vintage

Utilisez le paramètre "random" pour avoir une image aléatoire :

https://loremflickr.com/320/240/bird?random=1

Vous pouvez également obtenir une image en noir et blanc avec le paramètre g :

https://loremflickr.com/g/320/240/animal

Le code source de Lorem Flickr est disponible sur Github.

PlaceIMG

En plus des traditionnelles dimensions, PlaceIMG permet de choisir une catégorie parmi les animaux, l'architecture, la nature, les personnes ou encore la tech.

Deux filtres sont également disponibles : noir et blanc et sépia.

http://placeimg.com/300/150

Pour choisir une catégorie, renseignez-la à la fin :

http://placeimg.com/300/150/tech

Idem pour les filtres :

http://placeimg.com/300/150/animals/grayscale

Fake Image Please

De base, Fake Image Please affiche une image carré en fournissant une dimension.

https://fakeimg.pl/300

Vous pouvez bien entendu ajouter une largeur :

https://fakeimg.pl/300/150

Les couleurs du fond et du texte sont personnalisables :

https://fakeimg.pl/300/150/ff9c00/ffffff

De même, vous pouvez modifier le texte affiché (text), sa police (font) et la taille de la police (font_size) :

https://fakeimg.pl/300x150/ff9c00/ffffff/?text=Hello%20World!&font=lobster&font_size=40

Le projet Fake Image Please est open source.

Placeholder

PlaceHolder.com propose par défaut d'afficher des images neutres, reprenant ses dimensions à l'intérieur. Cependant, plusieurs paramètres sont personnalisables : le format (JPG, PNG), le texte dans l'image ou encore la couleur de la police et du fond.

Le minimum à fournir est la largeur désirée :

http://via.placeholder.com/300

Pour modifier les couleurs, saisissez-les au format hexadécimale (background/text) :

http://via.placeholder.com/300x150/ff9c00/ffffff

Pour modifier le texte affiché, ajoutez le paramètre "text" :

http://via.placeholder.com/300x150/ff9c00/ffffff?text=Hello%20World!

Dummy Image

Dummy Image fonctionne globalement de la même façon que PlaceHolder.com, avec quelques fonctionnalités en plus.

Vous pouvez gérer la taille de l'image, ses couleurs, son format et un texte personnalisé. Par défaut, l'URL se présente sous cette forme :

https://dummyimage.com/300

Le ratio peut être défini, la hauteur ou la largeur sera calculée automatiquement :

https://dummyimage.com/300x16:9

Les couleurs sont spécifiées à la suite au format hexadécimal (background/text) :

https://dummyimage.com/300x150/ff9c00/ffffff

Dummy Image propose directement plusieurs tailles d'images prédéfinies (format des publicités, résolution des écrans, ...).

https://dummyimage.com/skyscraper/ff9c00/ffffff

Le texte peut être également personnalisé :

https://dummyimage.com/300x150/ff9c00/ffffff?text=Hello%20World!

Place Kitten / Place Bear

Place Kitten et Place Bear permettent d'obtenir des photos de chatons et d'ours très rapidement.

Vraiment très simple d'approche, vous ne pourrez que renseigner les dimensions souhaitées et si vous désirez que la photo soit en noir et blanc, utilisez le paramètre g :

http://placekitten.com/200/300

https://placebear.com/g/200/300

Fill Murray / Steven Segal / Nicolas Cage

Les générateurs de photos de Fill Murray et Steven Segal ressemblent au fonctionnement de Place Kitten et Place Bear. Ici encore, rien de bien compliqué, vous n'avez qu'à spécifier une dimension pour obtenir votre image :

https://www.fillmurray.com/200/300

https://www.stevensegallery.com/

Celui de Nicolas Cage diffère légèrement. Par défaut, vous obtiendrez un Nicolas Cage calme :

https://www.placecage.com/200/300

Mais avec le paramètre c, vous pouvez avoir une photo de l'acteur sous une autre... forme (crazy) !

https://www.placecage.com/c/150/250

Mais également un GIF animé :

https://www.placecage.com/gif/200/300

Place Hodor

Hodor, le célèbre personnage de Game of Thrones a également droit à son placeholder : Place Hodor.

Pour une image avec des dimensions choisies :

https://placehodor.net/300/150/

Pour du noir et blanc, ajoutez le paramètre /g/ :

https://placehodor.net/g/300/150/

Pour du flou, mettez le paramètre /b/ :

https://placehodor.net/b/300/150/

Place Zombie

On termine cette sélection par un générateur un peu plus trash : Place Zombie ^^. Si vous devez faire une maquette dans ce domaine-là, c'est le site qu'il vous faut !

Les possibilités sont simples. Vous ne pouvez spécifier qu'une dimension (largeur x hauteur) et si vous souhaitez la photo en noir et blanc ou non.

http://placezombie.com/300x200

http://placezombie.com/g/300x200