Перейти к содержимому
FitMyImage
Другие инструменты
Русский

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

Вставьте HTML и CSS и получите PNG, JPG, WebP или SVG с плотностью пикселей 1×, 2× или 3×. Пригодится для карточек соцсетей, фрагментов кода, баннеров и шапок писем.

Плотность пикселей
Фон

Разметка отрисовывается на этом устройстве. Скрипты не выполняются, а изображения и шрифты с других сайтов не загружаются: используйте data: URL и системные шрифты. Чтобы снять живую веб-страницу, воспользуйтесь скриншотом самого браузера (в Chrome: DevTools, затем Capture full size screenshot).

Как это работает

  1. Вставьте HTML, а CSS — в теге style.
  2. Задайте ширину в CSS-пикселях; оставьте высоту пустой, чтобы она подстроилась под содержимое.
  3. Выберите плотность пикселей (2× для чёткого текста на телефонах) и фон.
  4. Нажмите «Создать изображение», проверьте превью и скачайте.

Что можно и что нельзя отрисовать

  • Любые элементы HTML и CSS, которые поддерживает браузер, включая flexbox, grid, градиенты, рамки и системные шрифты.
  • Изображения — только как data: URL. Картинки и веб-шрифты с других сайтов не запрашиваются, потому что браузер не позволяет странице читать пиксели с других сайтов.
  • Скрипты не выполняются: разметка верстается в песочнице с отключёнными скриптами.

Снимок веб-страницы по адресу

Чтобы превратить URL в изображение, нужен сервер, который откроет страницу за вас, а значит, ему придётся отправить ваш адрес, и он увидит, что вы снимаете. У этого сайта нет сервера. Это умеет ваш браузер: в Chrome или Edge откройте DevTools (F12), нажмите Ctrl+Shift+P и выполните «Capture full size screenshot»; в Firefox есть «Take Screenshot» в контекстном меню.

Вопросы

Почему в результате нет моих изображений?

Изображения, подключённые с других сайтов, пропускаются, потому что браузер не позволил бы странице прочитать готовую картинку. Преобразуйте их в data: URL и вставьте их в src.

Какой формат выбрать?

PNG для чёткого текста и однотонных цветов, JPG для фото на сплошном фоне, WebP для самого лёгкого веб-файла и SVG, чтобы сохранить векторную разметку, которая масштабируется без размытия.

Что делает плотность пикселей?

Она умножает пиксели: макет шириной 1200 px при 2× становится изображением в 2400 px, поэтому текст остаётся чётким на экранах высокого разрешения.

Работает ли это в Safari?

Safari отрисовывает SVG, но некоторые версии не позволяют превратить его в пиксели. Если так случится, страница сообщит об этом; выберите SVG или используйте Chrome, Edge или Firefox для PNG и JPG.

Похожие инструменты