Développement Web
Placeholder Image Generator
Générer une image d'espace réservé de la taille indiquée pour les maquettes et la mise en page.
A placeholder of the right size lets you check a layout before real images are ready — with correct proportions and dimensions labeled right on the image, so you can orient yourself in the mockup.
How to use it
- Enter a width and height in pixels and a placeholder image is generated instantly with its dimensions labeled.
- Optionally set the background and text color to match the mockup's theme.
- Download the finished image or copy a link to use directly in a src attribute.
Common uses
- Laying out a page before real photos or illustrations arrive from a designer.
- Testing a responsive image grid with various aspect ratios and sizes.
- Demoing a prototype to a client with clear dimensions instead of empty boxes.
Things to keep in mind
SVG placeholders weigh just a handful of bytes regardless of the size you set — the format choice affects how much real weight they add to a page during development.
A placeholder is meant purely for temporary use in development — it must be swapped for a real image before launch.
Questions fréquentes
Comment contrôler la taille et l'apparence de l'image ?
Vous définissez la largeur et la hauteur en pixels ainsi que les couleurs d'arrière-plan et de texte ; si vous ne saisissez pas de texte personnalisé, l'outil affiche par défaut les dimensions elles-mêmes, comme 600x400.
À quoi sert cet outil ?
Il est destiné aux maquettes et au prototypage de mise en page — insérer une image de remplacement permet de vérifier l'espacement, les proportions et le design avant que les vraies images soient prêtes.
Puis-je utiliser l'image sans télécharger de fichier ?
Oui, en plus du téléchargement, vous pouvez copier l'image en tant que Data URI et la coller directement dans votre HTML ou CSS.
Quelle est la différence entre un placeholder en SVG et un placeholder en PNG ?
Un placeholder en SVG est vectoriel, donc il s'adapte à l'échelle sans perte de qualité et pèse généralement quelques kilo-octets seulement quelle que soit la taille, tandis que PNG est un format matriciel dont le poids augmente avec la taille de l'image, ce qui simule mieux le comportement d'une vraie photo lors des tests de performance de page.
La taille du placeholder affecte-t-elle vraiment la vitesse de chargement de la page pendant le développement ?
Les placeholders en SVG n'affectent pratiquement pas la vitesse, car ils pèsent seulement quelques octets quelles que soient les dimensions définies, tandis que de gros placeholders matriciels peuvent ajouter un poids notable à la page — pour tester la performance, mieux vaut donc choisir un format proche de la future image réelle.