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

Генератор изображений заглушек Lorem Picsum — это бесплатный браузерный инструмент, который создает идеальные изображения-заглушки для макетов, вайрфреймов, прототипов и фронтенд-разработки. Укажите любую ширину и высоту до 4000 пикселей, выберите цвета, добавьте свой текст, и превью на базе холста обновится мгновенно — без обращений к серверу и ожидания. Скачивайте в форматах PNG, JPG, WEBP или SVG или используйте готовые к вставке фрагменты HTML / Markdown / React и прямые ссылки на Lorem Picsum, Placehold.co и DummyImage.

Что такое изображение-заглушка и зачем оно мне нужно?

Изображение-заглушка — это временное изображение, используемое на этапе проектирования и разработки веб-сайта или приложения. Оно резервирует место для финального изображения, чтобы дизайнеры и разработчики могли компоновать контент, тестировать адаптивность и просматривать макеты до того, как будут готовы реальные фотографии или графика. Заглушки необходимы для вайрфреймов, прототипов, шаблонов электронных писем и фронтенд-тестирования. Без них макеты могут "разваливаться", CSS-правила могут вести себя некорректно, а заказчики не смогут представить себе законченный дизайн.

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

• Проектирование и макеты — покажите клиентам, где именно и какого размера будет каждое изображение.
• Фронтенд-прототипирование — разрабатывайте адаптивные макеты до получения финальных активов.
• Тестирование CMS — заполняйте тестовые записи и страницы товаров реалистичными изображениями.
• Шаблоны писем — резервируйте места для баннеров и товаров в маркетинговых кампаниях.
• Документация и дизайн-системы — иллюстрируйте соотношения сторон, отступы и точки перелома.
• Тестирование Lazy-load — быстро создавайте большие изображения для проверки стратегий ленивой загрузки.

В чем разница между Lorem Picsum и Placehold.co?

Lorem Picsum (picsum.photos) возвращает случайную реальную фотографию заданных размеров, что отлично подходит для реалистичных макетов. Placehold.co и DummyImage возвращают однотонные прямоугольники с напечатанными в центре размерами, что идеально подходит для вайрфреймов и точного отображения того, где будет располагаться изображение. Этот генератор объединяет URL для обоих стилей в одном месте, а также создает собственные изображения с заливкой, градиентом или шахматным узором, которые можно скачать как файлы.

Как создать набор изображений-заглушек для retina-дисплеев?

Установите базовую ширину и высоту, затем нажмите Генерировать URL и фрагменты кода, чтобы открыть панель результатов, и нажмите Скачать 1x / 2x / 3x. Инструмент создаст три копии одной и той же заглушки в масштабе 1x, 2x и 3x, готовые к использованию в атрибутах srcset для экранов с высоким DPI. Каждый файл скачивается с понятным именем, например [email protected].

Почему превью обновляется без запроса к серверу?

Изображение отрисовывается полностью в вашем браузере с помощью HTML Canvas API. Любое изменение ширины, высоты, цвета или текста перерисовывается мгновенно без сетевого обмена. Это означает, что инструмент работает быстро, доступен оффлайн после загрузки и никогда не отправляет ваш дизайн на сервер. Как только вы будете довольны результатом, тот же холст экспортируется в скачиваемый файл или копируется как base64 data URL.

Какие форматы изображений я могу скачать?

Вы можете скачать сгенерированную заглушку как:

• PNG — без потерь, поддерживает прозрачность, лучше всего для однотонных цветов и четкого текста.
• JPG — меньший размер файла, отлично для фотоподобного контента, где допустимы небольшие артефакты сжатия.
• WEBP — современный формат с лучшим сжатием при равном качестве. Поддерживается всеми современными браузерами.
• SVG — векторный формат, бесконечно масштабируемый, крошечный размер файла для однотонных и градиентных фонов.
• Base64 Data URL — скопируйте изображение как встроенный текст для вставки прямо в HTML или CSS.

Как пользоваться этим инструментом

