HTML в картинку: конвертер HTML в PNG и JPG

Вставьте HTML вместе с CSS, выберите размер и скачайте PNG или JPG. Страница рендерится в вашем браузере, так что закрытые дизайны никуда не уходят.

Результат
Здесь появится ваша картинка.

Как конвертировать HTML в картинку

  1. Вставьте HTML и CSS в редактор. Подойдёт и полный документ, и просто фрагмент с блоком <style>.
  2. Выберите размер. Open Graph (1200 x 630) используют Facebook, LinkedIn, X и Slack для превью ссылок; «Вся страница» снимает всю высоту при ширине 1280 пикселей.
  3. Выберите PNG для текста и однотонных цветов, JPG для фотографий, затем нажмите «Сделать картинку» и «Скачать».

HTML верстается ровно на выбранную ширину, поэтому media queries ведут себя так же, как в окне такого размера. При фиксированной высоте всё, что ниже края, обрезается.

Примеры

  • Карточки для блога в соцсетях. В примере выше карточка 1200 x 630 на чистом CSS. Поменяйте заголовок, сконвертируйте и загрузите PNG как og:image статьи.
  • Картинка письма или чека. Вставьте HTML транзакционного письма и выберите «Вся страница», чтобы получить один длинный PNG для документации или тикета в поддержку.
  • Компонент на Tailwind для слайда. Подключите скрипт Tailwind CDN, выберите «HD-слайд» (1280 x 720) и масштаб 2x, а потом перетащите PNG в презентацию.

Вопросы о конвертере HTML в картинку

Мой HTML отправляется на сервер?

Нет. HTML рендерится в изолированном фрейме внутри этой вкладки и там же превращается в картинку библиотекой с открытым кодом html-to-image. На сервер ничего не загружается.

Почему в PNG нет моего веб-шрифта или картинки?

Рендереру нужно скачать каждый шрифт и каждую картинку, чтобы встроить их. Файлы, отданные без заголовков CORS, из изолированной страницы прочитать нельзя, поэтому они пропускаются. Google Fonts и хостинги картинок с CORS работают (мы проверили Google Fonts, Tailwind CDN и картинки с placehold.co); картинки с сайтов, которые запрещают кросс-доменное чтение, нет.

Можно использовать Tailwind CSS?

Да. Добавьте в HTML <script src="https://cdn.tailwindcss.com"></script>. Перед снимком рендерер ждёт, пока страница успокоится, так что классы Tailwind успевают примениться.

Что делает масштаб 2x?

Рендерит вдвое больше пикселей по каждой стороне (карточка 1200 x 630 становится 2400 x 1260), чтобы текст оставался чётким на экранах с высокой плотностью пикселей. Вёрстка при этом не меняется.

Есть ограничение по размеру?

Каждая сторона после масштабирования ограничена 4096 пикселями, потому что холсты большего размера не работают в нескольких мобильных браузерах.