Générateur d’image placeholder
Créez des images factices pour vos maquettes, wireframes et emplacements publicitaires, dans la taille, la couleur et le format voulus. Téléchargez le fichier ou copiez-le en data URI — sans service de placeholder externe.
- Aperçu instantané
- HTML et data URI
- Lot en ZIP
- Aucun envoi
Laissez vide pour afficher la taille. {w}, {h} et {ratio} peuvent être placés n’importe où dans le texte.
Plusieurs tailles à la fois
Écrivez chaque taille sous la forme 300x250. Toutes les images reprennent les couleurs et le format choisis ci-dessus. 60 tailles au maximum.
Comment créer une image placeholder
Trois étapes, et l’aperçu se met à jour pendant la saisie.
- 1
Définir la taille
Saisissez la largeur et la hauteur en pixels ou choisissez une taille courante comme 300 × 250, 1200 × 630 ou 1920 × 1080.
- 2
Choisir l’apparence
Réglez le fond, la couleur du texte, la police et le texte. Laissez le texte vide pour afficher la taille sur l’image.
- 3
Télécharger ou copier
Enregistrez en PNG, JPG, WebP ou SVG, ou copiez l’image, une data URI ou du code HTML, CSS et Markdown prêt à l’emploi.
Tout ce qu’il faut à un placeholder
Pensé pour les designers et les développeurs qui ont besoin d’une image factice tout de suite.
Toutes les tailles
Toute largeur et hauteur de 1 à 8000 px, avec des préréglages pour le web, la publicité et les réseaux sociaux.
Vos couleurs
Couleur unie, dégradé bicolore, croix wireframe ou rayures, avec des thèmes de couleurs tout prêts.
Texte libre
Écrivez votre propre libellé et insérez la taille automatiquement avec {w}, {h} et {ratio}.
Quatre formats
PNG, JPG et WebP en pixels, SVG pour le fichier le plus léger, net à toutes les tailles.
Fichiers Retina
L’export en 2× et 3× produit des images nettes pour les écrans haute résolution.
Copier en code
Copiez une balise <img>, une règle CSS de fond ou du Markdown, avec l’image intégrée si vous le souhaitez.
Export par lot
Collez une liste de tailles et téléchargez tous les placeholders dans un seul fichier ZIP.
Aucune dépendance
L’image est un vrai fichier de votre projet : rien ne casse si un service de placeholders est en panne.
Qu’est-ce qu’une image placeholder et quand l’utiliser ?
Une image placeholder est une image factice et neutre qui réserve l’emplacement d’une vraie image pas encore disponible. Les designers s’en servent dans les wireframes et les maquettes, les développeurs pendant la création de gabarits, de boutiques et de thèmes, et les annonceurs pour matérialiser les emplacements publicitaires. Comme le placeholder a exactement la taille en pixels de l’image finale, la mise en page peut être construite et testée avant l’arrivée des photos.
Beaucoup de projets chargent leurs placeholders depuis un service externe au moyen d’une URL. C’est rapide, mais chaque affichage de page dépend alors d’un serveur tiers, lui envoie une requête et échoue si le service est lent ou hors ligne. Un fichier généré ici est une image ordinaire que vous enregistrez dans votre projet ou intégrez en data URI : il fonctionne aussi hors ligne, dans les modèles d’e-mail et dans les tests automatisés.
Dans la plupart des cas, le SVG est le meilleur format : un placeholder de 600 × 400 ne pèse que quelques centaines d’octets et reste net sur tous les écrans. Choisissez le PNG si un outil n’accepte que des images en pixels, le JPG ou le WebP pour tester avec des types de fichiers réalistes, et l’option 2× pour vérifier le comportement d’une mise en page avec des images haute résolution. Indiquez toujours les attributs width et height dans le HTML pour éviter les sauts de page au chargement.
Tailles de placeholder courantes
| Usage | Taille en px | Format |
|---|---|---|
| Image de partage Open Graph | 1200 × 630 | 1,91:1 |
| Bannière ou image vidéo Full HD | 1920 × 1080 | 16:9 |
| Pavé publicitaire (IAB) | 300 × 250 | 6:5 |
| Bannière leaderboard (IAB) | 728 × 90 | 8,09:1 |
| Publication Instagram portrait | 1080 × 1350 | 4:5 |
| Avatar ou vignette carrée | 400 × 400 | 1:1 |
Conseils
- Quand les vraies images arrivent, mettez-les à la taille réservée avec Redimensionner une image pour que la mise en page reste fidèle à la maquette.
- Besoin d’une vraie image de partage plutôt que d’un rectangle gris ? Le Générateur d’image OG crée des images de 1200 × 630 avec titre, logo et fond.
- Avec Redimensionner pour les réseaux sociaux, produisez les images finales pour chaque réseau à partir d’une seule photo.
- Pour les présentations client, utilisez le fond wireframe : le cadre barré d’une croix est le signe classique « ici une image » et ne passe jamais pour un visuel définitif.
Questions fréquentes
Vous ne trouvez pas votre réponse ? Contactez-nous — nous répondons rapidement.
Le générateur de placeholder est-il gratuit ?
Oui. Aucune inscription, aucun filigrane et aucune limite au nombre d’images. Les placeholders peuvent être utilisés dans des projets privés et commerciaux.
Mes réglages ou mes images sont-ils envoyés à un serveur ?
Non. L’image est dessinée dans votre navigateur, sur le canvas de votre appareil, et le téléchargement est créé localement. Rien n’est envoyé en ligne.
Quel format choisir ?
Le SVG est le choix le plus léger et le plus net pour les sites web. Utilisez le PNG si un logiciel exige une image en pixels, et le JPG ou le WebP pour tester avec ces types de fichiers.
Que signifient 2× et 3× ?
Le fichier contient deux ou trois fois plus de pixels dans chaque direction, par exemple 1200 × 800 px pour un placeholder de 600 × 400. La taille dans le HTML reste 600 × 400, et l’image est nette sur les écrans haute résolution.
Puis-je créer plusieurs tailles à la fois ?
Oui. Ouvrez Plusieurs tailles à la fois, saisissez une taille par ligne, par exemple 300x250, et téléchargez jusqu’à 60 placeholders dans un fichier ZIP.
Qu’est-ce qu’une data URI ?
Une data URI contient toute l’image sous forme de texte dans le HTML ou le CSS : aucun fichier séparé n’est demandé. Pratique pour les petits placeholders, les prototypes et les modèles d’e-mail.
D’autres outils gratuits pour vos images
Redimensionnez, compressez, convertissez et nettoyez vos images — vite, gratuitement et en privé, dans votre navigateur.