CDRN

Генериране на placeholder изображение

  • Документация
  • API

Как да го използвате?

Посочете размера на желаното изображение директно в извикващия URL адрес. Можете да използвате генерираните изображения във вашия HTML или CSS, като следвате примера

Първият параметър определя ширината на изображението

Вторият параметър определя височината на изображението. Този не е задължителен. Ако не е зададено, височината ще бъде същата като ширината на изображението (изображението ще бъде квадратно). 


        <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

Примери

Квадратни изображения 


        <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

Изображения с определени височини 


        <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

Често задавани въпроси

В какъв формат се показва генерираното изображение?

Изображенията се връщат в JPEG формат, оптимизиран за уеб. Теглото остава минимално дори при големи размери, което прави инструмента подходящ за HTML и CSS макети, които съдържат много контейнери. Визуалното съдържание е градиент или неутрален цвят на запълване, никога истинска снимка, защитена с авторски права.

Има ли ограничение за размера на генерираните изображения?

Разумните размери варират от 16 px до около 2000 px на страна. Освен това изобразяването остава възможно, но генерирането става бавно без реална употреба, тъй като контейнерите са предназначени за по-скромни модели. За главна визуализация от 1920 x 1080 инструментът реагира без проблем.

URL адресът стабилен и използваем ли е в производството?

URL адресът /image// е детерминистичен, можете да го поставите такъв, какъвто е във вашите тагове без първо изтегляне. За производствена среда предпочитайте да хоствате крайните изображения у дома: тази услуга е предназначена предимно за модели, книги с разкази и интеграционни тестове.

По какво се различава от Lorem Picsum или Placeholder.com?

Lorem Picsum връща реални произволни снимки, хубаво е да придаде реализъм на модел. Placeholder.com предлага етикетирани изображения с размери. Генераторът на cdrn връща заместители лесно и бързо, без външни извиквания или зависимости от трети страни във вашия преден проект.

Можем ли да изберем цвета на контейнера?

Не в тази версия. Изображенията се генерират с предварително дефинирано неутрално изобразяване. Ако трябва да контролирате точно цвета на фона, за да потвърдите оформление с контрасти, създайте статичен файл от няколко килобайта в желания нюанс или директно използвайте CSS div с background-color.

Каква е ползата за фронтенд програмист?

Бързо тествайте оформление, без да се налага да предоставяте реално изображение, проверете отзивчивостта на мрежа чрез плъзгане на няколко съотношения, захранете книга с разкази или предварителен преглед на Figma към HTML. За търговци и дизайнери инструментът се използва за скициране на телени рамки с висока точност, без да се разчита на лицензирани снимки.

този инструмент не предоставя API за изпълнение