CDRN

Generate a placeholder image

  • Documentation
  • API

How to use it?

Specify the desired image size directly in the call URL. You can use the generated images in your HTML or CSS following the example

The first parameter sets the image width

The second parameter sets the image height. This one is optional. If it is not set, the height will match the width of the image (the image will be square).


        <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

Examples

Square images


        <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 with specific heights


        <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

Frequently asked questions

In what format is the generated image served?

Images are returned in JPEG format, optimised for the web. The weight stays minimal even for large dimensions, which makes the tool suitable for HTML and CSS mockups that contain lots of placeholders. The visual content is a gradient or a neutral fill colour, never a real photo subject to copyright.

Is there a size limit for generated images?

Reasonable dimensions range from 16 px to about 2000 px per side. Beyond that, rendering remains possible but generation slows down with no real benefit, since placeholders are meant for more modest mockups. For a 1920 x 1080 hero visual, the tool responds without issue.

Is the URL stable and usable in production?

The /image/<width>/<height> URL is deterministic, you can paste it as is into your <img> tags without prior download. For a production environment, prefer hosting the final images yourself: this service is primarily intended for mockups, storybooks and integration tests.

What is the difference with Lorem Picsum or Placeholder.com?

Lorem Picsum returns real random photos, nice to add realism to a mockup. Placeholder.com serves images with a dimension label. The cdrn generator returns simple, fast placeholders, with no external call or third-party dependency in your front-end project.

Can the placeholder colour be chosen?

Not in this version. Images are generated with a predefined neutral rendering. If you need to precisely control the background colour to validate a layout with contrasts, create a static file of a few kilobytes in the desired hue or directly use a CSS div with background-color.

What is the value for a front-end developer?

Quickly test a layout without having to provide a real image, validate the responsiveness of a grid by trying several ratios, feed a storybook or a Figma-to-HTML preview. For marketers and designers, the tool is useful to sketch high-fidelity wireframes without depending on licensed photos.

this tool does not expose an execution API