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/200Vous 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/technicsPour une photo en noir et blanc, ajoutez le paramètre g avant les dimensions :
http://lorempixel.com/g/400/200/catsLorem 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/300Vous pouvez afficher une image en noir et blanc avec le paramètre supplémentaire /g/ :
https://picsum.photos/g/200/300Egalement, si vous souhaitez une photo floutée, ajoutez ?blur à la fin de l'URL :
https://picsum.photos/200/300/?blurUne 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/240Vous pouvez afficher une image d'un mot-clé particulier :
https://loremflickr.com/320/240/vintageUtilisez le paramètre "random" pour avoir une image aléatoire :
https://loremflickr.com/320/240/bird?random=1Vous pouvez également obtenir une image en noir et blanc avec le paramètre g :
https://loremflickr.com/g/320/240/animalLe 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/150Pour choisir une catégorie, renseignez-la à la fin :
http://placeimg.com/300/150/techIdem pour les filtres :
http://placeimg.com/300/150/animals/grayscaleFake Image Please
De base, Fake Image Please affiche une image carré en fournissant une dimension.
https://fakeimg.pl/300Vous pouvez bien entendu ajouter une largeur :
https://fakeimg.pl/300/150Les couleurs du fond et du texte sont personnalisables :
https://fakeimg.pl/300/150/ff9c00/ffffffDe 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=40Le 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/300Pour modifier les couleurs, saisissez-les au format hexadécimale (background/text) :
http://via.placeholder.com/300x150/ff9c00/ffffffPour 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/300Le ratio peut être défini, la hauteur ou la largeur sera calculée automatiquement :
https://dummyimage.com/300x16:9Les couleurs sont spécifiées à la suite au format hexadécimal (background/text) :
https://dummyimage.com/300x150/ff9c00/ffffffDummy Image propose directement plusieurs tailles d'images prédéfinies (format des publicités, résolution des écrans, ...).
https://dummyimage.com/skyscraper/ff9c00/ffffffLe 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/300Fill 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/300Mais avec le paramètre c, vous pouvez avoir une photo de l'acteur sous une autre... forme (crazy) !
https://www.placecage.com/c/150/250Mais également un GIF animé :
https://www.placecage.com/gif/200/300Place 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/
