Image placeholder pour site web
Mis à jour : mai 2026
Vous construisez un site avant que la photographie définitive ne soit prête ? Les images placeholder permettent de finaliser la mise en page, de tester le comportement responsive et de partager l'avancement avec les clients — sans attendre un shooting photo ou une validation de contenu.
Gratuit · N'importe quelle dimension · PNG / JPEG / SVG
Quand les développeurs web ont besoin d'images placeholder
Les images placeholder résolvent un problème concret en développement web : les mises en page ont besoin d'images dimensionnées pour s'afficher correctement, mais les images finales arrivent plus tard dans le calendrier du projet. Sans placeholders, les développeurs travaillent soit avec des icônes d'images manquantes, soit avec des fichiers locaux temporaires qui cassent quand d'autres développeurs récupèrent le projet.
Scénarios courants :
- Sections hero — un placeholder bannière 1920×600 ou 1440×560 maintient la mise en page au-dessus de la ligne de flottaison dès le premier jour.
- Grilles de cartes — des miniatures 400×300 ou 800×450 cohérentes évitent les décalages de mise en page quand les images se chargent à des hauteurs différentes.
- Pages produit — des placeholders carrés 800×800 simulent la photographie produit dans les templates e-commerce.
- Grilles équipe / auteur — des placeholders avatar 200×200 pour les profils membres.
- Listings d'articles — des miniatures d'articles 1200×630 qui correspondent à la fois à l'emplacement OG image et à la taille des cartes de listing.
Bonnes pratiques pour les images placeholder web
- Correspondre exactement aux dimensions de l'emplacement — utilisez la taille d'image finale prévue, pas une approximation. Cela évite les décalages de mise en page inattendus lors du remplacement par les vraies images.
- Inclure les attributs width et height en HTML — définissez toujours
widthetheightsur les éléments<img>pour que le navigateur réserve l'espace correct avant le chargement de l'image. - Choisir une couleur neutre — le gris moyen (#cccccc) ou une couleur de marque du projet à faible opacité maintient le placeholder visuellement distinct sans concurrencer le vrai contenu.
- Étiqueter l'emplacement — mettre « Image hero » ou « Photo produit » dans l'étiquette aide développeurs et clients à comprendre ce qui va où.
- Choisir SVG pour les dépôts partagés — les placeholders SVG font quelques centaines d'octets et n'alourdissent pas le dépôt, contrairement aux fichiers PNG ou JPEG.
Conseil CLS : Les Core Web Vitals pénalisent les décalages de mise en page causés par des images sans dimensions déclarées. Définissez toujours les attributs width et height sur les images placeholder — même en développement — pour que l'habitude se maintienne en production.
Questions fréquentes
Quelle est la taille standard d'une image hero pour un site web ?
1920×600 est courant pour les heroes pleine largeur desktop. À 600 px de hauteur, le texte superposé reste lisible sur la plupart des écrans. Certains designs utilisent 1440×560 pour un hero légèrement plus compact. Vérifiez toujours comment l'image se recadre aux largeurs tablette (1024 px) et mobile (375 px).
Faut-il servir les images placeholder depuis un CDN pendant le développement ?
Non. Utilisez des placeholders générés localement (comme ceux de cet outil) ou du SVG inline. Dépendre d'un service externe en développement ajoute une dépendance réseau inutile et peut casser les workflows hors ligne.
Comment rendre une image placeholder responsive en HTML ?
Définissez max-width: 100%; height: auto; sur l'élément img et incluez des attributs width et height explicites pour la réservation correcte du ratio d'aspect. Pour les images de fond, utilisez background-size: cover; avec un conteneur en pourcentage.