FakecreditcardСкачивание или встраивание в код
Выбирайте подходящий формат под конкретную задачу. SVG весит всего несколько сотен байт для простого плейсхолдера и остаётся идеально чётким при любом масштабе. PNG отлично сохраняет резкость текста и сплошных заливок, являясь самым универсальным растровым форматом. WebP поддерживается всеми современными браузерами и обычно весит меньше, чем PNG, даже на простых заливках. JPG нужен для систем, которые требуют исключительно его: он не поддерживает прозрачность и может давать ступенчатые переходы на градиентах. Для растровых форматов используйте масштаб @2x или @3x, чтобы картинка выглядела резкой на Retina-экранах при сохранении исходного CSS-размера; очень большие изображения автоматически уменьшаются примерно до 16 мегапикселей из-за ограничений элемента canvas в Safari и мобильных браузерах.
Опция Скопировать как позволяет получить изображение, встроенное в формате data URI прямо в нужный фрагмент кода: тег <img> с атрибутами ширины и высоты, Markdown для файлов README и документации, свойство CSS background-image с правильным aspect-ratio или готовый компонент <img> для React. Формат SVG кодируется через URL-encoding, а не base64, поэтому код остаётся читаемым и обычно весит не больше обычного base64.
Нужен URL формата /600x400?
Онлайн-сервисы заглушек отдают картинку по ссылке вида /600x400. Это удобно, но ровно до тех пор, пока сторонний сервис не закроется или не поменяет адресацию, сломав изображения во всех ваших макетах; к тому же это лишний внешний сетевой запрос при каждой загрузке страницы. Встроенный data URI решает проблему раз и навсегда: скопируйте его один раз, и он продолжит работать офлайн, в прототипах, историях Storybook и фикстурах для тестов. Есть два исключения: многие почтовые клиенты (включая Gmail) блокируют встроенные data-URI изображения (для рассылок лучше скачивать обычный PNG), а слишком большие файлы раздувают HTML-код, поэтому крупную графику стоит сохранять отдельными файлами.
Три сценария использования плейсхолдеров
- Заглушка при вёрстке и дизайне: блок нужного размера, временно заменяющий будущую фотографию — именно такие изображения создаёт этот инструмент.
- Резервное изображение (fallback): картинка по умолчанию, отображаемая при отсутствии контента (товар без фото, профиль без аватарки). Делайте её нейтральной, сохраняйте пропорции оригинала и прописывайте внятный alt-текст.
- Плейсхолдер загрузки: миниатюрное размытое превью или цветной блок, показываемый до загрузки основного изображения (например, свойство
blurDataURLв Next.js). Компактный SVG с однотонным фоном или градиентом отлично справляется с этой рольей.
Популярные размеры изображений
| Назначение | Размер (px) | Пропорции |
|---|---|---|
| Open Graph / превью ссылок (VK, Telegram, Facebook) | 1200 × 630 | ≈ 1.91:1 |
| Карточка с большим фото в X (Twitter) | 1200 × 600 | 2:1 |
| Квадратный пост в Instagram | 1080 × 1080 | 1:1 |
| Вертикальный пост в Instagram | 1080 × 1350 | 4:5 |
| Stories, Reels, Shorts, TikTok | 1080 × 1920 | 9:16 |
| Обложка YouTube, HD-видео | 1280 × 720 | 16:9 |
| Full HD баннер, слайдер или фон | 1920 × 1080 | 16:9 |
| Изображение для карточки или статьи блога | 600 × 400 / 800 × 600 | 3:2 / 4:3 |
| Фото товара в интернет-магазине | 1000 × 1000 | 1:1 |
| Баннер средний прямоугольник (MPU) | 300 × 250 | 6:5 |
| Горизонтальный баннер (Leaderboard) | 728 × 90 | ≈ 8:1 |
| Широкий небоскрёб (Skyscraper) | 160 × 600 | 4:15 |
| Мобильный баннер | 320 × 50 | 32:5 |
| Аватар / круглое фото профиля | 150 × 150 (круг) | 1:1 |
Социальные сети и платформы периодически меняют рекомендуемые габариты, поэтому сверяйтесь с официальными спецификациями площадок перед финализацией материалов.
Как правильно внедрять картинки-заглушки
- Всегда прописывайте атрибуты width и height (или CSS-свойство
aspect-ratio) прямо в теге. Так браузер сразу выделит место на странице до загрузки изображения, предотвратив прыжки контента — сдвиг макета, за который отвечает метрика CLS в Core Web Vitals. - Сохраняйте итоговое соотношение сторон, чтобы заранее отловить проблемы кадрирования при адаптивной вёрстке и использовании правила
object-fit: cover. - Оставляйте размеры прямо на тексте заглушки во время согласования дизайна — так команда сразу видит, какой графики пока не хватает.
- Для чисто декоративных заглушек задавайте пустой атрибут
alt=""и обязательно заменяйте все фиктивные картинки до релиза проекта: плейсхолдер в продакшене считается ошибкой.
Частые вопросы
Что такое картинка-заглушка (placeholder)?
Это временное изображение, замещающее финальную графику в процессе разработки. Обычно это прямоугольник нужного цвета и размера с подписью габаритов, который помогает верстать сайты, собирать прототипы и шаблоны до получения контента. Также этим словом называют дефолтные изображения (fallback) и микро-превью, отображаемые во время фоновой загрузки.
Какого размера должна быть картинка-заглушка?
Точно такого же размера, как и финальное изображение, или с аналогичным соотношением сторон: например, 1200 × 630 для превью ссылок, 1080 × 1080 для квадратных постов или 1920 × 1080 для полноэкранных блоков. Совпадение пропорций позволяет увидеть дефекты верстки и обрезки до того, как будут готовы настоящие фотографии.
Можно ли использовать сгенерированные картинки бесплатно?
Да. Все файлы генерируются локально в вашем браузере по заданным параметрам. На них не распространяются лицензионные ограничения: используйте их в коммерческих сайтах, приложениях, темах оформления и клиентских проектах без указания авторства.
Есть ли прямая ссылка на изображение, например /600x400?
Нет, и это сделано намеренно: генерация происходит на стороне браузера без обращения к стороннему серверу, поэтому прямых ссылок нет. Вместо этого скопируйте картинку в виде тега <img>, кода Markdown или CSS — готовый data URI автономен и продолжит открываться даже без подключения к интернету.
Можно ли сделать прозрачную или круглую заглушку?
Да. Отметьте пункт Прозрачный фон для форматов PNG, WebP или SVG (у формата JPG прозрачности нет, поэтому он получит белый фон). Вы также можете выбрать форму круга или скруглённого прямоугольника и настроить обводку для генерации аватарок и карточек.
Какой максимальный размер можно создать?
До 4000 × 4000 пикселей в масштабе @1x. Кодирование очень больших растровых файлов в форматах PNG и WebP может занять секунду-другую, тогда как формат SVG генерируется мгновенно при любых габаритах.