1. Выберите размер: Введите ширину и высоту в пикселях или нажмите на один из пресетов, таких как Аватар, Баннер, Hero или Twitter Card.
2. Выберите стиль фона: "Однотонный" для плоских цветов, "Градиент" для двухцветных переходов или "Шахматка" для стиля прозрачности.
3. Установите цвета: Используйте палитру, введите hex-коды напрямую или нажмите на быстрый образец палитры.
4. Добавьте свой текст (опционально): Оставьте поле пустым, чтобы автоматически отображались размеры (например, 600 × 400).
5. Следите за живым превью: Холст обновляется при каждом нажатии клавиши — нажимать "Отправить" не нужно.
6. Скачайте или создайте URL: Нажмите Скачать изображение для получения файла или Генерировать URL и фрагменты кода для получения ссылок и кода.

Справочник быстрых размеров

Советы для лучших результатов

• Блокируйте соотношение сторон при изменении размера, чтобы сохранить пропорции — полезно для адаптивных наборов.
• Используйте шахматный узор при проектировании прозрачных наложений, чтобы имитировать отображение прозрачности.
• Выбирайте высококонтрастные цвета (темный текст на светлом фоне или наоборот) для читаемости меток размеров.
• Пишите коротко — длинные надписи уменьшаются автоматически, но лучше всего смотрятся от 4 до 12 символов.
• SVG для идеальной четкости — для дизайнов, которые будут отображаться в разных размерах, SVG остается четким при любом зуме.
• WEBP для продакшена — примерно на 30% меньше, чем JPG при том же качестве, с отличной поддержкой в браузерах.

Могу ли я использовать сгенерированные изображения в коммерческом проекте?

Пользовательские изображения, созданные генератором на холсте этого инструмента (однотонное превью, которое вы скачиваете), на 100% принадлежат вам и могут использоваться где угодно без ограничений. Фотографии Lorem Picsum лицензированы по лицензии Unsplash и бесплатны для коммерческого и личного использования. Placehold.co и DummyImage также бесплатны, но всегда проверяйте актуальные условия сервисов перед публикацией финальных продуктов.

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

Есть ли максимальный размер изображения?

Этот инструмент поддерживает размеры до 4000 × 4000 пикселей на сторону, что охватывает почти все реальные случаи, включая hero-изображения с высоким DPI и 4K-дисплеи. Вся работа ложится на браузер, поэтому на старых устройствах очень большие холсты могут ненадолго замедлить превью.

Можно ли генерировать прозрачные заглушки?

Да — скачивайте в формате PNG или SVG и используйте режим фона "Шахматка" для визуализации прозрачности. Для полностью прозрачного скачивания установите основной и дополнительный цвета фона одинаковыми и выберите PNG.

Будет ли изображение работать в Photoshop, Figma или Sketch?

Безусловно. PNG, JPG, WEBP и SVG — это стандартные форматы изображений, поддерживаемые всеми современными инструментами дизайна. Просто перетащите скачанный файл на холст или используйте data URL напрямую в CSS для встроенных фонов.

Зачем использовать этот инструмент, если можно просто напечатать URL Placehold.co?

Три причины: (1) живое визуальное превью перед созданием URL — вы видите именно то, что получаете; (2) копирование кода для HTML, Markdown, JSX, CSS и BBCode в один клик; (3) скачиваемые файлы для оффлайн-использования или проектов, которые не должны зависеть от сторонних сервисов.

Работает ли он на мобильных устройствах?

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

Можно ли генерировать много размеров за раз?

Кнопка "Набор для Retina" скачивает 1x, 2x и 3x вашего текущего размера одним кликом. Для других наборов просто нажимайте на кнопки пресетов и скачивайте — холст перерисовывается со скоростью 60+ кадров в секунду, поэтому итерации проходят мгновенно.

Связанные инструменты

• Изменение размера изображений — изменение ширины и высоты существующего фото.
• Сжатие изображений — уменьшение размера файла перед публикацией.
• Генератор цветовых схем — выбор палитр для ваших заглушек.
• Генератор CSS градиентов — создание градиентных фонов.

Дополнительные ресурсы

• MDN: элемент img и srcset