Générateur d’images d’espace réservé

Une image placeholder est un visuel temporaire utilisé en attendant que la photo ou l'illustration définitive soit prête. Il s'agit généralement d'un rectangle de couleur unie aux dimensions exactes de l'espace qu'il occupe, souvent accompagné de ses dimensions — par exemple, un cadre gris 600×400 affichant "600 × 400". Les designers et développeurs les intègrent dans les maquettes, wireframes et prototypes pour que la mise en page soit complète avant l'arrivée des images réelles. On parle aussi d'image factice, d'image de remplacement ou d'image test.

Pointez une balise <img> vers l'image. La méthode la plus autonome est un data URI, qui ne nécessite aucun fichier à héberger : <img src="data:image/svg+xml,…" width="600" height="400" alt="Placeholder">. Cliquez sur l'onglet '<img>' ici et copiez : la balise complète — data URI inclus, largeur et hauteur déjà renseignées — est copiée dans le presse-papiers, prête à coller. Vous pouvez aussi enregistrer le fichier téléchargé et le référencer normalement, par exemple <img src="/img/placeholder-600x400.png">.

Oui — et il est bien plus respectueux de la vie privée. Placehold.co, via.placeholder.com et dummyimage.com servent tous des images depuis leurs serveurs, ce qui génère des requêtes réseau, peut atteindre des limites de taux, et signifie que ces services enregistrent les pages qui chargent leurs images. UtiloKit génère les images placeholder entièrement dans votre navigateur, aucune requête ne quitte jamais votre appareil. Vous obtenez un fichier téléchargeable ou un data URI autonome qui fonctionne hors ligne et ne tombe jamais en panne si un service externe est indisponible.

Les images placeholder sont utilisées pour les maquettes de sites web et d'applications, les wireframes, les templates d'e-mail, les passations de design, et le développement front-end pendant que les ressources définitives sont encore en cours de création. Elles réservent l'espace exact dans la mise en page (ce qui évite le décalage de mise en page / CLS), permettent de tester les points de rupture responsives, et remplissent le contenu de démonstration dans les templates CMS et les bibliothèques de composants. Un simple cadre 1280×720 peut remplacer chaque miniature vidéo d'une grille pendant le développement, permettant à toute l'équipe de valider la mise en page sans attendre les ressources finales.

Faites correspondre exactement les dimensions en pixels de l'emplacement à remplir, pour que la mise en page ne se décale pas lors du chargement de l'image réelle. Tailles courantes : 1200×630 pour une image de partage social/OG, 1080×1080 pour un carré Instagram, 1280×720 pour une miniature vidéo, 256×256 pour un avatar, 1920×1080 pour une bannière hero pleine largeur, et 728×90 pour une bannière publicitaire leaderboard. Utilisez les préréglages de taille et de ratio d'aspect pour les configurer en un clic, ou saisissez une largeur et une hauteur personnalisées jusqu'à 4000 px.

Saisissez votre étiquette dans le champ Texte — par exemple "Hero", "Avatar" ou "Emplacement pub 300×250". Laissez-le vide et l'image affiche automatiquement ses dimensions (ex. "600 × 400"). Vous pouvez également définir la couleur et la taille du texte, afin qu'un emplacement dans une maquette indique clairement ce qu'il représente. C'est particulièrement utile lors des revues de design quand les clients doivent comprendre la fonction de chaque zone d'image sans voir les ressources finales.

Pour un rectangle uni avec du texte, SVG est généralement le meilleur choix : seulement quelques centaines d'octets, une netteté parfaite quelle que soit la taille, et une intégration propre en tant que data URI — idéal pour le web. Utilisez PNG quand un outil nécessite un fichier raster ou si vous avez besoin de transparence, JPG quand un format photo est requis, et WebP pour le fichier raster le plus léger. Cet outil exporte les quatre formats, et SVG est le format par défaut car c'est le plus pratique pour les workflows de développement web.

Lorem Picsum (picsum.photos) sert des photographies réelles aléatoires, ce qui est idéal quand vous voulez des visuels réalistes, mais implique que chaque chargement affiche une image différente récupérée depuis un serveur tiers. Cet outil génère des rectangles de couleur unie déterministes avec votre taille, vos couleurs et votre étiquette exactes — prévisible, léger, et généré hors ligne dans votre navigateur, sans rien téléverser, avec un résultat identique à chaque chargement. Utilisez Picsum pour des maquettes photo réalistes ; utilisez cet outil pour des placeholders de mise en page propres et maîtrisés.

Les services hébergés comme placehold.co vous donnent une URL du type placehold.co/600x400 parce qu'un serveur génère l'image à chaque requête. Cet outil fonctionne entièrement dans votre navigateur sans serveur, donc au lieu d'une URL distante, il vous fournit un data URI autonome que vous pouvez coller partout où une URL est acceptée (un attribut src d'<img>, une règle CSS url()), ainsi qu'un fichier SVG, PNG, JPG ou WebP téléchargeable. Aucune requête réseau, aucune limite de taux, et ça fonctionne hors ligne.

Définissez l'arrière-plan sur un gris clair comme #e2e8f0 et le texte sur un gris moyen comme #475569 — c'est l'apparence neutre emblématique du placeholder. Sélectionnez le préréglage de palette Gris pour appliquer les deux couleurs en une fois, choisissez votre taille, et téléchargez. Le gris signifie visuellement "intentionnellement vide", donc le placeholder ne rivalise jamais avec le reste de la maquette lors des revues. C'est la convention standard utilisée par Figma, Sketch et la plupart des design systems pour les emplacements d'images.

Oui, sans aucune restriction. L'outil fonctionne dans n'importe quel navigateur moderne, y compris Safari sur iPhone et Chrome sur Android. Définissez vos dimensions, choisissez les couleurs, ajoutez du texte, puis téléchargez ou copiez le data URI directement depuis votre téléphone. C'est particulièrement pratique lors de la révision d'une mise en page responsive sur votre appareil, quand vous devez rapidement remplir un emplacement d'image pour une capture d'écran ou une passation de design. Aucune installation d'application requise — ouvrez simplement la page dans votre navigateur mobile.

Sélectionnez un préréglage de ratio d'aspect (1:1, 4:3, 3:2, 16:9, 2:1 ou 9:16) et la hauteur se met à jour automatiquement en fonction de votre largeur — saisissez 1280 de large en 16:9 et vous obtenez 1280×720. Activez "Verrouiller le ratio d'aspect" pour maintenir cette proportion pendant que vous modifiez l'une ou l'autre dimension. C'est pratique pour les emplacements d'images responsives qui doivent conserver un ratio fixe selon les points de rupture, ou pour concevoir des grilles de cartes où chaque miniature doit avoir les mêmes proportions.

Oui — chaque image est gratuite, sans inscription, sans filigrane, sans compte, et sans limite d'utilisation. Contrairement à certains outils en ligne qui limitent les utilisateurs gratuits à un certain nombre de téléchargements par jour ou exigent une inscription par e-mail, cet outil n'a aucune restriction. C'est une alternative respectueuse de la vie privée à placehold.co, dummyimage.com et via.placeholder.com : au lieu de charger leurs serveurs, vous générez l'image localement et vous êtes propriétaire du fichier ou du data URI, sans aucune dépendance envers la disponibilité d'un tiers.