CDRN

Generarea unei imagini placeholder

  • Documentație
  • API

Cum să-l utilizezi?

Specifică dimensiunea imaginii dorite direct în URL-ul de apel. Poți utiliza imaginile generate în HTML-ul sau CSS-ul tău urmând exemplul

Primul parametru definește lățimea imaginii

Al doilea parametru definește înălțimea imaginii. Este opțional. Dacă nu este definit, înălțimea va fi identică cu lățimea imaginii (imaginea va fi pătrată).


        <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

Exemple

Imagini pătrate


        <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

Imagini cu înălțimi specifice


        <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

Întrebări frecvente

În ce format este servită imaginea generată?

Imaginile sunt returnate în format JPEG, optimizat pentru web. Greutatea rămâne minimă chiar și pentru dimensiuni mari, ceea ce face instrumentul potrivit pentru machetele HTML și CSS care conțin multe placeholder-e. Conținutul vizual este un gradient sau o culoare de umplere neutră, niciodată o adevărată fotografie supusă unor drepturi de autor.

Există o limită de dimensiune pentru imaginile generate?

Dimensiunile rezonabile merg de la 16 px la aproximativ 2000 px pe latură. Dincolo, randarea rămâne posibilă dar generarea devine lentă fără utilitate reală, întrucât placeholder-ele sunt destinate machetelor mai modeste. Pentru un vizual hero de 1920 x 1080, instrumentul răspunde fără probleme.

Este URL-ul stabil și utilizabil în producție?

URL-ul /image/<latime>/<inaltime> este determinist, îl poți lipi ca atare în etichetele tale <img> fără descărcare prealabilă. Pentru un mediu de producție, preferă să găzduiești imaginile definitive la tine: acest serviciu este înainte de toate destinat machetelor, storybook-urilor și testelor de integrare.

Care este diferența cu Lorem Picsum sau Placeholder.com?

Lorem Picsum returnează fotografii reale aleatorii, simpatice pentru a da realism unei machete. Placeholder.com servește imagini cu etichetă de dimensiuni. Generatorul cdrn returnează placeholder-e simple și rapide, fără apel extern nici dependență terță în proiectul tău front-end.

Poți alege culoarea placeholder-ului?

Nu în această versiune. Imaginile sunt generate cu o randare neutră predefinită. Dacă ai nevoie să controlezi precis culoarea de fundal pentru a valida un layout cu contraste, creează un fișier static de câțiva kilobyte în nuanța dorită sau utilizează direct un div CSS cu background-color.

Ce interes pentru un dezvoltator front-end?

A testa rapid un layout fără a fi nevoie să furnizezi o imagine reală, a valida responsivitatea unei grile alunecând mai multe raporturi, a alimenta un storybook sau un preview Figma-spre-HTML. Pentru marketeri și designeri, instrumentul servește la schițarea wireframe-urilor de înaltă fidelitate fără a depinde de fotografii sub licență.

acest instrument nu expune un API de execuție