Быстрые и простые изображения-заглушки
Создавайте качественные заглушки для ваших сайтов и проектов.
Генератор изображений-заглушек
Предпросмотр
Лучший генератор динамических изображений-заглушек
Изображения-заглушки - это временные, универсальные визуальные элементы, используемые для замены графики или текста на веб-странице в процессе проектирования. Они крайне важны для дизайнеров и разработчиков, которые хотят представить концепцию дизайна клиентам до завершения макета и контента.
Эти изображения легко узнаваемы и просты в использовании. Дизайнеры могут применять их в различных проектах, таких как разработка бренда, маркетинговые кампании, целевые страницы, корпоративные брошюры и наборы фирменного стиля. Изображения-заглушки помогают визуализировать макет, когда окончательные изображения еще не доступны.
Использование инструмента вроде plchldr.co может упростить этот процесс. Этот инструмент генерирует изображения-заглушки через пользовательские URL, позволяя вам выбирать размер, цвета и текст. Он предлагает множество опций, включая ширину, высоту, соотношения сторон, цвета фона и переднего плана, а также распространенные предустановленные размеры экранов и рекламных баннеров. Используя изображения-заглушки, дизайнеры экономят время и могут сосредоточиться на улучшении своих проектов вместо ручного создания временных визуальных элементов.
Что такое генератор изображений-заглушек?
Генератор изображений-заглушек - это онлайн-инструмент, который создает временные, универсальные изображения для использования в дизайн-проектах. Эти изображения служат заглушками в макете, где окончательный контент еще не доступен. Дизайнеры и разработчики используют эти генераторы для визуализации и тестирования макета, дизайна и общего вида веб-страницы или печатного проекта без необходимости в окончательных изображениях. Генераторы изображений-заглушек позволяют настраивать размер изображения, цвета, текст, а иногда даже категории и эффекты, что делает их универсальным инструментом для различных дизайнерских нужд. Они помогают оптимизировать процесс проектирования, предоставляя мгновенные визуальные элементы, которые позже можно легко заменить окончательными изображениями.
Почему стоит выбрать PLCHLDR.CO?
Молниеносно быстро
Мгновенное создание изображений с умным кэшированием. Последующие запросы обрабатываются за миллисекунды.
100% бесплатно
Без регистрации, без API-ключей, без ограничений по количеству запросов. Используйте свободно для личных и коммерческих проектов.
Полная настройка
Выбирайте любой размер, цвет, текст и шрифт. Поддержка форматов PNG, WebP и SVG.
SEO-дружественные URL
Чистые, читаемые URL, которые легко запомнить и поделиться. Не требуются строки запросов.
9 Google шрифтов
Красивая типографика с Roboto, Open Sans, Lato, Montserrat, Poppins и другими.
Нет проблем с CORS
Используйте изображения где угодно без ограничений междоменного доступа. Идеально для всех веб-проектов.
Примеры интеграции
Скопируйте и вставьте эти фрагменты кода в свой проект
HTML тег изображения
<img src="https://plchldr.co/i/600x400"
alt="Placeholder">CSS фон
.hero {
background-image: url('https://plchldr.co/i/1920x1080');
background-size: cover;
}React компонент
<img
src="https://plchldr.co/i/400x300/667eea/fff"
alt="Placeholder"
loading="lazy"
/>Markdown синтаксис
Vue шаблон
<img
:src="`https://plchldr.co/i/${width}x${height}`"
alt="Динамическая заглушка"
/>Next.js изображение
<Image
src="https://plchldr.co/i/1200x630"
width={1200}
height={630}
alt="OG Image"
/>Как использовать изображения-заглушки?
plchldr.co - это инструмент для рендеринга изображений на стороне сервера, который позволяет веб-разработчикам и дизайнерам динамически создавать изображения для использования в качестве заглушек в проекте. Единственный обязательный параметр - это число для ширины изображения. Конечно, у вас также есть возможность указать дополнительные параметры, такие как высота, цвета, текст и многое другое!
Просто укажите размер изображения после нашего URL, и вы получите изображение-заглушку. Таким образом, URL изображения должен выглядеть так: https://plchldr.co/i/336x280
Вы можете использовать изображения в вашем HTML или CSS, например:
<a href="https://plchldr.co/"><img src="https://plchldr.co/i/336x280" alt="plchldr.co"></a>
Укажите ширину и высоту после /i/ в формате WIDTHxHEIGHT:
https://plchldr.co/i/800x600
Максимальные размеры: 4000x4000 пикселей
Добавьте свой текст в конце URL:
https://plchldr.co/i/600x400/667eea/ffffff/png/default/Hello+World
Кодируйте пробелы как + или %20. Максимальная длина текста: 100 символов
Добавьте hex-коды цветов (без #) после размера:
https://plchldr.co/i/600x400/667eea/ffffff
Формат: /i/{width}x{height}/{bg-color}/{text-color}
Используйте 3 или 6-символьные hex-цвета (например, fff или ffffff)
Мы поддерживаем форматы PNG (по умолчанию), WebP и SVG. Добавьте параметр формата после цветов:
https://plchldr.co/i/600x400/667eea/ffffff/webp
PNG: Лучшая совместимость, больший размер файла
WebP: Современный формат, на 25-35% меньше, быстрая загрузка
SVG: Векторный формат, идеальное масштабирование, наименьший размер
Да! Мы предлагаем 9 красивых Google шрифтов. Добавьте название шрифта после формата:
https://plchldr.co/i/600x400/667eea/ffffff/png/roboto
Доступные шрифты: roboto, opensans, lato, montserrat, poppins, raleway, inter, playfair, nunito
Если шрифт не указан, используется системный шрифт по умолчанию.
Вы можете использовать изображения-заглушки как фоновые изображения в CSS:
background-image: url('https://plchldr.co/i/1920x1080/667eea/ffffff');
Или с сокращенной записью background:
background: url('https://plchldr.co/i/1920x1080') center/cover no-repeat;
Минимум: 1x1 пиксель
Максимум: 4000x4000 пикселей
Для лучшей производительности мы рекомендуем сохранять изображения до 2000x2000 пикселей. Большие изображения могут дольше генерироваться и загружаться.
Да, plchldr.co полностью бесплатный для использования в личных и коммерческих проектах!
Нет ограничений по количеству запросов для обычного использования. Изображения кэшируются для оптимальной производительности, поэтому последующие запросы на то же изображение обрабатываются мгновенно.
Пожалуйста, не злоупотребляйте сервисом чрезмерными автоматизированными запросами.
Примеры заглушек
/i/245x155/EC6357/ffffff
/i/245x155/EC6357/ffffff
/i/245x155/EC6357/ffffff
/i/245x155/EC6357/ffffff
/i/336x180/7BC955/ffffff
/i/336x180/7BC955/ffffff
/i/336x180/7BC955/ffffff
/i/520x190/5597C9/ffffff
/i/520x190/5597C9/ffffff
/i/1070x200/C98EC2/ffffff