CDRN

Генерувати зображення-заповнювач

  • Документація
  • 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 пікселів до приблизно 2000 пікселів на сторону. Понад цього розміру відображення залишається можливим, але генерація сповільнюється без реальної користі, оскільки заповнювачі призначені для більш скромних макетів. Для візуального hero розміром 1920 x 1080 інструмент відповідає без проблем.

Чи є URL стабільним і придатним для використання у виробництві?

URL /image/<ширина>/<висота> є детерміністичним, ви можете вставити його таким як є у теги <img> без попереднього завантаження. Для виробничого середовища надавайте перевагу хостингу кінцевих зображень у вас: цей сервіс призначений передусім для макетів, storybooks та інтеграційних тестів.

В чому різниця з Lorem Picsum або Placeholder.com?

Lorem Picsum повертає реальні випадкові фотографії, приємні для надання реалізму макету. Placeholder.com обслуговує зображення з етикетками розмірів. Генератор cdrn повертає прості і швидкі заповнювачі без зовнішнього виклику або сторонніх залежностей у вашому front-end проекті.

Чи можна обрати колір заповнювача?

Не в цій версії. Зображення генеруються з попередньо визначеним нейтральним відображенням. Якщо вам потрібно точно контролювати колір фону для перевірки макету з контрастами, створіть статичний файл кількох кілобайт у бажаному відтінку або використовуйте безпосередньо div CSS з background-color.

Яка користь для front-end розробника?

Швидко тестувати макет без необхідності надавати реальне зображення, перевіряти адаптивність сітки, вставляючи кілька пропорцій, наповнювати storybook або HTML-preview Figma. Для маркетологів і дизайнерів, інструмент служить для ескізів high-fidelity wireframes без залежності від ліцензійних фотографій.

цей інструмент не надає API виконання