CDRN

Een placeholder-afbeelding genereren

  • Documentatie
  • API

Hoe u het gebruikt?

Specificeer de gewenste afbeeldingsgrootte rechtstreeks in de aanroep-URL. U kunt de gegenereerde afbeeldingen in uw HTML of CSS gebruiken volgens het voorbeeld

De eerste parameter definieert de breedte van de afbeelding

De tweede parameter definieert de hoogte van de afbeelding. Deze is optioneel. Indien niet gedefinieerd, zal de hoogte gelijk zijn aan de breedte van de afbeelding (de afbeelding zal vierkant zijn).


        <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

Voorbeelden

Vierkante afbeeldingen


        <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

Afbeeldingen met specifieke hoogten


        <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

Veelgestelde vragen

In welk formaat wordt de gegenereerde afbeelding geserveerd?

De afbeeldingen worden teruggegeven in JPEG-formaat, geoptimaliseerd voor het web. Het gewicht blijft minimaal zelfs voor grote afmetingen, wat de tool geschikt maakt voor HTML- en CSS-mockups die veel placeholders bevatten. De visuele inhoud is een verloop of een neutrale vulkleur, nooit een echte foto onderworpen aan auteursrechten.

Is er een groottelimiet voor gegenereerde afbeeldingen?

Redelijke afmetingen gaan van 16 px tot ongeveer 2000 px per zijde. Daarboven blijft de weergave mogelijk maar wordt de generatie traag zonder werkelijk nut, aangezien de placeholders zijn bedoeld voor bescheidener mockups. Voor een hero-visual van 1920 x 1080 antwoordt de tool zonder probleem.

Is de URL stabiel en bruikbaar in productie?

De URL /image/<breedte>/<hoogte> is deterministisch, u kunt deze zo in uw <img>-tags plakken zonder voorafgaande download. Voor een productieomgeving verkiest u het hosten van de definitieve afbeeldingen bij u: deze service is in de eerste plaats bedoeld voor mockups, storybooks en integratietests.

Wat is het verschil met Lorem Picsum of Placeholder.com?

Lorem Picsum geeft echte willekeurige foto's terug, leuk om realisme te geven aan een mockup. Placeholder.com serveert afbeeldingen met een afmetinglabel. De cdrn-generator geeft eenvoudige en snelle placeholders terug, zonder externe oproep of afhankelijkheid van derden in uw frontend-project.

Kan ik de kleur van de placeholder kiezen?

Niet in deze versie. De afbeeldingen worden gegenereerd met een vooraf gedefinieerde neutrale weergave. Als u de achtergrondkleur precies moet beheren om een layout met contrasten te valideren, maak een statisch bestand van enkele kilobytes in de gewenste tint of gebruik direct een CSS div met background-color.

Wat is het belang voor een frontend-ontwikkelaar?

Snel een layout testen zonder een echte afbeelding te hoeven leveren, de responsiviteit van een grid valideren door meerdere ratio's te schuiven, een storybook of een Figma-naar-HTML-preview voeden. Voor marketeers en ontwerpers dient de tool om high-fidelity wireframes te schetsen zonder afhankelijk te zijn van foto's met licenties.

deze tool biedt geen uitvoerings-API