FakecreditcardÀ télécharger ou à intégrer dans le code
Choisissez le format le plus adapté à votre besoin. Le SVG ne pèse que quelques centaines d'octets pour un gabarit simple et reste net quelle que soit la taille. Le PNG préserve les aplats de couleur et la netteté du texte : c'est le format matriciel le plus universel. Le WebP est pris en charge par tous les navigateurs modernes et produit des fichiers généralement plus légers que le PNG, y compris sur les aplats. Le JPG est réservé aux outils qui l'exigent expressément : il ne gère pas la transparence et peut créer des bandes de compression sur les dégradés. Pour les images matricielles, optez pour @2x ou @3x afin d'obtenir un rendu ultra-net sur les écrans haute densité à taille CSS équivalente ; les dimensions extrêmes sont automatiquement limitées à environ 16 mégapixels, le plafond imposé par le canvas de Safari et de nombreux smartphones.
L'option Copier en génère l'image sous forme de data URI prête à l'emploi selon vos besoins : une balise <img> avec attributs de largeur et de hauteur, du Markdown pour vos fichiers README et documentations, une propriété CSS background-image avec le bon aspect-ratio, ou une balise React <img>. Le SVG est encodé en URL plutôt qu'en base64, ce qui conserve un code lisible sans alourdir le fichier.
Besoin d'une URL de type /600x400 ?
Les services en ligne renvoyant un visuel via une URL comme /600x400 semblent pratiques jusqu'au jour où l'un d'eux ferme ou modifie ses routes, cassant toutes vos maquettes d'un coup. Ils ajoutent également une requête externe à chaque affichage de page. Une data URI intégrée offre une alternative totalement autonome : copiez-la une seule fois et elle fonctionne hors ligne, dans vos prototypes, vos stories Storybook ou vos jeux d'essai. Deux exceptions notables : de nombreux clients de messagerie, dont Gmail, bloquent les data URI (privilégiez un fichier PNG pour les e-mails) ; et les images très volumineuses alourdissent inutilement le code HTML (téléchargez-les plutôt sous forme de fichiers distincts).
Les trois usages d'une image placeholder
- Image fictive de maquettage : un bloc aux dimensions requises qui réserve l'emplacement d'un futur visuel — ce que génère cet outil.
- Image de secours (fallback) ou par défaut : l'illustration affichée en l'absence de contenu, comme une fiche produit sans photo ou un profil sans avatar. Gardez-la neutre, conservez le ratio final et précisez dans le texte alternatif ce qui manque.
- Placeholder de chargement : un aperçu miniature flouté ou un fond uni affiché pendant le chargement de l'image finale, à l'image du
blurDataURLdans Next.js. Un petit SVG uni ou en dégradé issu de cette page fait parfaitement l'affaire.
Dimensions de placeholder les plus courantes
| Usage | Dimensions (px) | Ratio |
|---|---|---|
| Open Graph / aperçu de lien (Facebook, LinkedIn) | 1200 × 630 | ≈ 1,91:1 |
| Carte grand format X (Twitter) | 1200 × 600 | 2:1 |
| Publication carrée Instagram | 1080 × 1080 | 1:1 |
| Publication portrait Instagram | 1080 × 1350 | 4:5 |
| Stories, Reels, TikTok | 1080 × 1920 | 9:16 |
| Miniature YouTube, vidéo HD | 1280 × 720 | 16:9 |
| Bannière hero Full HD ou slide | 1920 × 1080 | 16:9 |
| Image d'article de blog ou carte | 600 × 400 / 800 × 600 | 3:2 / 4:3 |
| Photo de produit e-commerce | 1000 × 1000 | 1:1 |
| Pavé publicitaire (MPU / rectangle moyen) | 300 × 250 | 6:5 |
| Bannière leaderboard | 728 × 90 | ≈ 8:1 |
| Skyscraper large | 160 × 600 | 4:15 |
| Bannière mobile standard | 320 × 50 | 32:5 |
| Avatar / photo de profil | 150 × 150 (cercle) | 1:1 |
Les réseaux sociaux ajustent régulièrement leurs recommandations : vérifiez toujours les spécifications officielles de chaque plateforme avant la production graphique définitive.
Des placeholders qui préservent la mise en page
- Renseignez systématiquement largeur et hauteur (ou la propriété CSS
aspect-ratio) sur la balise image. Le navigateur réserve ainsi l'espace avant le chargement et évite tout décalage d'affichage — le fameux décalage mesuré par le score CLS des Core Web Vitals. - Respectez le ratio d'aspect final afin d'identifier immédiatement les problèmes de recadrage avec les images responsives et
object-fit: cover. - Affichez les dimensions sous forme de texte lors des revues de maquettes, pour que chacun identifie au premier coup d'œil les gabarits encore manquants.
- Attribuez un attribut
alt=""vide aux placeholders décoratifs et remplacez chaque image temporaire avant la mise en production : un placeholder visible en ligne est une anomalie.
Questions fréquentes
Qu'est-ce qu'une image placeholder ?
C'est une image temporaire qui remplace le visuel définitif : un bloc aux bonnes dimensions et à la bonne couleur, souvent étiqueté avec sa taille en pixels, employé dans les maquettes, prototypes et gabarits en attendant la photo finale. Le terme désigne aussi les images de remplacement par défaut en cas d'absence de contenu, ainsi que les miniatures floutées présentées pendant le chargement.
Quelle taille choisir pour une image placeholder ?
La dimension exacte de l'image finale, ou à défaut son ratio d'aspect : 1200 × 630 pour les aperçus de partage, 1080 × 1080 pour les publications carrées, 1920 × 1080 pour une bannière pleine largeur. Respecter les proportions permet de repérer les défauts de mise en page et de rognage avant même de disposer des visuels réels.
Ces images placeholder sont-elles gratuites et libres de droits ?
Oui. Elles sont générées localement sur votre appareil à partir de vos paramètres, sans aucune licence restrictive : vous pouvez les exploiter librement dans vos projets commerciaux, vos thèmes ou pour vos clients, sans mention d'attribution.
Existe-t-il une URL directe à lier, comme /600x400 ?
Non, et c'est volontaire : la génération s'effectue intégralement dans votre navigateur, sans serveur d'hébergement. Copiez plutôt l'image sous forme de balise <img>, de code Markdown ou CSS — la data URI autonome fonctionne partout, y compris sans connexion Internet.
Peut-on créer un placeholder transparent ou arrondi ?
Oui. Cochez l'option Arrière-plan transparent pour les formats PNG, WebP ou SVG (le JPG ne gère pas la transparence et reçoit un fond blanc) et sélectionnez la forme circulaire ou à coins arrondis, avec ou sans bordure, idéale pour les avatars et les cartes.
Quelle est la taille maximale autorisée ?
Jusqu'à 4000 × 4000 pixels en @1x. L'encodage des fichiers PNG et WebP très volumineux peut prendre un court instant ; le format SVG est instantané quelle que soit la taille demandée.