Генератор изображений-заполнителей

Создавайте собственные заполнители и фиктивные изображения любого размера с цветами, подписями, градиентами, узорами, границами и более чем 30 предустановками. Экспортируйте PNG, JPG, WebP или SVG, пакетную загрузку ZIP или скопируйте URI данных, <img>, CSS или фрагмент Markdown — бесплатно, без водяных знаков, 100 % в вашем браузере.

Бесплатный продвинутый генератор изображений-заполнителей, который полностью создает пользовательские фиктивные изображения в вашем браузере. Установите любой размер, цвет, заголовок и стиль фона, используйте более 30 предустановок социальных сетей, рекламы и устройств, а затем экспортируйте PNG, JPG, WebP или SVG — или скопируйте URI данных, тег <img>, CSS или фрагмент Markdown. Никаких загрузок, никаких ограничений по скорости, никаких водяных знаков.

Share
Категория
Инструменты для изображений
Включает
Возможности 10
Доступ
Бесплатно · Без регистрации
Конфиденциальность
Запускается в вашем браузере
Генератор изображений-заполнителей

Calibrating Placeholder Studio......

Please wait a moment

Обзор

Генератор изображений-заполнителей — мгновенные пользовательские фиктивные изображения

Генератор изображений-заполнителей — это бесплатный продвинутый онлайн-инструмент для создания пользовательских изображений-заполнителей и фиктивных изображений для макетов, каркасов, прототипов и интерфейсной разработки. Введите любую ширину и высоту, выберите цвета, добавьте метку, выберите стиль фона, затем экспортируйте четкий PNG, JPG, WebP или SVG с неограниченным масштабированием — или скопируйте изображение в виде URI данных, тега <img>, фона CSS или Markdown одним щелчком мыши. Все генерируется локально в вашем браузере, поэтому нет ограничений по скорости, нет неработающих URL-адресов с горячими ссылками и ничего не загружается.

Включено

Функции

01
Любая нестандартная ширина × высота с возможностью блокировки соотношения сторон.
02
Более 30 пресетов: аватары, публикации в социальных сетях, карточки OG, рекламные блоки и устройства IAB.
03
Фон: сплошной, градиент, полосы, сетка, точки, шахматная доска и шум.
04
Пользовательский текст подписи или автоматическая метка размера в пикселях.
05
Семейство шрифтов, вес, размер и цвет с помощью средства проверки контрастности WCAG.
06
Ширина/цвет границы и закругленные углы
07
Экспортируйте PNG, JPG, WebP или масштабируемый SVG с увеличением 1×, 2× или 3×.
08
Скопируйте как URI данных, тег <img>, фон CSS или Markdown.
09
Пакетный режим: визуализируйте сразу несколько размеров и загрузите ZIP-архив.
10
100% клиентская часть — без загрузок, без ограничений по скорости, без водяных знаков
Как использовать

Как использовать Генератор изображений-заполнителей

  1. 01

    Установите размер

    Введите пользовательскую ширину и высоту или выберите набор настроек, например публикацию в Instagram, карточку Open Graph или рекламу в таблице лидеров. Заблокируйте соотношение сторон, чтобы изменить размер пропорционально.

  2. 02

    Стиль это

    Выберите цвет фона, градиент или узор, установите границу и радиус угла, затем настройте текст, шрифт, размер и цвет подписи. Функция проверки контрастности делает этикетку читаемой.

  3. 03

    Предварительный просмотр в прямом эфире

    Заполнитель обновляется мгновенно по мере изменения настроек, показывая точный результат, который вы получите в выбранном вами масштабе экспорта.

  4. 04

    Экспортировать или копировать

    Загрузите PNG, JPG, WebP или SVG в размере 1×–3×, загрузите пакетно набор размеров в виде ZIP или скопируйте URI данных, тег <img>, фон CSS или фрагмент Markdown, чтобы вставить их прямо в свой проект.

Варианты использования

Распространенные случаи использования

  • -Заполняйте макеты, каркасы и прототипы фиктивными изображениями во время разработки.
  • -Зарезервируйте места для изображений в макетах HTML/CSS во время разработки интерфейса.
  • -Создавайте рекламные объявления и социальные карточки большого размера для тестирования, прежде чем настоящее искусство будет готово.
  • -Заполните адаптивную галерею или сетку заполнителями нужных размеров.
  • -Создавайте автономные заполнители URI данных в формате Base64 для демонстраций в заблокированных или изолированных сетях.
  • -Замените ненадежные сервисы URL-адресов-заполнителей, которые ограничивают скорость, снижают скорость или допускают утечку ваших макетов.
Гид

Подробное руководство

Гораздо больше, чем серая коробка

