Image placeholder HTML
Mis à jour : mai 2026
Il existe trois façons principales d'utiliser une image placeholder en HTML : comme balise img avec un attribut src, comme background-image CSS, ou comme SVG inline. Chaque technique convient à des contextes différents. Cette page montre le code pour chaque approche.
Copier HTML · Copier CSS · Copier Data URL · Gratuit
Méthode 1 — Balise img avec Data URL
L'approche la plus directe consiste à générer un placeholder, copier sa Data URL et la coller comme attribut src. La Data URL est une image encodée en base64 intégrée directement dans le HTML — aucun fichier externe n'est nécessaire.
Le générateur Flowfiles fournit un bouton Copier HTML qui construit automatiquement ce snippet depuis vos paramètres actuels. La Data URL est complète — collez et c'est prêt.
Quand l'utiliser : Prototypes rapides, templates d'e-mail, ou tout contexte où héberger un fichier image séparé n'est pas pratique. Les Data URL augmentent la taille du fichier HTML, préférez un fichier hébergé pour la production.
img avec un fichier hébergé
Téléchargez le PNG, JPEG ou SVG du générateur, ajoutez-le à votre projet, puis référencez-le normalement :
Incluez toujours les attributs width et height explicites pour éviter les décalages de mise en page (CLS) au chargement de la page.
Méthode 2 — background-image CSS
Pour les emplacements placeholder décoratifs contrôlés par CSS, utilisez background-image avec une Data URL ou un chemin de fichier hébergé :
Le bouton Copier CSS du générateur produit un snippet prêt à coller avec vos dimensions exactes et votre couleur de fond.
Conseil : Si vous avez seulement besoin d'un placeholder couleur unie (sans texte d'étiquette), ignorez l'image et utilisez simplement background-color: #cccccc; avec une largeur et une hauteur fixes.
Méthode 3 — SVG inline
Les placeholders SVG peuvent être intégrés directement en HTML sans fichier externe ni encodage base64. Le SVG est lisible par l'humain et peut être stylisé avec CSS :
C'est la structure que le générateur Flowfiles construit en interne pour l'export SVG. Vous pouvez la coller directement en HTML, la modifier avec un éditeur de texte ou l'utiliser comme src via une Data URL.
Questions fréquentes
Quelle méthode HTML est la meilleure pour la production ?
Utilisez un fichier hébergé (img src="/chemin/placeholder.svg") en production. Les Data URL alourdissent le HTML et ne peuvent pas être mises en cache indépendamment par le navigateur. Pour le développement, les Data URL sont parfaitement adaptées.
Dois-je utiliser img ou background CSS pour les placeholders ?
Utilisez <img> quand l'image est du contenu (emplacement photo produit, avatar). Utilisez CSS background-image quand l'image est décorative (fond de section, overlay de carte). Les lecteurs d'écran ignorent les backgrounds CSS mais annoncent le texte alt des img.
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.