Картинка-заглушка точно нужного размера
Введите ширину и высоту — и получите однотонное изображение этого размера с подписанными в центре размерами: заглушку, которая нужна макету, пока не готово настоящее фото. Поменяйте цвета, напишите свой текст и скачайте его в 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. Всё изображение содержится в этом тексте.
- Что-нибудь загружается на сервер?
- Нет. Изображение рисуется в вашем браузере и никогда не покидает ваше устройство.