Картинка-заглушка саме потрібного розміру
Введіть ширину й висоту — і отримайте однотонне зображення цього розміру з підписаними в центрі розмірами: заглушку, яка потрібна макету, поки не готове справжнє фото. Змініть кольори, напишіть свій текст і завантажте його у PNG, JPEG, WebP або SVG чи скопіюйте як data URI, щоб вставити просто в HTML або CSS. Усе малюється у вашому браузері.
Як зробити картинку-заглушку
- 1Введіть ширину й висоту в пікселях або виберіть поширений розмір, наприклад 300 × 250 чи 1920 × 1080.
- 2Залиште текст порожнім, щоб показати розміри, або введіть свій — перенесення рядка починає другий рядок тексту.
- 3Виберіть колір фону й тексту, шрифт і розмір тексту.
- 4Завантажте PNG, JPEG, WebP або SVG, скопіюйте зображення або скопіюйте SVG data URI для
<img src>.
Растр чи вектор
- PNG, JPEG, WebP
- Растрове зображення саме тієї ширини й висоти, яку ви ввели, — для форм завантаження, дизайн-файлів і всього, що чекає справжній файл зображення.
- SVG
- Кілька сотень байтів розмітки, що масштабуються до будь-якого розміру без розмиття. Вставте його просто в код або використайте data URI, щоб заглушці взагалі не потрібен був файл.
Текст, що вміщується
Розмір тексту підлаштовується під зображення автоматично: великий на широкому банері, дрібний на рекламному банері leaderboard і ніколи не виходить за край. Повзунок розміру тексту масштабує його далі.
Текст у SVG малюється шрифтами пристрою, на якому він показаний, тож на іншому компʼютері може виглядати трохи інакше; растрові формати скрізь виглядають однаково.
Сервіс заглушок не потрібен
Онлайн-сервіси заглушок можуть перестати працювати або сповільнити сторінку зайвим запитом. Завантажений файл чи data URI працює офлайн і ніколи не змінюється.
Щоб підігнати справжнє фото під платформу, скористайтеся зміною розміру зображень для соцмереж; щоб заповнити макет текстом-заповнювачем, скористайтеся генератором Lorem Ipsum.
Поширені запитання
- Який найбільший розмір заглушки?
- До 8000 пікселів по кожній стороні. Дуже великі растрові зображення можуть перевищити ліміт canvas у деяких браузерах; у SVG такого обмеження немає.
- Чи можна змінити текст на картинці?
- Так. Введіть будь-що в поле тексту; залиште його порожнім, щоб показати розміри. Натисніть Enter для другого рядка.
- Як використати заглушку без файлу?
- Скопіюйте data URI і використайте його як src зображення або як url() у CSS-властивості background-image. Усе зображення міститься в цьому тексті.
- Чи щось вивантажується на сервер?
- Ні. Зображення малюється у вашому браузері й ніколи не залишає ваш пристрій.