Выйдите за рамки классического серого прямоугольника «600 × 400». Выбирайте однотонные цвета, плавные градиенты, диагональные полосы, сетки, точки, шахматные доски и легкий шум, добавляйте рамку и закругленные углы и независимо управляйте текстом подписи, семейством шрифтов, весом, размером и цветом. Включите метку автоматического изменения размеров, чтобы указать точный размер в пикселях на каждом изображении, или напишите свой собственный текст. Встроенная функция проверки контрастности предупреждает вас, когда ваш текст и фон не читаемы WCAG, поэтому ваши заполнители остаются разборчивыми в любом дизайне.

Пресеты для каждого экрана, рекламы и социальных сетей

Избавьтесь от догадок благодаря более чем 30 готовым размерам: аватары и миниатюры, квадратные и портретные публикации для обложек Instagram, Facebook и X/Twitter, миниатюры YouTube, карточки Open Graph, рекламные блоки IAB (таблица лидеров, средний прямоугольник, небоскреб, рекламный щит), стандартные разрешения устройств и удобные для печати соотношения. Зафиксируйте соотношение сторон при изменении размера или переключитесь в пакетный режим, чтобы одновременно визуализировать весь набор размеров и загрузить их вместе в виде ZIP-файла — идеально подходит для заполнения адаптивной галереи или набора рекламных материалов за считанные секунды.

Создано для разработчиков и дизайнеров

Перетащите сгенерированные заполнители прямо в свою кодовую базу. Скопируйте готовый к вставке тег <img>, правило CSS для фонового изображения, изображение Markdown или URI данных base64, который работает в автономном режиме без внешнего запроса. Экспортируйте SVG для максимально четких векторов при любом масштабе или экспортируйте PNG/JPG/WebP с увеличением 1×, 2× или 3× для дисплеев Retina. Поскольку весь инструмент является клиентским, он работает в заблокированных сетях, за брандмауэрами и в автономном режиме — надежная замена службам-заполнителям, которые отключаются, ограничивают скорость или передают ваши макеты на сторонний сервер.

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

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

Что такое изображение-заполнитель и когда его следует использовать?+

Изображение-заполнитель (или фиктивное) — это замещающее изображение, которое заполняет слот изображения до того, как окончательная иллюстрация будет готова. Дизайнеры и разработчики используют их в макетах, каркасах, прототипах и макетах HTML/CSS, чтобы зарезервировать пространство с точными размерами, чтобы дизайн или страница выглядели завершенными, пока настоящие фотографии еще создаются.

Является ли этот генератор изображений-заполнителей бесплатным и без водяных знаков?+

Да. Каждое созданное вами изображение абсолютно бесплатно, в полном разрешении и без водяных знаков, без регистрации и ограничений на использование. Поскольку изображения отображаются в вашем браузере, а не на сервере, вам не за что платить и нет ограничений по скорости.

Какие форматы изображений и разрешения я могу экспортировать?+

Вы можете экспортировать растровые изображения PNG, JPG и WebP с увеличением 1×, 2× или 3× для дисплеев Retina или в формате SVG, который остается очень четким при любом масштабировании. Вы также можете скопировать результат в виде URI данных base64, тега <img>, правила CSS для фонового изображения или Markdown.

Могу ли я установить индивидуальный размер и цвет?+

Абсолютно. Введите любую ширину и высоту (с возможностью блокировки соотношения сторон), затем выберите цвет фона, градиент или узор, рамку, радиус угла, а также текст подписи, шрифт, размер и цвет. Встроенная функция проверки контрастности предупреждает вас, если текст и фон плохо читаются.

Есть ли у вас предустановки для социальных сетей и рекламы?+

Да — имеется более 30 пресетов, включая аватары и миниатюры, публикации и обложки Instagram, Facebook и X/Twitter, миниатюры YouTube, карточки Open Graph, рекламные блоки IAB (таблица лидеров, средний прямоугольник, небоскреб, рекламный щит) и распространенные разрешения устройств. Выберите один, и размер заполнится автоматически.

Могу ли я создать несколько размеров одновременно?+

Да. Переключитесь в пакетный режим, выберите нужные размеры, и инструмент отобразит их все в вашем текущем стиле, а затем позволит вам загрузить весь набор вместе в виде ZIP-файла — идеально подходит для адаптивных галерей и наборов рекламных креативов.

Как добавить изображение-заполнитель в HTML или CSS?+

Создайте изображение, затем используйте кнопки «Копировать», чтобы получить готовый к вставке тег <img> или правило CSS для фонового изображения. Чтобы получить полностью автономный автономный заполнитель, скопируйте URI данных base64 — он встраивает изображение непосредственно в ваш код без внешнего запроса.

Загружены ли мои данные куда-нибудь?+

Нет. Весь инструмент работает на стороне клиента в вашем браузере с использованием холста HTML и SVG — изображения, текст или настройки никогда не отправляются на сервер. Это делает его быстрым, конфиденциальным и надежным даже в заблокированных или автономных сетях, в отличие от сервисов URL-заполнителей.

Сопутствующие инструменты

Сопутствующие инструменты