CDRN

Générer une image placeholder

  • Documentation
  • API

Comment l'utiliser ?

Spécifier la tailler de l'image souhaitée directement dans l'URL d'appel. Vous pouvez utiliser les images générés dans vos HTML ou CSS en suivant l'exemple

Le premier paramètre défini la largeur de l'image

Le second paramètre défini la hauteur de l'image. Celui-ci est optionnel. S'il n'est pas défini, la hauteur sera identique à la largeur de l'image (l'image sera carrée).


        <img src="https://cdrn.fr/60" alt="placeholder image">
        <img src="https://cdrn.fr/120x100" alt="placeholder image">
        <img src="https://cdrn.fr/80x100" alt="placeholder image">
placeholder image placeholder image placeholder image

Exemples

Images carrées


        <img src="https://cdrn.fr/32" alt="placeholder image">
        <img src="https://cdrn.fr/64" alt="placeholder image">
        <img src="https://cdrn.fr/96" alt="placeholder image">
        <img src="https://cdrn.fr/128" alt="placeholder image">
placeholder image placeholder image placeholder image placeholder image

Images avec hauteurs spécifiques


        <img src="https://cdrn.fr/100x60" alt="placeholder image">
        <img src="https://cdrn.fr/200x120" alt="placeholder image">
        <img src="https://cdrn.fr/75x120" alt="placeholder image">
        <img src="https://cdrn.fr/150x240" alt="placeholder image">
placeholder image placeholder image placeholder image placeholder image

Questions fréquentes

Dans quel format est servie l'image générée ?

Les images sont renvoyées au format JPEG, optimisé pour le web. Le poids reste minimal même pour de grandes dimensions, ce qui rend l'outil adapté aux maquettes HTML et CSS qui contiennent beaucoup de placeholders. Le contenu visuel est un dégradé ou une couleur de remplissage neutre, jamais une vraie photo soumise à des droits d'auteur.

Y a-t-il une limite de taille pour les images générées ?

Les dimensions raisonnables vont de 16 px à environ 2000 px par côté. Au-delà, le rendu reste possible mais la génération devient lente sans réelle utilité, puisque les placeholders sont destinés à des maquettes plus modestes. Pour un visuel hero de 1920 x 1080, l'outil répond sans problème.

L'URL est-elle stable et utilisable en production ?

L'URL /image/<largeur>/<hauteur> est déterministe, vous pouvez la coller telle quelle dans vos balises <img> sans téléchargement préalable. Pour un environnement de production, préférez héberger les images définitives chez vous : ce service est avant tout destiné aux maquettes, aux storybooks et aux tests d'intégration.

Quelle différence avec Lorem Picsum ou Placeholder.com ?

Lorem Picsum renvoie de vraies photos aléatoires, sympathiques pour donner du réalisme à une maquette. Placeholder.com sert des images avec étiquette de dimensions. Le générateur cdrn renvoie des placeholders simples et rapides, sans appel externe ni dépendance tierce dans votre projet front-end.

Peut-on choisir la couleur du placeholder ?

Pas dans cette version. Les images sont générées avec un rendu neutre prédéfini. Si vous avez besoin de contrôler précisément la couleur de fond pour valider un layout avec des contrastes, créez un fichier statique de quelques kilooctets dans la teinte voulue ou utilisez directement un div CSS avec background-color.

Quel intérêt pour un développeur front-end ?

Tester rapidement un layout sans avoir à fournir d'image réelle, valider la responsivité d'une grille en glissant plusieurs ratios, alimenter un storybook ou une preview Figma-vers-HTML. Pour les marketeurs et designers, l'outil sert à esquisser des wireframes haute-fidélité sans dépendre de photos sous licence.

cet outil n'expose pas d'API d'exécution