Конвертер HTML в PNG

Q: Можно ли сделать PNG с прозрачным фоном вместо белого?

Да. Включите **Прозрачный фон**. Он виден только там, где сама страница не задаёт цвет фона, поэтому сайт с белым цветом body всё равно получится белым. Лучше всего это работает для отдельного компонента или значка, сделанного как самостоятельный HTML-файл.

Q: Как сделать изображение только верхней части длинной страницы?

Переключите **Изображения** на режим «одно на страницу» и выберите в **Страницы** значение «Первая страница». Вы получите первый фрагмент размером со страницу, а не всю длину. Чтобы потом обрезать его по точной рамке, воспользуйтесь инструментом [обрезки изображения](/crop-image).

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

или перетащите сюда файлы DOC, DOCX, DOCM … ·

Макс. 95 MB на файл· До 20 файлов· Удаляются через 30 минут

Вывод

Преобразовать в

Разрешение

Изображения

Файлы обрабатываются на наших серверах и удаляются через 30 минут.

Как пользоваться инструментом

1
Добавьте HTML-файл
Загрузите файлы .html, .htm или .mhtml: до 20 файлов за раз, не более 95 MB каждый. Страница, сохранённая как один файл MHTML, содержит изображения и стили внутри себя.
2
Задайте ширину окна
Ширина HTML-страницы по умолчанию равна 1280 px. Выберите 390 px для мобильной версии или 1920 px для широкой панели управления. Преобразовать в уже установлено на PNG, а Изображения — это одно длинное изображение.
3
Конвертируйте в PNG
Нажмите Конвертировать в PNG. Включите Прозрачный фон в разделе Расширенные настройки, если у страницы нет собственного цвета фона и изображение будет лежать поверх другой графики.

Ответ

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

Загрузите файл .html или .mhtml, задайте Ширина HTML-страницы под экран, который хотите имитировать, и нажмите Конвертировать в PNG. Вся отрисованная страница вернётся одним изображением без потерь.

Конвертируйте HTML в PNG, когда текст и линии должны остаться четкими

PNG является рекомендацией W3C с 1996 года и использует сжатие без потерь, поэтому сглаженные края текста размером 14 px, однопиксельные границы таблиц и код с подсветкой синтаксиса остаются нетронутыми. Поэтому разработчики прикладывают PNG к отчётам об ошибках, а дизайнеры делятся ими на ревью: никому не нужно гадать, нечёткий край — это проблема CSS или артефакт сжатия.

Цена — размер файла. Страница из текста и однотонных заливок сжимается хорошо, страница с множеством фото — нет. Если снимок отправляется в чат или письмо, где важнее вес, чем чёткие детали, JPG даст файл меньше. Для документации, заметок о релизах, дашбордов и руководств по стилю PNG — более надёжный выбор по умолчанию.

Ширина определяет вёрстку. У HTML нет фиксированной страницы: один и тот же файл показывает трёхколоночный десктопный макет при 1280 px и одну колонку при 390 px. Конвертер вёрстает страницу по введённой вами Ширина HTML-страницы от 320 до 3840 px, а затем снимает её от первой строки до подвала.

Ширина окна в конвертере HTML в PNG для популярных экранов

195:422

390 × 844 px

Телефон

CSS-область просмотра многих современных iPhone; показывает мобильную вёрстку

41:59

820 × 1180 px

Планшет

iPad Air в портретной ориентации; здесь многие сайты переключают контрольные точки

8:5

1280 × 800 px

Ноутбук

Ширина по умолчанию в этом конвертере

16:9

1920 × 1080 px

Монитор Full HD

Широкие дашборды и панели администратора

HTML

Язык разметки HTML

HTML — язык разметки веба, впервые описанный Тимом Бернерсом-Ли в начале 1990-х; сейчас его развивает WHATWG как «живой стандарт». HTML-файл описывает заголовки, абзацы, ссылки, таблицы, изображения и формы, а оформление обычно задаётся через CSS. Его отображает любой браузер; формат также используется для шаблонов писем и сохранённых веб-страниц. Отдельный HTML-файл часто зависит от внешних изображений и таблиц стилей, поэтому после переноса без них он может выглядеть «сломанным».

Сжатие: –
Прозрачность: –
Анимация: –
Год появления: 1993 · Tim Berners-Lee; maintained by WHATWG

Конвертер HTML

PNG

Portable Network Graphics

PNG — растровый формат без потерь, опубликованный в 1996 году группой PNG Development Group и позже стандартизированный W3C и ISO. Он сохраняет каждый пиксель в точности, полностью поддерживает альфа-прозрачность и передаёт текст, чёткие края и однотонные заливки без артефактов. Благодаря этой точности он идеально подходит для скриншотов, логотипов, иконок и элементов интерфейса. Обратная сторона — размер: фотография в PNG часто весит в несколько раз больше, чем та же фотография в JPEG или WebP. PNG открывают все браузеры, операционные системы и графические редакторы.

Сжатие: Без потерь
Прозрачность: Да
Анимация: Нет
Год появления: 1996 · PNG Development Group

Конвертер PNG

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

Конвертировать HTML в PNG без потери стилей и шрифтов

Обычный файл .html часто зависит от ресурсов, лежащих в другом месте: таблицы стилей в папке css, изображений на исходном сервере, шрифтов из сервиса шрифтов. Когда их нет, страница превращается в текст без оформления шрифтом по умолчанию. Если сохранить страницу в Chrome или Edge как «Веб-страница, один файл», получится файл .mhtml, в котором стили и изображения хранятся вместе. Его надёжнее всего загружать.

Веб-шрифты подчиняются тому же правилу. Шрифт, объявленный через @font-face, загружается, только если его файл доступен; шрифт, который есть лишь на вашем компьютере, заменяется похожим. Если важна точная типографика, встройте шрифт или проверьте результат, прежде чем отправлять его дальше.

Фиксированная ширина также позволяет сравнивать еженедельные снимки отчёта рядом друг с другом. Если результат должен остаться выделяемым текстом для печати, используйте вместо этого формат HTML в PDF.

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

Чем конвертация HTML в PNG лучше скриншота в собственном браузере?

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

Почему PNG в несколько раз больше, чем та же страница в JPG?

PNG хранит каждый пиксель без потерь. Текст и однотонные заливки так сжимаются хорошо, а фотографии, градиенты и постеры к видео — нет, поэтому лендинг с множеством фото может дать большой PNG. Для таких страниц лучше подойдёт HTML в JPG, он легче; для примеров кода, диаграмм и интерфейсов размытие обычно не стоит экономии.

Можно ли сделать PNG с прозрачным фоном вместо белого?

Да. Включите Прозрачный фон. Он виден только там, где сама страница не задаёт цвет фона, поэтому сайт с белым цветом body всё равно получится белым. Лучше всего это работает для отдельного компонента или значка, сделанного как самостоятельный HTML-файл.

Выполняет ли конвертер JavaScript на странице?

Контент, который скрипт создаёт при открытии страницы, может появиться, а всё, что ждёт клика, прокрутки или входа в аккаунт, — нет. Если диаграмма или таблица появляется только после действия, откройте страницу в браузере, дождитесь загрузки и сохраните её как один файл перед загрузкой.

Как сделать изображение только верхней части длинной страницы?

Переключите Изображения на режим «одно на страницу» и выберите в Страницы значение «Первая страница». Вы получите первый фрагмент размером со страницу, а не всю длину. Чтобы потом обрезать его по точной рамке, воспользуйтесь инструментом обрезки изображения.