Генератор изображений-заглушек
Создайте простую картинку-заглушку точно нужного размера с написанным на ней размером для макетов, вёрстки и тестов.
Работает полностью в браузере
Оставьте пустым, чтобы показывался размер.
Ширина и высота от 1 до 8000 пикселей, всего до 100 мегапикселей. Текст в одну строку, размер подбирается по ширине.
Как создать изображение-заглушку
- Введите ширину и высоту или нажмите готовый размер, например 1200 × 630 для карточки соцсети или 300 × 250 для рекламы.
- Выберите цвета фона и текста. Оставьте текст пустым, чтобы показывался размер, или напишите свою подпись.
- Выберите PNG, JPEG, WebP или SVG и нажмите Скачать либо скопируйте изображение как data URI.
Как выбрать размер заглушки
Заглушка заменяет настоящую картинку, пока вы верстаете страницу, поэтому главное, чтобы у неё была правильная форма. Вёрстка ломается из-за соотношения сторон чаще, чем из-за разрешения: главное изображение 16:9 ведёт себя иначе, чем квадратный аватар, даже если оба небольшие. Если написать размер на картинке, любой, кто смотрит на макет, увидит, какому месту какие размеры нужны.
Готовые размеры охватывают то, что встречается постоянно: 1200 × 630 — форма, которую большинство соцсетей используют для предпросмотра ссылок, 1080 × 1080 — квадратный пост, 1920 × 1080 и 1280 × 720 — распространённые кадры видео, 300 × 250 и 728 × 90 — два стандартных рекламных места, а 150 × 150 — типичный аватар.
Для настоящей работы помните, что заглушка — это плоский цвет. PNG и SVG хранят его почти бесплатно, а JPEG в большом размере добавляет размытие вокруг текста. Если вставляете картинку в код как data URI, держите её маленькой: каждый байт изображения повторяется в вашей странице.
Советы
- Нужна настоящая картинка такого размера? Инструменты Изменить размер изображения и Обрезать изображение приведут фото к точному размеру.
- Чтобы встроить готовое изображение как текст, используйте Изображение в Base64.
- Подберите подходящие цвета в инструменте Конвертер цветов и проверка контрастности.
Вопросы и ответы
Покидает ли что-нибудь моё устройство?
Нет. Ничего из введённого вами никуда не отправляется. Картинку рисует ваш браузер, а файл для скачивания создаётся на вашем устройстве.
Какой формат выбрать?
SVG занимает несколько сотен байт и остаётся чётким в любом размере, поэтому подходит для веб-вёрстки. PNG точен и без потерь для плоских цветов. JPEG и WebP дают файлы меньше для больших размеров, а JPEG слегка размывает края текста. Некоторые места, где принимают загрузки, например поля во многих CMS, принимают только растровые изображения, поэтому для них берите PNG.
Как выбирается размер текста?
Автоматически. Текст делается настолько крупным, насколько он помещается в одну строку примерно в 80 процентах ширины и 40 процентах высоты, поэтому и широкий баннер вроде 728 × 90, и высокий вроде 160 × 600 выглядят правильно.
Для чего нужен data URI?
Data URI — это изображение, записанное текстом, поэтому его можно вставить прямо в тег img в HTML или в фон CSS без отдельного файла. Он хорошо подходит для небольших изображений. Крупный PNG превращается в длинную строку, раздувающую страницу, поэтому инструмент предупреждает, если результат больше разумного, и отказывается копировать что-либо крупнее 1 МБ.
Нужны ли для SVG особые шрифты?
Нет. Он использует системный шрифт без засечек, поэтому на разных устройствах выглядит немного по-разному, но всегда помещается, а текст экранируется, так что символы вроде & и < безопасны.
Каковы ограничения по размеру?
Каждая сторона может быть от 1 до 8000 пикселей, а общий размер — до 100 мегапикселей. Более крупные изображения рисуются дольше и могут не открываться в некоторых программах.