GÉNÉRATEUR PLACEHOLDER

Des espaces réservés aux images ». Indispensable pour les maquettes, les prototypes ou les expérimentations HTML CSS.

Vous voulez un placeholder de 1920×500 pixels ?

ajouter 1920×500 juste après le slash du nom de domaine

exemple : https://placehold.it/1920×500

Une sélection de générateurs d’images (placeholder)

exemple : https://placehold.it/1920×500
Une sélection de générateurs d’images (placeholder)
Par ShevAbam, le 19 Septembre 2018 à 11:08
•image
•photos

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.

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

Générateur PLACEHOLDER – FORMATION WEB DESIGN | Tableau de Bord

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!

Des espaces réservés aux images ». Indispensable pour les maquettes, les prototypes ou les expérimentations HTML CSS.

https://placehold.it

Vous voulez un placeholder de 1920×500 pixels ?

ajouter 1920×500 juste après le slash du nom de domaine

exemple : https://placehold.it/1920×500

Une sélection de générateurs d’images (placeholder)

exemple : https://placehold.it/1920×500
Une sélection de générateurs d’images (placeholder)
Par ShevAbam, le 19 Septembre 2018 à 11:08
•image
•photos

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 et 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