Image Splitter
Режим
Формат файла
Ширина
Масштаб
Прозрачный
Шаблоны
Можно вставить адрес изображения, например: <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1600&q=80" />
Просмотр

HTML в изображение

Сохраните HTML и CSS в виде изображения

Порядок работы

1

Подготовка

Введите текст или откройте редактор HTML либо Markdown.

2

Настройка и результат

Настройте оформление, проверьте предпросмотр и сохраните изображение.

Примеры обработки

HTML в изображение · Пример 1

Файлы обработаны этим инструментом или тем же программным кодом. Сравните исходники, параметры и результаты, доступные для скачивания.

Пример 1
PNG1000 × 640 px

Исходник2

<section><small>01 / 03</small><h1>2026</h1><p>09 / 22</p></section>
*{box-sizing:border-box} body{margin:0} section{padding:56px;background:#153d36;color:#f7e3b6;min-height:320px;font-family:system-ui;border-radius:20px} small{letter-spacing:4px;font-size:16px} h1{font-size:72px;line-height:1.1;margin:30px 0} p{font-size:22px}
Исходные файлы (2)

РезультатPNG

HTML в изображение — Пример 1 — Результат
Скачать 1PNG
Примеры обработки

HTML в изображение · Другие примеры

Файлы обработаны этим инструментом или тем же программным кодом. Сравните исходники, параметры и результаты, доступные для скачивания.

Пример 2
PNG1000 × 640 px

Исходник2

<section><small>02 / 03</small><h1>12:30</h1><p>09 / 22 · 2026</p></section>
*{box-sizing:border-box} body{margin:0} section{padding:56px;background:#f5e6d8;color:#673f2f;min-height:320px;font-family:system-ui;border-radius:20px} small{letter-spacing:4px;font-size:16px} h1{font-size:72px;line-height:1.1;margin:30px 0} p{font-size:22px}
Исходные файлы (2)

РезультатPNG

HTML в изображение — Пример 2 — Результат
Скачать 1PNG
Пример 3
PNG1000 × 640 px

Исходник2

<section><small>03 / 03</small><h1>01 → 02</h1><p>12 + 24 = 36</p></section>
*{box-sizing:border-box} body{margin:0} section{padding:56px;background:#e4eef4;color:#214762;min-height:320px;font-family:system-ui;border-radius:20px} small{letter-spacing:4px;font-size:16px} h1{font-size:72px;line-height:1.1;margin:30px 0} p{font-size:22px}
Исходные файлы (2)

РезультатPNG

HTML в изображение — Пример 3 — Результат
Скачать 1PNG

Вопросы и ответы

Нет. Инструмент оформляет введённый текст, HTML или Markdown как изображение. Он не рисует сцену по запросу: результат определяется вашим содержимым и настройками оформления.

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

Фото в PDF

Соберите несколько фотографий в один PDF. Перетащите изображения, чтобы задать порядок страниц, и выберите поля.

Открыть

Сжать изображение

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

Открыть

Изменить размер

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

Открыть