Créez une image placeholder de n'importe quelle taille avec vos propres couleurs et votre texte. Téléchargez-la en PNG, JPG ou WebP, ou copiez une data URL SVG en ligne qui ne demande aucun hébergement d'images.
Générateur d'image placeholder
Définissez une largeur, une hauteur, un fond, une couleur de texte et un libellé, et ce générateur dessine un placeholder dans votre navigateur. Téléchargez-le en PNG, JPG ou WebP, ou copiez une minuscule data URL SVG à coller directement dans une balise img ou dans le CSS, pour que votre maquette ne dépende jamais d'un service d'images tiers.
Choisir le format selon l'endroit où va le placeholder
Format
Idéal pour
Remarques
Data URL SVG
Prototypes et exemples de code
Pas de fichier, pas de requête, net à tous les niveaux de zoom
PNG
Fichiers de design, envois vers un CMS
Sans perte, pris en charge par tous les navigateurs
JPG
Endroits qui refusent le PNG
Avec perte, sans transparence
WebP
Tester le poids réel d'une page
Avec perte ici, fichiers légers
Les services de placeholders hébergés sont pratiques jusqu'au jour où l'un d'eux tombe en panne ou est bloqué par un filtre réseau, et alors chaque rectangle gris de votre démo est cassé. Cet outil crée l'image en local : vous obtenez soit un vrai fichier, soit une chaîne SVG autonome qui vit dans votre code.
Choisissez une taille courante dans la liste ou saisissez votre propre largeur et hauteur, jusqu'à 4000 pixels de chaque côté.
Choisissez les couleurs du fond et du texte. Laissez le libellé vide pour afficher les dimensions, ou tapez par exemple Photo principale.
L'aperçu est dessiné en SVG dans votre navigateur. Copiez la data URL ou la balise img toute prête pour votre code.
Pour un vrai fichier, choisissez PNG, JPG ou WebP et téléchargez. Le canvas de votre navigateur l'encode, rien n'est donc envoyé.
Gardez toujours les attributs width et height sur l'img, même pour les placeholders, pour que la mise en page ne saute pas quand la vraie photo arrive.
Indiquez sur les placeholders ce qui doit y figurer, comme Photo de l'équipe ou Produit de face, pour que le responsable du contenu sache quoi fournir.
Utilisez un fond gris moyen avec un texte plus foncé ; les rectangles blancs disparaissent sur les sections de page blanches.
Remplacez chaque placeholder avant la mise en ligne. Cherchez data:image/svg+xml dans votre code pour repérer ceux qui restent.
Questions fréquentes
Ces images expirent-elles un jour ?
Non. Un fichier téléchargé vous appartient, et une data URL SVG n'est que du texte dans votre page, il n'y a donc derrière aucun serveur qui pourrait disparaître.
Pourquoi le JPG téléchargé n'a-t-il pas de transparence ?
Le JPEG n'a pas de canal alpha. Chaque placeholder ici a de toute façon un fond uni, mais choisissez PNG ou WebP si vous modifiez le fichier plus tard et avez besoin d'une zone transparente.
Puis-je utiliser la data URL SVG dans le CSS ?
Oui. Placez-la dans url("...") à l'intérieur de background-image. L'outil remplace déjà les guillemets doubles par des simples et encode #, < et > pour que la chaîne fonctionne dans le CSS et dans les attributs HTML.
Quels navigateurs peuvent exporter en WebP ?
L'export du canvas en image/png est obligatoire pour tous les navigateurs, alors que JPEG et WebP sont facultatifs. Si un navigateur ne sait pas produire du WebP, il renvoie discrètement un PNG, et le nom du fichier l'indiquera ici.
Des placeholders qui aident au lieu de cacher les problèmes
Un bon placeholder a le même ratio que l'image finale. Si l'image principale sera une photo en 16:9, prototypez avec 1920 par 1080, pas avec un carré, sinon la mise en page que vous validez recadrera mal plus tard.
Écrivez la taille prévue sur le rectangle. Designers, rédacteurs et photographes voient alors quoi livrer sans ouvrir le code.
Data URL ou fichiers
Une data URL place les octets de l'image directement dans le src. Pour un petit SVG, c'est moins coûteux qu'une requête réseau et cela rend l'extrait portable : collez-le n'importe où et il s'affiche.
Pour tout ce que vous enverrez vers un CMS, stockerez dans un fichier de design ou conserverez, téléchargez plutôt un vrai fichier. Les longues data URL sont difficiles à lire en revue de code.
Tailles de placeholder courantes
Préréglages disponibles dans le générateur
Usage
Largeur
Hauteur
Carte Open Graph
Image principale, 16:9
Miniature de blog
Publication carrée
Story verticale
Avatar
Photo produit, 4:5
Bannière leaderboard
Placeholder dans une balise img et dans le CSS
Placeholder SVG en ligne, sans requête
Le même rectangle gris de 640 par 360 utilisé deux fois : une fois comme source d'image, une fois comme fond CSS.
Carte Open Graph
Image principale, 16:9
Miniature de blog
Publication carrée
Story verticale
Avatar
Photo produit, 4:5
Bannière leaderboard
Votre navigateur n'a pas pu ouvrir de canvas.
L'image n'a pas pu être encodée.
{name} enregistré ({n} KB).
Créer un placeholder
Choisissez une taille, des couleurs et un libellé facultatif. Copiez une data URL SVG ou une balise img, ou téléchargez un PNG, JPG ou WebP créé dans votre navigateur.