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

Изображение-заглушка — это временный графический элемент, который используют до появления финального фото или иллюстрации. Обычно это цветной прямоугольник точного размера нужного слота, нередко с подписью в виде размеров — например, серый блок 600×400 с текстом «600 × 400». Дизайнеры и разработчики вставляют их в макеты, вайрфреймы и прототипы, чтобы верстка выглядела завершённой ещё до получения реальных изображений. Также их называют фиктивными изображениями, placeholder-картинками или заглушками макета.

Укажите изображение в атрибуте src тега <img>. Самый автономный способ — data URI: файл не нужно нигде хранить. Пример: <img src="data:image/svg+xml,…" width="600" height="400" alt="Заглушка">. Перейдите на вкладку «<img>», нажмите «Копировать» — и полный тег с data URI и правильными размерами окажется в буфере обмена, готовый к вставке. Можно также скачать файл и подключить его обычным способом: <img src="/img/placeholder-600x400.png">.

Да — и более приватная. Placehold.co, via.placeholder.com и dummyimage.com отдают изображения со своих серверов: это лишние сетевые запросы, риск ограничений по частоте обращений и слежка за тем, какие страницы запрашивают их картинки. UtiloKit генерирует плейсхолдеры целиком в вашем браузере — ни один запрос не покидает ваше устройство. Вы получаете скачиваемый файл или самодостаточный data URI, который работает офлайн и не сломается при недоступности стороннего сервиса.

Заглушки применяют в макетах сайтов и приложений, вайрфреймах, шаблонах писем, передаче дизайн-спецификаций и фронтенд-разработке — пока реальные материалы ещё не готовы. Они резервируют точное место в верстке (что предотвращает сдвиг макета / CLS), помогают тестировать адаптивность на разных брейкпоинтах и заполняют демо-контент в шаблонах CMS и библиотеках компонентов. Один блок 1280×720 может заменить все превью видео в сетке на время разработки — вся команда оценивает верстку, не дожидаясь финальных материалов.

Размер должен точно совпадать с размером слота — иначе при загрузке реального изображения верстка сдвинется. Распространённые значения: 1200×630 для OG-изображений в соцсетях, 1080×1080 для квадратного поста в Instagram, 1280×720 для превью видео, 256×256 для аватара, 1920×1080 для полноэкранного баннера-хиро и 728×90 для рекламного лидерборда. Воспользуйтесь пресетами размеров и соотношений сторон, чтобы задать нужные параметры одним кликом, или введите любую ширину и высоту вручную — до 4000 пикселей.

Введите нужную подпись в поле «Текст» — например «Главный баннер», «Аватар» или «Рекламный слот 300×250». Если оставить поле пустым, изображение автоматически подпишет себя своими размерами (например «600 × 400»). Можно также задать цвет текста и размер шрифта — чтобы на макете сразу было понятно, что представляет каждый слот. Особенно удобно на дизайн-ревью, когда клиент должен понять назначение каждой зоны ещё до появления финальных материалов.

Для цветного прямоугольника с текстом лучше всего подходит SVG: несколько сотен байт, идеальная чёткость при любом размере и удобное встраивание как data URI — оптимально для веба. Используйте PNG, если инструмент требует растровый файл или нужна прозрачность; JPG — если нужен фотоформат; WebP — для минимального размера растрового файла. Этот инструмент экспортирует все четыре формата, а SVG выбран по умолчанию как наиболее практичный для веб-разработки.

Lorem Picsum (picsum.photos) выдаёт случайные реальные фотографии — удобно, когда нужна живая картинка, но каждый раз загружается другое фото с чужого сервера. Этот инструмент генерирует предсказуемые цветные блоки с вашими точными размерами, цветами и подписью — компактные, стабильные, создаваемые офлайн прямо в браузере: ничего не загружается, результат не меняется от раза к разу. Picsum — для реалистичных фото-макетов; этот инструмент — для чистых, управляемых placeholder-блоков в верстке.

Сервисы вроде placehold.co дают ссылки типа placehold.co/600x400 — сервер генерирует изображение при каждом запросе. Этот инструмент работает полностью в браузере без сервера, поэтому вместо внешней ссылки он выдаёт самодостаточный data URI, который можно вставить куда угодно (в атрибут src тега <img>, в CSS url()), а также скачиваемый файл SVG, PNG, JPG или WebP. Никаких сетевых запросов, никаких ограничений и работает офлайн.

Установите цвет фона светло-серым, например #e2e8f0, а цвет текста — средне-серым, например #475569 — это знакомый нейтральный вид стандартного плейсхолдера. Выберите пресет палитры «Серый», чтобы применить оба цвета сразу, задайте размер и скачайте. Серый воспринимается как «место намеренно оставлено пустым», и заглушка не конкурирует визуально с окружающими элементами на ревью. Это стандартное соглашение, принятое в Figma, Sketch и большинстве дизайн-систем.

Да, полностью. Инструмент работает в любом современном браузере, включая Safari на iPhone и Chrome на Android. Задайте размеры, выберите цвета, добавьте текст, скачайте файл или скопируйте data URI прямо с телефона. Особенно удобно при просмотре адаптивного макета на устройстве, когда нужно быстро заполнить слот изображением для скриншота или передачи дизайна. Устанавливать приложение не нужно — просто откройте страницу в мобильном браузере.

Выберите пресет соотношения сторон (1:1, 4:3, 3:2, 16:9, 2:1 или 9:16) — высота автоматически подстроится к указанной ширине. Например, при ширине 1280 и соотношении 16:9 высота станет 720. Включите «Фиксировать соотношение сторон», чтобы пропорции сохранялись при изменении любой из сторон. Незаменимо для адаптивных слотов с фиксированным соотношением на всех брейкпоинтах или для сеток карточек, где все превью должны быть одной пропорции.

Да — каждое изображение бесплатно, без регистрации, водяных знаков, аккаунта и лимитов на использование. В отличие от ряда онлайн-инструментов, ограничивающих бесплатных пользователей числом загрузок в день или требующих email-регистрации, здесь нет никаких ограничений. Это приватная альтернатива placehold.co, dummyimage.com и via.placeholder.com: вместо обращения к их серверам вы генерируете изображение локально и получаете файл или data URI в полное распоряжение без зависимости от сторонних сервисов.