Quelle est la taille maximale d'un placeholder ?

Jusqu'à 8000 pixels de chaque côté. Les très grandes images bitmap peuvent dépasser ce que certains navigateurs autorisent pour un canvas ; le SVG n'a pas cette limite.

Puis-je modifier le texte de l'image ?

Oui. Tapez ce que vous voulez dans la zone de texte ; laissez-la vide pour afficher les dimensions. Appuyez sur Entrée pour une deuxième ligne.

Comment utiliser le placeholder sans fichier ?

Copiez la data URI et utilisez-la comme src d'une image ou comme url() d'un background-image CSS. Toute l'image est contenue dans le texte.

Quelque chose est-il envoyé en ligne ?

Non. L'image est dessinée dans votre navigateur et ne quitte jamais votre appareil.

Générateur d'image placeholder : toutes tailles

Une image placeholder exactement à la taille voulue

Saisissez une largeur et une hauteur et obtenez une image unie de cette taille, avec ses dimensions écrites au centre — le bouche-trou dont une mise en page a besoin avant l'arrivée de la vraie photo. Changez les couleurs, écrivez votre propre texte et téléchargez-la en PNG, JPEG, WebP ou SVG, ou copiez-la en data URI pour la coller directement dans du HTML ou du CSS. Tout est dessiné dans votre navigateur.

Comment créer une image placeholder

1Saisissez la largeur et la hauteur en pixels, ou choisissez une taille courante comme 300 × 250 ou 1920 × 1080.
2Laissez le texte vide pour afficher les dimensions, ou tapez le vôtre — un retour à la ligne commence une deuxième ligne de texte.
3Choisissez les couleurs du fond et du texte, la police et la taille du texte.
4Téléchargez en PNG, JPEG, WebP ou SVG, copiez l'image, ou copiez la data URI SVG pour un <img src>.

Matriciel ou vectoriel

PNG, JPEG, WebP: Une image bitmap exactement à la largeur et à la hauteur saisies, pour les formulaires d'envoi, les fichiers de design et tout ce qui attend un vrai fichier image.
SVG: Quelques centaines d'octets de balisage qui s'adaptent à toute taille sans flou. Collez-le en ligne, ou utilisez la data URI pour que le placeholder n'ait besoin d'aucun fichier.

Un texte qui tient

Le texte est dimensionné automatiquement selon l'image : grand sur une large bannière, petit sur une publicité leaderboard, sans jamais déborder. Le curseur de taille du texte l'ajuste à partir de là.

Le texte SVG est dessiné avec les polices de l'appareil qui l'affiche, il peut donc paraître un peu différent sur un autre ordinateur ; les formats bitmap s'affichent partout de la même façon.

Pas besoin de service de placeholder

Les services de placeholder en ligne peuvent tomber en panne ou ralentir une page avec une requête supplémentaire. Un fichier téléchargé ou une data URI fonctionne hors ligne et ne change jamais.

Pour adapter une vraie photo à une plateforme, utilisez le redimensionneur d'images pour réseaux sociaux ; pour remplir une mise en page de faux texte, utilisez le générateur de lorem ipsum.

Questions fréquentes

Quelle est la taille maximale d'un placeholder ?: Jusqu'à 8000 pixels de chaque côté. Les très grandes images bitmap peuvent dépasser ce que certains navigateurs autorisent pour un canvas ; le SVG n'a pas cette limite.
Puis-je modifier le texte de l'image ?: Oui. Tapez ce que vous voulez dans la zone de texte ; laissez-la vide pour afficher les dimensions. Appuyez sur Entrée pour une deuxième ligne.
Comment utiliser le placeholder sans fichier ?: Copiez la data URI et utilisez-la comme src d'une image ou comme url() d'un background-image CSS. Toute l'image est contenue dans le texte.
Quelque chose est-il envoyé en ligne ?: Non. L'image est dessinée dans votre navigateur et ne quitte jamais votre appareil.