У цій статті
Що таке генератор зображень-заповнювачів?
Генератор зображень-заповнювачів створює порожні або підписані зображення з довільними розмірами, кольорами та текстом. Ці зображення замінюють реальний контент під час розробки, вайрфреймінгу та дизайн-макетів — дозволяючи командам будувати макети без очікування фінальних ресурсів.
На відміну від зовнішніх сервісів заповнювачів, що потребують мережевого запиту, клієнтський генератор створює зображення миттєво в браузері за допомогою Canvas API. Ви контролюєте точну ширину, висоту, колір фону, колір тексту та формат виводу, а потім завантажуєте або копіюєте результат одним кліком.
Як працює генерація зображень
Генератор використовує HTML Canvas API для малювання зображень повністю в браузері. Сервер не задіяний — ваші розміри та кольори рендеряться локально та експортуються як завантажуваний файл.
- Рендеринг Canvas — прихований елемент canvas створюється за вказаними розмірами, заповнюється обраним кольором фону та підписується центрованим текстом, що показує розмір
- Користувацькі кольори та текст — встановіть будь-який колір фону та тексту за допомогою hex-значень (напр., #6366f1) і за бажанням замініть стандартний підпис розміру власним текстом
- Варіанти формату — експортуйте як PNG для якості без втрат, JPEG для меншого розміру файлу або WebP для сучасних браузерів з найкращим співвідношенням стиснення до якості
Спробуйте безкоштовно — реєстрація не потрібна
Згенерувати зображення-заповнювач →Коли використовувати зображення-заповнювачі
Зображення-заповнювачі корисні на кожному етапі розробки продукту, де фінальний візуальний контент ще недоступний.
- Вайрфреймінг — заповнюйте слоти зображень у вайрфреймах правильно розміреними заповнювачами, що передають заплановане співвідношення сторін зацікавленим особам
- Frontend-розробка — будуйте адаптивні макети із зображеннями-заповнювачами правильних розмірів, уникаючи зламаних або відсутніх зображень під час розробки
- Дизайн-макети — створюйте готові до презентації макети з послідовними блоками-заповнювачами замість випадкових стокових фото, що відволікають від макету
Часті запитання
Які формати зображень підтримуються?
Генератор підтримує формати PNG, JPEG та WebP. PNG створює зображення без втрат з підтримкою прозорості (ідеально для заповнювачів з прозорим фоном). JPEG пропонує менші розміри файлів зі стисненням з втратами. WebP забезпечує найкраще співвідношення якості до розміру і підтримується всіма сучасними браузерами.
Які максимальні розміри?
Генератор підтримує зображення до 4096 x 4096 пікселів. Це охоплює більшість випадків використання від маленьких мініатюр (64 x 64) до hero-банерів (1920 x 1080) та дисплеїв retina (2x). Обмеження API Canvas браузера різняться, але 4096 px на сторону надійно працює у всіх сучасних браузерах.
Чи підтримує генератор прозорість?
Так, при використанні формату PNG. Ви можете генерувати зображення з прозорим фоном, залишивши колір фону порожнім або встановивши його як прозорий. JPEG не підтримує прозорість (прозорі ділянки стають білими), а WebP підтримує прозорість, але з артефактами стиснення з втратами.