Як створити зображення-заповнювач точного розміру?

Введіть Ширину (px) і Висоту (px), виберіть кольори або Колірну тему, а потім натисніть Завантажити PNG, Завантажити JPG або Завантажити SVG. За замовчуванням на зображенні показуються його розміри, наприклад 800 x 600.

Яке найбільше зображення-заповнювач я можу згенерувати?

Ширина та висота повинні бути від 1 до 4000 пікселів. Значення поза цим діапазоном викликають помилку «Ширина та висота повинні бути від 1 до 4000 px».

Як вставити зображення-заповнювач прямо в HTML без файлу?

Натисніть Копіювати як data URL і вставте його в тег img як значення src. Також можна використати Копіювати фрагмент HTML або Копіювати фон CSS. Зовнішній хостинг зображень не потрібен.

Чи можна згенерувати стандартні розміри для соцмереж або вебу?

Так. Готові розміри включають Пост Instagram, Історія Instagram, Картка Twitter, Open Graph, Мініатюра YouTube, Обкладинка Facebook і Заголовок електронної пошти. Кнопка Завантажити всі попередні налаштування (ZIP) зберігає всі одинадцять як файли PNG.

Як додати власний текст або діагональні лінії на заповнювач?

Введіть напис у полі Власний текст, наприклад «Hero image», замість показу розмірів. Позначте Показувати діагональні лінії (X), щоб намалювати ледь помітні діагоналі. Довгий текст автоматично зменшується, щоб вписатися по ширині.

Це справді безкоштовно?

Так. Кожен інструмент безкоштовний, без облікового запису та кредитної картки. Робота виконується на вашому пристрої, а не на наших серверах, що й дає змогу залишати її безкоштовною.

Працює на мобільних?

Так. Працює в сучасних мобільних браузерах на iOS і Android, нічого встановлювати не потрібно.

🖼️

Генератор зображень-заповнювачів — безкоштовно

Генеруйте кольорові зображення-заповнювачі із довільними розмірами, текстом та кольорами. Стандартні розміри для соціальних мереж, макетів та дизайн-макетів.

Працює у браузеріБез реєстрації та спливаючих віконРеєстрація не потрібнаБезкоштовно назавжди

Ширина (px)

Висота (px)

Готові розміри

Колірні теми

Фон

Текст / лінії

Власний текст (залиште порожнім для розмірів)

Показувати розміри за відсутності власного текстуПоказувати діагональні лінії (X)

💡 Для HTML-макетів: скористайтеся опцією «Копіювати як data URL» і вставте в <img src="..."> для вбудованих заповнювачів. Для макетів Figma / Sketch завантажте PNG і перетягніть у документ.

Типові застосування

Зображення-заповнювачі для дизайну макетівСтворіть кольорові поля розміру для використання у Figma, Sketch або веб-дизайну макетів перед готовністю реальних зображень.
Встроєні заповнювачі для HTML-прототипівВикористовуйте 'Копіювати як URL даних' для вбудовування зображень-заповнювачів безпосередньо в HTML для швидких прототипів.
Заповнювачі для слотів контенту CMSПри демонстрації шаблону CMS використовуйте зображення-заповнювачі замість реального контенту для конфіденційних переглядів.
Шаблони зображень соціальних мережСтворіть заповнювачі правильного розміру для шаблонів постів Instagram, Facebook, Twitter, LinkedIn.
Зображення для тестування макета CSSСтворіть зображення з крайніми пропорціями для тестування адаптивних макетів CSS.

Як це працює

Усе відбувається у вашому браузері через HTML Canvas API і власноруч написану розмітку SVG — без сервера, завантажень і сторонніх сервісів. Ви задаєте розміри, кольори й текст підпису, а інструмент у реальному часі малює зображення прямо на елементі canvas і за запитом серіалізує його в PNG, JPEG або SVG.

1
Налаштуйте розміри й кольори
Введіть ширину й висоту (1–4000 px кожна) або виберіть один з одинадцяти пресетів для поширених розмірів соцмереж і дизайну. Виберіть колір тла й тексту з вбудованих тем або введіть будь-яке значення hex; нативний вибір кольору й перевірене текстове поле синхронізовані.
2
Canvas API миттєво рендерить перегляд
Ефект React викликає drawPlaceholder() при кожній зміні. Ця функція через CanvasRenderingContext2D заливає прямокутник кольором тла, за бажанням малює бліді діагональні лінії з непрозорістю 15%, а потім вимірює й центрує текст підпису — автоматично зменшуючи шрифт, доки текст не вміститься в 90% ширини полотна.
3
Експорт у PNG, JPEG або SVG
Завантаження PNG і JPEG викликають canvas.toDataURL(), перетворюють результат base64 на Blob у пам’яті й запускають завантаження — усе синхронно в межах дії користувача, щоб задовольнити правила завантаження iOS Safari. Експорт SVG будує автономний рядок SVG з відповідним rect, необов’язковими діагональними лініями й елементом text і зберігає його як файл .svg.
4
Пакетний експорт і швидке копіювання
Кнопка «Завантажити всі пресети» динамічно імпортує JSZip, повторно рендерить кожен з одинадцяти розмірів пресетів на позаекранному полотні тією самою функцією малювання й пакує всі PNG в один ZIP. Кнопки копіювання видають PNG data URL, вбудований тег SVG img або оголошення CSS background-image для негайного вставлення в код.