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

Генерируйте однотонные изображения-заглушки любого размера с настраиваемыми цветами и текстом — удобно для макетов и прототипов. Скачайте результат в формате PNG или SVG.

Студия · нейтральное окружение
×

Возможности

Произвольные ширина и высота
Произвольные цвета
Произвольный текст
Скачивание в PNG или SVG

Как использовать

1. Выберите популярный размер (OG-изображение, аватар, HD…) или введите точные размеры в пикселях.

2. Задайте цвета фона и текста — шахматный фон выручает, если заглушка ляжет на неизвестный фон.

3. Скачайте PNG или скопируйте как data URL, чтобы вставить прямо в атрибут src.

Об этом инструменте

Пока верстается макет, настоящих фотографий часто ещё нет, а значки битых изображений мешают оценить отступы. Этот генератор создаёт однотонные изображения-заглушки точного размера в пикселях с выбранными цветами фона и текста и подписывает их размерами или вашим текстом, чтобы всем было понятно, каким должно быть итоговое изображение. Пресеты покрывают типичные задачи — изображение Open Graph 1200 × 630, карточка Twitter 1600 × 900, квадратный пост 1080 × 1080, HD 1920 × 1080, 4:3, баннер 1500 × 500 и аватар 400 × 400, — а можно ввести любые ширину и высоту. Скачайте результат в PNG или скопируйте как data URL и вставьте прямо в атрибут src тега img в прототипе, шаблоне письма или тестовых данных.

Часто задаваемые вопросы

Что такое data URL и зачем её копировать?
Data URL содержит всё изображение, закодированное текстом, и начинается с data:image/png;base64. Её можно вставить в <img src> или CSS-фон без сохранения и размещения файла, что удобно для быстрых прототипов.
Должны ли заглушки совпадать с итоговыми размерами?
Да. Точный итоговый размер и соотношение сторон заранее выявляют сдвиги макета, обрезку и переносы текста, и настоящие изображения потом встают на место без сюрпризов.
Какого размера должно быть изображение Open Graph?
Размер 1200 × 630 пикселей широко рекомендуется для превью ссылок в Facebook, LinkedIn и многих мессенджерах. Держите важный текст подальше от краёв: некоторые платформы обрезают изображение до квадрата.
Зачем выбирать шахматный или нейтральный фон?
Нейтральный серый или шахматный узор ясно показывает, что это заглушка, и помогает понять, как изображение смотрится на незнакомом фоне, — так его реже примут за готовую графику.
Можно ли использовать эти изображения на рабочем сайте?
Они предназначены для макетов и разработки. Заглушки на работающем сайте выглядят незаконченно, а поисковики не находят в них полезного визуального содержания, поэтому перед запуском замените их настоящими изображениями с альтернативным текстом.

Похожие инструменты