En bref : les images placeholder sont des visuels factices, gris (ou colorés), aux dimensions exactes, qui remplacent les vraies photos pendant que vous concevez. Leur vraie valeur : elles réservent le bon espace tôt, pour que la mise en page se comporte pareil avant et après l'arrivée des visuels finaux — pas de reflux, pas de surprise. Ce guide couvre quand les utiliser, quel format exporter et comment éviter le décalage de mise en page.

Attendre la photographie finale avant de construire une mise en page, c'est à l'envers. Les images placeholder vous laissent fixer d'abord les dimensions, puis insérer les vrais visuels sans que le design ne bouge sous vos pieds.

Réserver l'espace, pas seulement le remplir

Ce qu'un placeholder fait de plus précieux, c'est retenir la largeur et la hauteur exactes qu'utilisera l'image réelle. Si une mise en page est bâtie autour d'images sans dimensions réservées, poser les visuels finaux fait tout sauter — le texte se replie, les boutons se déplacent, et sur le web cela apparaît comme un Cumulative Layout Shift. Concevoir dès le départ avec des placeholders bien dimensionnés fait que l'échange final change l'image, pas la position.

Respectez dimensions et ratio réels

Un placeholder n'est utile que s'il correspond à ce qui arrive. Réglez les dimensions en pixels réelles et le ratio de l'image finale — un hero 16:9, un avatar 1:1, une vignette 4:3 — pour que la maquette reflète la réalité. Étiqueter chaque placeholder de sa taille (beaucoup de générateurs l'impriment sur l'image) facilite le repérage d'un écart en revue.

Retina et haute densité

Sur les écrans à haute densité, une image a besoin de plus de pixels physiques que sa taille de mise en page. Exporter un placeholder en 2×, 3× ou 4× vous laisse tester le rendu du vrai visuel sur écran retina et confirmer que vous avez prévu le fichier plus lourd qu'exigera la version finale.

Quel format exporter

  • PNG / WebP — pour les maquettes et prototypes à l'écran.
  • SVG — indépendant de la résolution, minuscule, idéal quand la taille exacte est encore fluide.
  • Base64 / Data URI — intègre le placeholder directement dans le HTML ou le CSS, pratique pour un prototype autonome sans fichiers externes.

Un flux pratique

  1. Listez les emplacements d'image de votre mise en page et leurs dimensions réelles.
  2. Générez-les dans le Générateur d'Images Placeholder — utilisez le mode lot pour produire toutes les tailles d'un coup.
  3. Placez-les dans le design et vérifiez que rien ne bouge quand vous redimensionnez la fenêtre.
  4. Remplacez les vrais visuels un par un ; l'espace étant réservé, la mise en page reste en place.

S'il vous faut aussi du texte factice pour remplir le contenu autour de ces images, associez le Générateur de Lorem Ipsum pour que toute la maquette se lise à une densité réaliste.

Erreurs courantes à éviter

  • Utiliser des placeholders au mauvais ratio, si bien que l'image réelle est recadrée de façon inattendue.
  • Ne pas réserver les dimensions de l'image, provoquant un décalage à l'arrivée des finaux.
  • Ignorer la mise à l'échelle retina et sous-estimer la taille du fichier.
  • Envoyer un placeholder en production parce qu'il n'a jamais été remplacé.