Генератор зображень-заглушок

Як створити зображення-заглушку

1. Введіть Ширину (px) та Висоту (px) від 1 до 10 000 пікселів. Попередній перегляд і співвідношення сторін оновлюються під час введення.
2. Введіть Текст або залиште поле порожнім, щоб надрукувати розмір, наприклад «1200×630».
3. Виберіть Колір тла і Колір тексту.
4. Залиште Розмір шрифту (px) на 0 для автоматичного розміру, що підлаштовується під зображення, або введіть розмір у пікселях. Виберіть Шрифт.
5. Виберіть Формат: PNG, JPG, WebP або SVG, потім натисніть Завантажити зображення.

Щоб створити одразу багато розмірів, відкрийте Набір поширених розмірів, позначте потрібні (або скористайтеся кнопками Вибрати все / Зняти вибір) і натисніть Завантажити вибрані розміри (ZIP). Кожне зображення використовує кольори, шрифт і формат, указані вище; якщо текст порожній, на кожному зображенні показано його власний розмір.

Який формат вибрати

• SVG найлегший (кілька сотень байтів незалежно від розміру) і залишається чітким за будь-якого масштабу. Він ідеальний для макетів, прототипів і шаблонів HTML. Текст використовує системний шрифт, тому його вигляд може трохи відрізнятися на різних комп’ютерах.
• PNG дає точні пікселі без втрат. Вибирайте його для дизайнерських програм і тоді, коли потрібна справжня растрова картинка.
• JPG дає невеликі файли для великих розмірів і приймається скрізь, навіть у старих системах керування вмістом.
• WebP менший за PNG і JPG та підтримується всіма сучасними браузерами.

Растрові формати обмежені приблизно 16,7 мільйона пікселів (наприклад, 4096 × 4096) – це найбільше полотно, яке браузери можуть закодувати. В SVG такого обмеження немає.

Поширені розміри в наборі

Рекламні розміри відповідають стандартним форматам IAB, які використовує більшість рекламних мереж; розміри для соцмереж збігаються з рекомендаціями основних платформ.

Навіщо потрібні зображення-заглушки

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

Оскільки інструмент створює справжні файли, ви можете користуватися ними офлайн, додавати до репозиторію чи перетягувати в дизайнерську програму, не залежачи від зовнішнього сервісу заглушок, який може вийти з ладу чи стежити за відвідувачами.