Image placeholder pour maquette & wireframe
Mis à jour : mai 2026
Les maquettes et wireframes nécessitent des images placeholder qui communiquent les dimensions de l'emplacement sans distraire de la mise en page. Ce guide couvre les meilleurs formats, tailles et choix de couleurs pour les placeholders en phase de design.
Gratuit · SVG / PNG / JPEG · Couleurs personnalisées · Dans votre navigateur
Pourquoi les wireframes ont besoin des bonnes images placeholder
Un wireframe avec des icônes d'images manquantes donne une impression d'inachevé aux parties prenantes. Un wireframe avec de vraies photographies attire l'attention sur le contenu plutôt que sur la structure. Le bon placeholder se situe entre les deux : il montre clairement l'emplacement image, communique le ratio attendu et reste visuellement neutre pour que la mise en page soit au premier plan.
Trois propriétés sont essentielles pour les placeholders de maquettes :
- Dimensions exactes — le placeholder doit correspondre précisément à la taille d'image prévue, notamment pour valider les points de rupture responsive.
- Couleur neutre — un gris moyen (#cccccc) est conventionnel ; il ne domine pas et ne disparaît pas sur fond blanc ou sombre.
- Étiquette lisible — afficher les dimensions (ex. « 1200×630 ») au centre aide les développeurs à implémenter les bons attributs
widthetheight.
SVG ou PNG pour les maquettes ?
Le SVG est presque toujours le meilleur choix pour les placeholders en phase de design :
- Redimensionnement infini — collez dans Figma à 1× puis zoomez à 400× sans pixelisation.
- Taille de fichier minuscule — un placeholder SVG 1200×630 fait environ 600 octets contre 5 à 20 Ko pour PNG.
- Éditable dans les outils — Figma, Sketch et Illustrator peuvent ouvrir et modifier les fichiers SVG directement.
- Intégrable en HTML — collez le code SVG en ligne ou utilisez une Data URL comme
img srcsans aucun hébergement.
Le PNG est préférable quand la maquette doit être exportée en image raster (ex. export PDF à 96 dpi) ou quand le système cible ne supporte pas le SVG.
Astuce Figma : Générez un placeholder SVG ici, copiez la Data URL, puis collez-la comme remplissage image dans un frame Figma. Les dimensions du frame s'adapteront automatiquement au viewBox du SVG.
Questions fréquentes
Puis-je utiliser ces placeholders dans Figma ?
Oui. Exportez en SVG (Data URL ou fichier téléchargé) et importez-le comme remplissage image dans n'importe quel frame Figma. L'étiquette de dimensions au centre aide les développeurs qui lisent la spec de handoff.
Quelle est la couleur standard d'une image placeholder dans un wireframe ?
Le gris moyen (#cccccc) est la norme de facto pour les wireframes basse fidélité. Les maquettes haute fidélité utilisent souvent une teinte légèrement plus sombre (#aaaaaa ou #999999) pour créer un contraste plus visible avec les fonds blancs.
Comment définir des dimensions exactes pour un placeholder de bannière hero ?
Saisissez directement la largeur et la hauteur dans les champs de l'outil. Pour un hero 1920×600, tapez 1920 dans le champ largeur et 600 dans le champ hauteur, puis téléchargez. Inutile d'utiliser les présélections.