Генератор тестовых изображений

Как создать картинку нужного размера

Карточки изображений разных пропорций рядом с линейкой

Тестовое изображение помогает проверить место под фотографию, обложку или баннер до появления настоящего контента. Укажите ширину и высоту в пикселях, выберите фон и скачайте PNG. Внутри картинки будет подпись с размерами, например «800 × 600». Её можно заменить своим текстом: «Обложка», «Товар 1» или названием нужного блока.

PNG представляет собой настоящий графический файл, который можно открыть в просмотрщике, отправить в форму загрузки или вставить в макет. Это удобная заглушка для проверки размеров и поведения интерфейса. Она не заменяет фотографию при оценке качества сжатия: однотонные области с короткой надписью устроены гораздо проще, чем волосы, листья и мелкие детали снимка.

Пиксели, пропорции и размер файла

Пиксель можно представить как одну цветную клетку изображения. Ширина показывает количество клеток в строке, высота определяет число строк. У картинки 800 × 600 получается 480 000 пикселей. Поменяйте размеры местами, и общее количество сохранится, но горизонтальное изображение станет вертикальным. Для карточки товара эта разница может решить, будет ли снимок обрезан.

Количество пикселей = ширина × высота

Соотношение сторон описывает форму прямоугольника. Размеры 800 × 600 и 1200 × 900 имеют одинаковые пропорции 4:3. Второе изображение содержит в 2,25 раза больше пикселей, хотя каждая сторона увеличена всего в полтора раза. Когда ширину и высоту удваивают одновременно, количество пикселей вырастает в четыре раза. Это важно при подготовке ресурсов для экранов с высокой плотностью точек.

Пиксели и байты отвечают на разные вопросы. Первые описывают сетку изображения, вторые показывают объём сохранённого файла. PNG сжимает повторяющиеся данные без потерь, поэтому сплошной фон обычно занимает мало места. Размер файла также меняется от подписи, сглаживания букв и реализации кодирования в браузере. Точное число байтов появится после создания PNG. Заранее вывести его из одной ширины и высоты нельзя.

Если вам нужен файл строго на 1 МБ для проверки ограничения загрузки, используйте генератор тестовых файлов. У картинки заданное количество пикселей не означает заданный вес. Например, две фотографии одинакового разрешения могут заметно различаться по размеру файла, а небольшая однотонная заглушка не проверит загрузку тяжёлого снимка.

Какие изображения проверить в макете

Пример 1. Горизонтальная карточка. Задайте 800 × 600 и оставьте автоматическую подпись. Получится формат 4:3 с 480 000 пикселей. Загрузите PNG в карточку товара и проверьте углы: если подпись или края пропадают, контейнер обрезает изображение. Такое поведение может быть правильным, но его стоит заметить до загрузки реальных фотографий.

Пример 2. Широкая обложка. Размер 1920 × 1080 даёт пропорции 16:9 и 2 073 600 пикселей. Вставьте заглушку в блок шириной 960 пикселей. При сохранении пропорций его высота будет 540 пикселей. Если макет показывает другую высоту, проверьте заданное соотношение сторон, ограничения контейнера и способ обрезки картинки.

Пример 3. Квадратный аватар. Для изображения 256 × 256 задайте яркий фон и короткую подпись «Фото». В файле будет 65 536 пикселей. Если сайт выводит аватар кругом, квадратные углы исчезнут уже при показе. Сам PNG останется квадратным. Так можно отделить изменение исходного файла от оформления, которое применяет страница.

Пример 4. Вертикальная карточка. Создайте 600 × 900 с подписью «Вертикаль». Пропорции составят 2:3, количество пикселей будет 540 000. Сравните её с горизонтальным изображением в одном списке. Проверьте, остаются ли кнопки карточек на одной высоте и не растягивается ли весь ряд вслед за единственным высоким изображением.

Пример 5. Ресурс для плотного экрана. В макете картинка занимает 400 × 300 CSS-пикселей. Файл 800 × 600 имеет вдвое больше точек по каждой стороне и может использоваться для отображения с плотностью 2×. Предпросмотр на этой странице подстраивается под свободное место, но скачанный файл сохраняет именно 800 × 600. Показ на экране и размеры самого ресурса проверяйте отдельно.

