Générateur d'images placeholder
Créez une image de remplacement unie à la taille exacte dont vous avez besoin, avec ses dimensions écrites dessus, pour vos maquettes, mises en page et tests.
Fonctionne entièrement dans votre navigateur
Laissez vide pour afficher la taille.
Largeur et hauteur de 1 à 8000 pixels, jusqu'à 100 mégapixels au total. Le texte tient sur une ligne, à une taille ajustée.
Comment créer une image placeholder
- Saisissez une largeur et une hauteur, ou cliquez sur un format prédéfini comme 1200 × 630 pour une carte de réseau social ou 300 × 250 pour une publicité.
- Choisissez les couleurs du fond et du texte. Laissez le texte vide pour afficher la taille, ou écrivez votre propre libellé.
- Choisissez PNG, JPEG, WebP ou SVG et cliquez sur Télécharger, ou copiez l'image en data URI.
Choisir la taille d'une image placeholder
Une image placeholder remplace une vraie image pendant que vous construisez une page : ce qui compte, c'est qu'elle ait la bonne forme. Les mises en page sont plus sensibles au ratio d'aspect qu'à la résolution : une image d'en-tête en 16:9 ne se comporte pas comme un avatar carré, même si les deux sont petites. Écrire la taille sur l'image permet à quiconque regarde la maquette de voir quel emplacement demande quelles dimensions.
Les formats prédéfinis couvrent les tailles qui reviennent souvent : 1200 × 630 est la forme utilisée par la plupart des réseaux sociaux pour les aperçus de liens, 1080 × 1080 un post carré, 1920 × 1080 et 1280 × 720 les formats vidéo courants, 300 × 250 et 728 × 90 deux emplacements publicitaires standard, et 150 × 150 un avatar typique.
Pour un usage réel, n'oubliez pas qu'une image placeholder est une couleur unie. Le PNG et le SVG la stockent presque sans frais, alors que le JPEG en grande taille ajoute du flou autour du texte. Si vous collez l'image dans du code en data URI, gardez-la petite : chaque octet de l'image est répété dans votre page.
Conseils
- Besoin de la vraie image à cette taille ? Redimensionner une image et Recadrer une image ajustent une photo exactement à l'emplacement.
- Pour intégrer une image terminée sous forme de texte, utilisez Image en Base64.
- Choisissez des couleurs assorties avec le Convertisseur de couleurs et contraste.
Questions fréquentes
Quelque chose quitte-t-il mon appareil ?
Non. Rien de ce que vous saisissez n'est envoyé nulle part. L'image est dessinée par votre navigateur, et le téléchargement est créé sur votre appareil.
Quel format choisir ?
Le SVG ne pèse que quelques centaines d'octets et reste net à toutes les tailles : il convient donc aux mises en page web. Le PNG est exact et sans perte pour les aplats de couleur. Le JPEG et le WebP donnent des fichiers plus légers pour les grandes tailles, et le JPEG présente un léger flou autour du texte. Certains champs d'envoi, comme beaucoup de champs de CMS, n'acceptent que les images matricielles : utilisez alors le PNG.
Comment la taille du texte est-elle choisie ?
Automatiquement. Le texte est agrandi autant que possible sur une ligne, dans environ 80 % de la largeur et 40 % de la hauteur : une bannière large comme 728 × 90 et une bannière haute comme 160 × 600 rendent donc toutes deux bien.
À quoi sert la data URI ?
Une data URI (URI de données) est l'image écrite sous forme de texte : vous pouvez la coller directement dans une balise img HTML ou un fond CSS sans fichier séparé. Elle convient bien aux petites images. Un grand PNG devient une longue chaîne qui alourdit votre page : l'outil vous avertit donc quand le résultat est plus gros que raisonnable, et refuse de copier tout ce qui dépasse 1 Mo.
Le SVG a-t-il besoin de polices particulières ?
Non. Il utilise la police sans-serif du système : il paraît donc un peu différent selon les appareils, mais tient toujours dans l'image, et le texte est échappé pour que des caractères comme & et < ne posent pas de problème.
Quelles sont les limites de taille ?
Chaque côté peut aller de 1 à 8000 pixels, et le total peut atteindre 100 mégapixels. Les images plus grandes prennent plus de temps à dessiner et peuvent ne pas s'ouvrir dans certains programmes.