Генератор изображений-заглушек
Создавайте заглушки изображений любого размера в виде SVG, PNG или готового к вставке data URI.
Генератор изображений-заглушек полностью работает в вашем браузере: SVG создаётся и растрируется на устройстве, ничего не отправляется.
Открыть генератор Open Graph
Об инструменте Генератор изображений-заглушек
Сервисы изображений-заглушек добавляют сетевой запрос прямо в середину вёрстки, которую вы ещё проектируете, а страница, полная таких изображений, становится медленной, бесполезной офлайн и зависимой от того, работает ли сторонний сервис. Создание того же серого прямоугольника локально полностью убирает эту зависимость: результат — SVG, который можно сохранить, растрировать в PNG или вставить как data URI без единого запроса. Размеры охватывают то, что реально используется — карточки для соцсетей, рекламные форматы, аватары, баннеры, — а подпись по умолчанию показывает размеры, что и нужно при отладке сетки.
Возможности
- Любая ширина и высота, готовые размеры для соцсетей, рекламы и общего назначения
- Свои цвета фона и текста с читаемым значением по умолчанию
- Подпись показывает размеры или произвольный текст
- Скругление углов и диагональный крест из каркасных макетов
- Скачивание как SVG или растрирование в PNG в полном разрешении
- Data URI, который работает офлайн и не требует запроса
Как использовать Генератор изображений-заглушек
- Введите ширину и высоту или выберите готовый размер
- Выберите цвета и подпись или оставьте размеры по умолчанию
- Скопируйте data URI или скачайте SVG либо PNG
- Вставьте фрагмент HTML, CSS или JSX в свою вёрстку
Пример
Ввод
1200 × 630 · #e5e7eb background
Результат
<img src="data:image/svg+xml,%3Csvg…" width="1200" height="630" alt="" />
Заглушка карточки Open Graph в виде data URI: без запроса, без сбоев, одинаково выглядит офлайн.
Частые ошибки и устранение неполадок
- Data URI ломает таблицу стилей. — Заключите его в двойные кавычки внутри url() — именно так сделан фрагмент CSS здесь.
- PNG выглядит размытым на экране Retina. — Создайте изображение с удвоенным размером отображения — оно растрируется точно по указанным пикселям.
Часто задаваемые вопросы
- Как создать заглушку изображения нужного размера?
- Введите ширину и высоту выше — изображение создаётся сразу же. Скачайте его как SVG или PNG или скопируйте data URI.
- Зачем использовать data URI вместо сервиса заглушек?
- Он убирает по одному запросу на изображение, работает офлайн и не ломается, если внешний сервис падает или ограничивает частоту запросов.
- SVG или PNG для заглушки?
- SVG для экрана: несколько сотен байт и чёткость при любом размере. PNG — когда какой-то инструмент требует именно растровое изображение.
- Какого размера должно быть изображение Open Graph?
- 1200 на 630 пикселей — это и есть готовый размер здесь: под него обрезают Facebook, LinkedIn и большинство сервисов предпросмотра.
Связанные инструменты
Все инструменты ArrayKit