Generirati placeholder sliko

Kako ga uporabljati?

Določite velikost želene slike neposredno v klicnem URL-ju. Ustvarjene slike lahko uporabite v svojem HTML ali CSS tako, da sledite zgledu

Prvi parameter določa širino slike

Drugi parameter določa višino slike. Ta ni obvezna. Če ni nastavljena, bo višina enaka širini slike (slika bo kvadratna).


        <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

Primeri

Kvadratne slike


        <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

Slike z določenimi višinami


        <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

Pogosta vprašanja

V kateri obliki je prikazana ustvarjena slika?

Slike so vrnjene v formatu JPEG, optimiziranem za splet. Teža ostaja minimalna tudi pri velikih dimenzijah, zaradi česar je orodje primerno za modele HTML in CSS, ki vsebujejo veliko ograd. Vizualna vsebina je gradient ali nevtralna barva polnila, nikoli prava avtorsko zaščitena fotografija.

Ali obstaja omejitev velikosti ustvarjenih slik?

Razumne dimenzije segajo od 16 slikovnih pik do približno 2000 slikovnih pik na stran. Poleg tega upodabljanje ostaja možno, vendar postane ustvarjanje počasno brez kakršne koli dejanske uporabe, saj so ograde namenjene skromnejšim modelom. Za glavno sliko 1920 x 1080 se orodje odzove brez težav.

Ali je URL stabilen in uporaben v produkciji?

URL /image// je determinističen, prilepite ga lahko takšnega, kot je, v svoje oznake brez predhodnega prenosa. Za produkcijsko okolje raje gostite končne slike doma: ta storitev je namenjena predvsem modelom, snemalnim knjigam in integracijskim testom.

V čem se razlikuje od Lorem Picsum ali Placeholder.com?

Lorem Picsum vrne prave naključne fotografije, kar je lepo, da daje modelu realističnost. Placeholder.com ponuja označene slike z dimenzijami. Generator cdrn vrne ograde preprosto in hitro, brez zunanjih klicev ali odvisnosti od tretjih oseb v vašem front-end projektu.

Ali lahko izberemo barvo nadomestnega znaka?

Ne v tej različici. Slike so ustvarjene z vnaprej določenim nevtralnim upodabljanjem. Če morate natančno nadzorovati barvo ozadja, da potrdite postavitev s kontrasti, ustvarite statično datoteko nekaj kilobajtov v želenem odtenku ali neposredno uporabite div CSS s background-color.

Kakšna je prednost za front-end razvijalca?

Hitro preizkusite postavitev, ne da bi morali zagotoviti pravo sliko, potrdite odzivnost mreže z drsenjem več razmerij, vnesite snemalno knjigo ali predogled Figma-to-HTML. Za tržnike in oblikovalce se orodje uporablja za skiciranje žičnih okvirjev visoke ločljivosti brez zanašanja na licenčne fotografije.

to orodje ne ponuja izvedbenega API-ja