Placeholder Image Generator
Générez des images placeholder SVG personnalisées dynamiquement via une interface web interactive ou une API Edge rapide.
Dimensions
Aperçu SVG en direct
420 × 420 pxUtilisation de l'API et exemples d'intégration
Embed vector placeholder images directly into your HTML, Markdown, or CSS layout mockups using the Edge API endpoint.
<img src="https://jsonforge.app/api/placeholder/420x420" alt="Placeholder Image" width="420" height="420" />Qu'est-ce que Placeholder Image Generator ?
Placeholder Image Generator génère à la demande des images placeholder SVG légères et vectorielles — soit de façon interactive dans l'interface ci-dessous, soit via un point de terminaison HTTP public que vous pouvez glisser directement dans un `<img src>`, une image Markdown ou une maquette de mise en page. Chaque image est construite à partir d'un simple modèle de chaîne SVG — un rectangle de fond, un motif de grille optionnel et une étiquette de texte centrée — sans canvas, sans binaire Sharp et sans navigateur headless, ce qui rend la génération effectivement instantanée. Vous contrôlez indépendamment largeur et hauteur (de 1 px jusqu'à 10000 px chacun), couleurs de fond et de texte en valeurs hexadécimales, un rayon d'angle optionnel, une subtile grille de fond en surimpression, et un texte d'étiquette personnalisé qui revient aux propres dimensions de l'image si laissé vide. La route dédiée `/api/placeholder-image/{width}x{height}` s'exécute sur le Next.js Edge Runtime et renvoie le SVG avec un en-tête Cache-Control immuable d'un an, donc un CDN ou un navigateur ayant déjà mis en cache une URL donnée n'a jamais à la régénérer.
Comment utiliser Placeholder Image Generator
- Saisissez la largeur et la hauteur souhaitées en pixels, ou choisissez une taille prédéfinie comme 420x420, 800x600 ou 1920x1080.
- Personnalisez la couleur de fond et la couleur du texte avec les sélecteurs ou les codes hexadécimaux.
- Saisissez optionnellement un texte personnalisé à superposer, ajustez le rayon d'angle et activez la grille de fond.
- Cliquez sur « Copy Image URL » pour obtenir un lien de point de terminaison API instantané, ou « Download SVG » pour enregistrer le fichier généré localement.
Exemples
Placeholder carré de base 420x420
Entrée
https://jsonforge.app/api/placeholder/420x420
Sortie
Image placeholder SVG 420x420 avec fond gris par défaut (#e5e7eb) et texte gris foncé (#6b7280).
Couleurs et texte personnalisés
Entrée
https://jsonforge.app/api/placeholder/800x600?bg=0f172a&color=ffffff&text=Hero+Banner
Sortie
Placeholder SVG 800x600 avec fond ardoise foncé et texte blanc centré « Hero Banner ».
Coins arrondis et grille subtile
Entrée
https://jsonforge.app/api/placeholder/600x400?bg=4f46e5&color=ffffff&radius=24&grid=true
Sortie
Placeholder SVG 600x400 avec fond indigo, coins arrondis de 24 px et motif de grille de fond.
Étiquette par défaut sans paramètres
Entrée
https://jsonforge.app/api/placeholder/1200x630
Sortie
Placeholder SVG 1200x630 avec le fond gris par défaut et le texte "1200 × 630" dérivé automatiquement des dimensions, puisqu'aucun paramètre de texte n'a été fourni.
Erreurs courantes
- Inclure un caractère '#' dans les paramètres de chaîne de requête sans encodage d'URL (utilisez `bg=2563eb` au lieu de `bg=#2563eb`).
- Passer des valeurs non numériques pour la largeur ou la hauteur (par ex. `420px420`), ce qui renvoie une erreur HTTP 400.
- S'attendre à une sortie raster PNG/JPG directe (l'implémentation actuelle renvoie des images SVG vectorielles propres).
- Demander des dimensions extrêmes comme 9999×9999 pour de simples maquettes de mise en page — le SVG est valide à toute taille, mais embarquer des dizaines d'énormes placeholders sur une page alourdit le DOM et ralentit le défilement.
- Oublier d'encoder en URL le texte personnalisé avec caractères spéciaux comme `&` ou `#` en construisant l'URL à la main — utilisez `encodeURIComponent` au lieu de concaténer des chaînes brutes.
Pourquoi utiliser cet outil
- La génération prend moins de 10 ms car elle est bâtie sur un modèle de chaîne SVG plutôt qu'un rendu canvas ou un navigateur headless, et les réponses portent un en-tête Cache-Control immuable d'un an.
- Sortie SVG vectorielle qui reste nette à toute densité d'écran et à toute échelle.
- Largeur, hauteur, couleurs de fond/texte, rayon d'angle et grille de fond se règlent chacun indépendamment via paramètres de requête ou contrôles de l'interface.
- Aucune dépendance externe, binaire Sharp, Canvas ou Puppeteer requis.
- Un seul point de terminaison sert à la fois d'aperçu au moment du design et d'asset de production — l'URL exacte copiée depuis l'aperçu live est sûre à coder en dur dans le balisage livré, car la sortie ne change jamais pour la même chaîne de requête.