Генератор изображений-заполнителей — бесплатно
Генерируйте цветные изображения-заполнители с произвольными размерами, текстом и цветами. Стандартные размеры для социальных сетей, макетов и дизайн-компов.
Стандартные размеры
Цветовые темы
💡 Для HTML-макетов: используйте «Копировать как data URL» и вставьте в <img src="..."> для встроенных заглушек. Для макетов Figma / Sketch скачайте PNG и перетащите.
Частые применения
- Изображения-заполнители для макетов дизайнаСоздавайте цветные блоки размером для использования в Figma, Sketch или веб-макетах дизайна до того, как реальные изображения будут готовы.
- Встроенные заполнители для прототипов HTMLИспользуйте "Копировать как URL данных" для встраивания изображений-заполнителей непосредственно в HTML для быстрых прототипов.
- Заполнители для слотов контента CMSПри демонстрации шаблона CMS используйте изображения-заполнители вместо реального контента для конфиденциальных предпросмотров.
- Шаблоны изображений для социальных сетейСоздавайте заполнители правильного размера для шаблонов постов Instagram, Facebook, Twitter и LinkedIn.
- Изображения для тестирования макета CSSСоздавайте изображения с экстремальными коэффициентами сторон для стресс-тестирования адаптивных макетов CSS.
Как это работает
Всё происходит в вашем браузере с использованием API HTML Canvas и написанной вручную разметки SVG — без сервера, без загрузки, без стороннего сервиса. Вы устанавливаете размеры, цвета и текст метки, и инструмент рисует изображение прямо на элементе холста в реальном времени, затем сериализует его в PNG, JPEG или SVG по требованию.
- 1Настройте размеры и цветаВведите ширину и высоту (1–4000 px каждая), или выберите один из одиннадцати пресетов, охватывающих распространённые размеры социальных сетей и дизайна. Выберите фон и цвет текста из встроенных тем или введите любое значение hex напрямую; нативный выбор цвета и проверенное текстовое поле остаются синхронизированными.
- 2API Canvas мгновенно рендерит предпросмотрЭффект React вызывает drawPlaceholder() при каждом изменении. Эта функция использует CanvasRenderingContext2D для заполнения прямоугольника цветом фона, опционально рисует бледные диагональные перекрёстные линии с непрозрачностью 15%, затем измеряет и центрирует текст вашей метки — автоматически уменьшая шрифт, пока он не поместится в 90% ширины холста.
- 3Экспортируйте как PNG, JPEG или SVGСкачивания PNG и JPEG вызывают canvas.toDataURL(), конвертируют результат base64 в Blob в памяти и запускают скачивание — всё синхронно внутри жеста пользователя, так что правила скачивания iOS Safari удовлетворены. Экспорт SVG строит самодостаточную строку SVG с соответствующим rect, опциональными диагональными линиями и текстовым элементом, затем сохраняет её как файл .svg.
- 4Пакетный экспорт и ярлыки копированияКнопка «Скачать все пресеты» динамически импортирует JSZip, перерендерит каждый из одиннадцати размеров пресетов на закадровом холсте, используя ту же функцию рисования, и упаковывает все PNG в единый ZIP. Кнопки копирования выдают URL данных PNG, инлайн-тег img SVG, или декларацию CSS background-image для немедленной вставки в код.
Похожие инструменты
Генератор Lorem Ipsum
Генерируйте текст-заполнитель Lorem Ipsum. Выбирайте слова, предложения или абзацы. Копируйте одним нажатием.
Сжатие изображений
Сжимайте JPG, PNG, WebP и AVIF. Сравнение до/после.
Изменение размера изображения
Изменение размера изображений по размерам или процентам. Сохраняйте соотношение сторон, выбирайте формат вывода, без потери качества.