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

Q: Чи може PNG мати прозорий фон замість білого?

Так. Увімкніть **Прозорий фон**. Він проступає лише там, де сама сторінка не задає колір фону, тож сайт із білим кольором body однаково буде білим. Найкраще це працює для окремого компонента або бейджа, зробленого як окремий HTML-файл.

Q: Як зробити зображення лише верхньої частини довгої сторінки?

Перемкніть **Зображення** на одне на сторінку й виберіть для **Сторінки** значення «Перша сторінка». Ви отримаєте першу частину розміру сторінки замість усієї довжини. Щоб потім обрізати її до точної рамки, скористайтеся інструментом [обрізати зображення](/crop-image).

Перетворіть збережену вебсторінку, експорт дашборда чи макет компонента на PNG, у якому кожна літера й найтонша лінія лишаються точно такими, як їх намалював браузер. Виберіть ширину вікна, і верстка підлаштується під неї.

або перетягніть Файли DOC, DOCX, DOCM … сюди ·

До 95 МБ на файл· До 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

HyperText Markup Language

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 на сторінці?

Вміст, який скрипт створює під час відкриття сторінки, може з’явитися, а те, що чекає на клік, прокручування чи вхід в обліковий запис, — ні. Якщо діаграма або таблиця з’являється лише після дії користувача, відкрийте сторінку в браузері, дочекайтеся завершення й збережіть її як один файл перед завантаженням.

Як зробити зображення лише верхньої частини довгої сторінки?

Перемкніть Зображення на одне на сторінку й виберіть для Сторінки значення «Перша сторінка». Ви отримаєте першу частину розміру сторінки замість усієї довжини. Щоб потім обрізати її до точної рамки, скористайтеся інструментом обрізати зображення.