CDRN

Generovať placeholder obrázok

  • Dokumentácia
  • API

Ako ho používať?

Špecifikujte veľkosť požadovaného obrázka priamo v URL volania. Vygenerované obrázky môžete použiť vo vašom HTML alebo CSS podľa príkladu

Prvý parameter definuje šírku obrázka

Druhý parameter definuje výšku obrázka. Je voliteľný. Ak nie je definovaný, výška bude identická so šírkou obrázka (obrázok bude štvorcový).


        <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

Príklady

Štvorcové obrázky


        <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

Obrázky so špecifickou výškou


        <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

Často kladené otázky

V akom formáte je servovaný generovaný obrázok?

Obrázky sú vrátené vo formáte JPEG, optimalizovanom pre web. Váha zostáva minimálna aj pre veľké rozmery, čo robí nástroj vhodným pre HTML a CSS makety obsahujúce veľa placeholderov. Vizuálny obsah je gradient alebo neutrálna výplňová farba, nikdy reálna fotka podliehajúca autorským právam.

Existuje limit veľkosti pre generované obrázky?

Rozumné rozmery idú od 16 px do približne 2000 px per stranu. Nad tým zostáva render možný, ale generovanie sa stáva pomalým bez skutočnej užitočnosti, keďže placeholdery sú určené pre skromnejšie makety. Pre hero vizuál 1920 x 1080 nástroj odpovedá bez problémov.

Je URL stabilná a použiteľná v produkcii?

URL /image/<sirka>/<vyska> je deterministická, môžete ju vložiť tak, ako je, do vašich <img> tagov bez predbežného stiahnutia. Pre produkčné prostredie preferujte hostovanie definitívnych obrázkov u vás: tento servis je predovšetkým určený pre makety, storybooky a integračné testy.

Aký rozdiel od Lorem Picsum alebo Placeholder.com?

Lorem Picsum vracia skutočné náhodné fotky, sympatické pre dodanie realizmu makete. Placeholder.com servuje obrázky s rozmerovou etiketou. cdrn generátor vracia jednoduché a rýchle placeholdery, bez externého volania ani tretej závislosti vo vašom front-end projekte.

Možno zvoliť farbu placeholderu?

Nie v tejto verzii. Obrázky sú generované s predefinovaným neutrálnym renderom. Ak potrebujete presne kontrolovať farbu pozadia pre validáciu layoutu s kontrastmi, vytvorte statický súbor niekoľkých kilobajtov v požadovanom odtieni alebo použite priamo CSS div s background-color.

Aký záujem pre front-end vývojára?

Rýchlo testovať layout bez nutnosti dodať reálny obrázok, validovať responzivitu mriežky vkladaním viacerých pomerov, napájať storybook alebo Figma-na-HTML preview. Pre marketérov a dizajnérov nástroj slúži na náčrt high-fidelity wireframov bez závislosti na licencovaných fotkách.

tento nástroj neposkytuje API na spustenie