Générateur d'images de substitution (images d'exemple)
Générez une image d'exemple directement dans votre navigateur en définissant la largeur, la hauteur, la couleur de fond et la couleur du texte, puis téléchargez-la au format PNG. L'image n'est jamais envoyée à un serveur.
Tailles courantes des images d'exemple
| Taille | Utilisation typique |
|---|---|
| 300×200 | Image de substitution pour une petite bannière ou un emplacement publicitaire |
| 800×600 | Image insérée dans un article de blog ou image temporaire pour une maquette filaire |
| 1200×630 | Image OGP pour les cartes de partage Facebook et X (Twitter) |
| 1080×1080 | Publication carrée pour Instagram et autres réseaux sociaux |
| 1920×1080 | Image principale Full HD ou fond de diaporama |
| 640×360 | Vignette vidéo au format 16:9 ou vignette d'interface en carte |
Ce qu’est une image de substitution
Une image de substitution est un remplaçant qui garde une place tant que la photographie ou l’illustration véritable se fait attendre. Elle n’est rien de plus qu’un rectangle uni à la taille que vous indiquez, le plus souvent avec cette taille inscrite dessus, et sert à éprouver une mise en page ou à monter une maquette. C’est précisément parce que son contenu ne signifie rien que le regard reste sur la disposition et les marges plutôt que sur l’image.
Donnez à cet outil une largeur, une hauteur, une couleur de fond et une couleur de texte : il dessine aussitôt un aperçu que vous pouvez enregistrer en PNG. Le texte superposé est facultatif : laissé vide, les chiffres « largeur × hauteur » s’y inscrivent d’eux-mêmes, si bien que plusieurs tailles côte à côte se distinguent d’un coup d’œil. Les couleurs se choisissent au sélecteur ou se saisissent en codes hexadécimaux, épousant exactement la palette d’une maquette. Tout est fabriqué dans le navigateur : l’image n’est jamais transmise à un serveur.
Comment fabriquer une image de substitution
- Arrêtez les dimensions Saisissez la largeur et la hauteur en pixels. Les réglages 300×200, 800×600, 1200×630 (OGP) et 1080×1080 remplissent les deux champs d’un coup.
- Choisissez les couleurs Fixez la couleur de fond et celle du texte. Outre le sélecteur, vous pouvez taper directement un code de couleur hexadécimal.
- Ajoutez du texte au besoin Le texte superposé est facultatif. Laissé vide, « largeur × hauteur » paraît de lui-même, ce qui suffit souvent.
- Vérifiez l’aperçu Il se redessine à chaque changement. Regardez ici que le texte ne se perde pas sur le fond.
- Téléchargez le PNG « Télécharger le PNG » l’enregistre sur votre machine. Le fichier est bâti entièrement sur votre appareil et ne va nulle part ailleurs.
Astuces pour en tirer le meilleur parti
- Le préréglage « 1200×630 (OGP) » vous donne instantanément la taille standard qui s'affiche sans être rognée sur les cartes de partage Facebook et X (Twitter).
- Laisser le texte superposé vide affiche automatiquement les chiffres « largeur×hauteur », ce qui permet de distinguer les tailles d'un coup d'œil lors de la comparaison de plusieurs maquettes filaires.
- La couleur de fond et la couleur du texte peuvent être choisies avec le sélecteur de couleur ou saisies directement en code hexadécimal, afin de correspondre exactement à la palette de votre maquette de design.
- L'image générée est uniquement téléchargée sur votre appareil local — elle n'est jamais envoyée ni stockée sur le serveur de ce site.
Où les images de substitution sont utiles
Monter des maquettes filaires
Avant même que les photographies soient arrêtées, poser des boîtes exactement à la taille prévue permet d’avancer la mise en page. La taille étant inscrite sur l’image, on n’en confond pas deux.
Réserver le cadre d’une image OGP
1200×630 est la taille qui paraît dans une carte de partage sans être rognée. Elle tient la place jusqu’à ce que le visuel définitif soit prêt.
Éprouver une fonction de téléversement d’images
Une image de dimensions quelconques se fabriquant aussitôt, cela convient pour tester les limites d’un formulaire et la tenue de l’affichage.
Tâter une harmonie de couleurs
Alignez-en plusieurs en variant fond et texte, et vous voyez vite si l’écart de clarté laisse le texte lisible.
Quand vous voulez travailler une image réelle
Pour changer les dimensions d’une image que vous possédez déjà, prenez le redimensionnement d’image ; pour n’en découper que la part voulue, le recadrage d’image.
Termes relatifs aux images de substitution
- Substitut (placeholder)
- Élément de remplacement qui garde une place jusqu’à ce que soit prêt ce qui lui revient en propre. Outre les images, le Lorem Ipsum joue le même rôle pour le texte.
- Maquette (mockup)
- Spécimen immobile fabriqué pour vérifier l’aspect qu’aura une chose une fois achevée. Il permet de juger de la disposition et des marges avant l’arrivée du matériau réel.
- Image OGP
- L’image qui paraît en carte lorsqu’une page est partagée sur les réseaux sociaux. 1200×630 est la taille d’usage courant ; s’y tenir rend le rognage des bords improbable.
- Code couleur hexadécimal
- Manière d’écrire une couleur sous la forme #RRGGBB, donnant l’intensité du rouge, du vert et du bleu en deux chiffres chacune, de 00 à FF.
- Pixel
- La plus petite unité dont une image est faite. La largeur et la hauteur se donnent ici dans cette unité.
- PNG
- Format d’image à compression sans perte. Une image faite d’un fond uni et d’un peu de texte s’y prête bien, et le fichier demeure léger.
Questions fréquentes
Anecdote — la culture des images de substitution
Le design web a depuis longtemps l'habitude d'utiliser des images de substitution en attendant que les photos ou illustrations définitives soient prêtes. Cela suit la même idée que le texte de remplissage « lorem ipsum » utilisé dans l'imprimerie pour les textes inachevés, simplement appliquée aux images.
Un service nommé « Lorem Picsum », lancé en 2014, s'est largement répandu comme service d'images de substitution fournissant des photographies réelles de manière aléatoire. Comme il suffit d'indiquer la largeur et la hauteur dans l'URL pour obtenir une photo, il a été adopté dans d'innombrables maquettes de design et tutoriels. Néanmoins, dépendre d'un service externe n'est pas toujours pratique pour un travail hors ligne ou des projets à forte confidentialité.
Cet outil adopte une approche différente : il génère instantanément une image de couleur unie avec une étiquette de texte, entièrement dans le