Пример 6. Граница допустимой площади. Изображение 4096 × 2048 содержит ровно 8 388 608 пикселей и проходит ограничение инструмента. При высоте 2049 получится 8 392 704 пикселя, поэтому создание будет недоступно. Такая пара помогает проверить граничный случай: одна сторона ещё укладывается в разрешённый диапазон, а суммарная площадь уже превышена.

Как выбрать фон и подпись

Цвет можно выбрать на палитре или записать HEX-кодом. Например, #FFFFFF означает белый, #000000 означает чёрный, а #E8EDF2 даёт светлый серо-голубой фон. Допускается сокращённая запись из трёх знаков: #ABC разворачивается в #AABBCC. Для перевода между форматами пригодится конвертер цветов HEX, RGB и HSL.

Подпись автоматически становится чёрной или белой в зависимости от фона. Это помогает различать её на превью, но не превращает файл в таблицу для калибровки монитора. На очень узкой картинке буквы физически не поместятся в читаемом размере: у полоски 1 × 4096 есть всего один пиксель по ширине. Такой файл полезен для проверки крайних пропорций, а не для чтения текста.

Для своей подписи доступно до 100 символов. Длинная строка уменьшается по ширине, чтобы остаться внутри изображения. Короткие слова читаются лучше, особенно на маленьком превью. Пустое поле возвращает автоматическую запись размеров. Символы HTML выводятся как текст и не становятся ссылками, кнопками или разметкой внутри PNG.

Ограничения генератора

Каждая сторона должна быть целым числом от 1 до 4096, а площадь не должна превышать 8 388 608 пикселей. Эти пределы ограничивают расход памяти: только четыре цветовых байта на каждый пиксель такой площади занимают 32 МиБ до сжатия. Дополнительно браузеру нужна память на создание файла и отображение страницы. На устройстве с небольшим запасом памяти может потребоваться меньший размер.

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

Вопросы о тестовых изображениях

При проверке загрузки важно разделять свойства самого PNG и преобразования, которые делает сайт после получения файла. Особенно легко перепутать разрешение, объём и способ отображения.

Можно ли получить прозрачный фон?

В этом генераторе фон непрозрачный. Хотя формат PNG поддерживает прозрачность, созданная здесь картинка полностью залита выбранным цветом. Для проверки альфа-канала нужен отдельный файл с прозрачными областями, например подготовленный в графическом редакторе.

Почему заглушка весит меньше фотографии того же размера?

Однотонные области хорошо сжимаются, а фотография содержит множество разных деталей. Сравнивать только число пикселей недостаточно. Проверяйте реальный объём загруженного файла, если форма ограничивает мегабайты, а не разрешение изображения.

Как сделать изображение для блока 16:9?

Выберите размеры с нужным отношением, например 1280 × 720 или 1920 × 1080. Если при показе картинка выглядит сжатой, причина может быть в фиксированной высоте блока. Если края исчезают, вероятно, применяется обрезка с заполнением контейнера.

Можно ли сменить расширение PNG на JPG?

Переименование не меняет содержимое. Файл останется PNG, даже если его имя заканчивается на .jpg. Для проверки JPEG нужно настоящее перекодирование в этот формат, иначе сервер или просмотрщик может распознать несоответствие и отказать в загрузке.

Почему скачанная картинка больше предпросмотра?

Предпросмотр уменьшен, чтобы помещаться в форме. Это меняет только размер показа. Посмотрите свойства скачанного файла: ширина и высота должны совпадать с введёнными числами, независимо от ширины окна браузера.

Подходит ли заглушка для проверки обрезки фотографий?

Она помогает увидеть геометрию контейнера и изменение пропорций. Для окончательной проверки возьмите также фотографию с лицом или важным объектом у края: центрированная надпись не покажет все случаи потери значимых деталей при кадрировании.

Почему PNG после загрузки на сайт изменился?

Сайт может уменьшать изображения, перекодировать их или создавать отдельные миниатюры. Сравните исходный файл с загруженной версией по расширению, разрешению и размеру в байтах. Изменение превью само по себе ещё не доказывает, что сервер переписал оригинал.

Есть что добавить?

Напишите своё мнение, комментарий или предложение.