CDRN

Generera en platshållarbild

  • Dokumentation
  • API

Så använder du det?

Ange storleken på önskad bild direkt i anrops-URL:en. Du kan använda de genererade bilderna i din HTML eller CSS enligt exemplet

Den första parametern definierar bildens bredd

Den andra parametern definierar bildens höjd. Den är valfri. Om den inte är definierad blir höjden identisk med bildens bredd (bilden blir kvadratisk).


        <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

Exempel

Kvadratiska bilder


        <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

Bilder med specifika höjder


        <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

Vanliga frågor

I vilket format serveras den genererade bilden?

Bilderna returneras i JPEG-format, optimerat för webben. Vikten förblir minimal även för stora dimensioner, vilket gör verktyget lämpligt för HTML- och CSS-mockups som innehåller många platshållare. Det visuella innehållet är en gradient eller en neutral fyllningsfärg, aldrig ett verkligt foto med upphovsrätt.

Finns det en storleksgräns för genererade bilder?

Rimliga dimensioner ligger mellan 16 px och cirka 2000 px per sida. Bortom det är rendering fortfarande möjlig men genereringen blir långsam utan verklig nytta, eftersom platshållarna är avsedda för mer blygsamma mockups. För ett hero-visuellt 1920 x 1080 svarar verktyget utan problem.

Är URL:en stabil och användbar i produktion?

URL:en /image/<largeur>/<hauteur> är deterministisk, du kan klistra in den som den är i dina <img>-taggar utan att ladda ner i förväg. För en produktionsmiljö, föredra att hosta de slutgiltiga bilderna hos dig själv: den här tjänsten är främst avsedd för mockups, storybooks och integrationstester.

Vad är skillnaden mot Lorem Picsum eller Placeholder.com?

Lorem Picsum returnerar verkliga slumpmässiga foton, trevligt för att ge realism åt en mockup. Placeholder.com serverar bilder med dimensionsetikett. cdrn-generatorn returnerar enkla och snabba platshållare, utan externt anrop eller tredjepartsberoende i ditt frontend-projekt.

Kan man välja platshållarens färg?

Inte i den här versionen. Bilderna genereras med en fördefinierad neutral rendering. Om du behöver kontrollera bakgrundsfärgen exakt för att validera en layout med kontraster, skapa en statisk fil på några kilobyte i önskad nyans eller använd direkt en CSS-div med background-color.

Vilket är värdet för en frontend-utvecklare?

Snabbt testa en layout utan att behöva förse med en verklig bild, validera responsiviteten i ett rutnät genom att blanda flera ratios, fylla en storybook eller en Figma-till-HTML-preview. För marknadsförare och designers är verktyget användbart för att skissa wireframes med hög trohet utan att vara beroende av licensierade foton.

detta verktyg exponerar inget exekverings-API