Převodník HTML do PNG

Q: Může mít PNG místo bílého pozadí průhledné?

Ano. Zapněte **Průhledné pozadí**. Projeví se jen tam, kde stránka sama žádnou barvu pozadí nenastavuje, takže web s bílou barvou těla stránky zůstane bílý. Nejlépe funguje u jednotlivé komponenty nebo odznaku vytvořeného jako samostatný soubor HTML.

Q: Jak vytvořím obrázek jen z horní části dlouhé stránky?

Přepněte **Obrázky** na jeden na stránku a nastavte **Stránky** na První stránka. Dostanete první úsek o velikosti stránky místo celé délky. Pokud ho potom chcete přesně zformátovat, použijte nástroj [oříznout obrázek](/crop-image).

Z uložené webové stránky, exportu dashboardu nebo návrhu komponenty vytvoříte PNG, v němž každé písmeno i tenká linka zůstanou přesně tak, jak je vykreslil prohlížeč. Zvolte šířku okna a rozvržení se jí přizpůsobí.

nebo sem přetáhněte soubory DOC, DOCX, DOCM … ·

Max. 95 MB na soubor· Až 20 souborů· Smazáno po 30 minutách

Výstup

Převést na

Rozlišení

Obrázky

Soubory se zpracovávají na našich serverech a po 30 minutách se smažou.

Jak nástroj používat

1
Přidejte soubor HTML
Nahrajte soubory .html, .htm nebo .mhtml, nejvýše 20 v jedné dávce a každý do 95 MB. Stránka uložená jako jeden soubor MHTML obsahuje obrázky i styly přímo v sobě.
2
Nastavte šířku okna
Šířka stránky HTML je výchozně 1280 px. Pro rozvržení na telefonu zadejte 390 px, pro široký dashboard 1920 px. Převést na je už nastaveno na PNG a Obrázky na jeden dlouhý obrázek.
3
Převeďte do PNG
Stiskněte Převést na PNG. Pokud stránka nemá vlastní barvu pozadí a obrázek budete vkládat na jinou grafiku, zapněte v části Pokročilá nastavení volbu Průhledné pozadí.

Odpověď

Jak převést HTML do PNG?

Nahrajte soubor .html nebo .mhtml, nastavte Šířku stránky HTML podle obrazovky, kterou chcete napodobit, a stiskněte Převést na PNG. Celá vykreslená stránka se vrátí jako jeden obrázek bez ztráty kvality.

Převeďte HTML do PNG, když musí text a linky zůstat ostré

PNG je doporučení W3C od roku 1996 a používá bezeztrátovou kompresi, takže vyhlazené okraje textu o velikosti 14 px, jednopixelové ohraničení tabulek i barevně zvýrazněný kód zůstanou nedotčené. Proto vývojáři přikládají snímky v PNG k hlášením chyb a návrháři je sdílejí při revizích: nikdo nemusí řešit, zda je rozmazaná hrana problém CSS, nebo artefakt komprese.

Cenou je velikost. Stránka z textu a plných barev se komprimuje dobře, stránka plná fotek ne. Pokud snímek půjde do chatu nebo e-mailu, kde je důležitější velikost než ostré detaily, bude JPG menší soubor. Pro dokumentaci, poznámky k vydání, dashboardy a stylové příručky je bezpečnější výchozí volbou PNG.

O rozvržení rozhoduje šířka. HTML nemá pevnou stránku: tentýž soubor ukazuje třísloupcový desktopový návrh při 1280 px a jediný sloupec pod sebou při 390 px. Převodník stránku rozloží na zadanou Šířku stránky HTML v rozsahu 320 až 3840 px a pak ji zachytí od prvního řádku po patičku.

Šířky pro převod HTML do PNG podle běžných obrazovek

195:422

390 × 844 px

Telefon

CSS viewport mnoha novějších iPhonů; ukáže mobilní rozvržení

41:59

820 × 1180 px

Tablet

iPad Air na výšku; mnoho webů v těchto místech přepíná breakpointy

8:5

1280 × 800 px

Notebook

Výchozí šířka v tomto převodníku

16:9

1920 × 1080 px

Monitor Full HD

Široké dashboardy a administrační panely

HTML

HyperText Markup Language

HTML je značkovací jazyk webu, který poprvé popsal Tim Berners-Lee na počátku 90. let a dnes jej spravuje WHATWG jako živý standard. Soubor HTML popisuje nadpisy, odstavce, odkazy, tabulky, obrázky a formuláře, zatímco vzhled obvykle zajišťuje CSS. Vykreslí jej každý prohlížeč a používá se také pro e-mailové šablony a uložené webové stránky. Jeden soubor HTML často závisí na externích obrázcích a stylech, takže po samostatném přenesení může vypadat rozbitě.

Komprese: –
Průhlednost: –
Animace: –
Představeno: 1993 · Tim Berners-Lee; maintained by WHATWG

Převodník HTML

PNG

Portable Network Graphics

PNG je rastrový formát bez ztráty kvality, který v roce 1996 zveřejnila skupina PNG Development Group a později ho standardizovaly W3C a ISO. Zachová každý pixel přesně, podporuje plnou průhlednost alfa a bez artefaktů zvládá text, ostré hrany i plné barvy. Díky této přesnosti je ideální pro snímky obrazovky, loga, ikony a grafiku rozhraní. Nevýhodou je velikost: fotografie uložené jako PNG bývají několikanásobně větší než stejná fotka v JPEG nebo WebP. Soubory PNG otevřou všechny prohlížeče, operační systémy i editory.

Komprese: Bezztrátová
Průhlednost: Ano
Animace: Ne
Představeno: 1996 · PNG Development Group

Převodník PNG

PNG se volí, když stránka obsahuje hlavně text, kód, tabulky nebo části rozhraní: pixely bez ztráty zachovají ostré tenké čáry i drobné písmo v dokumentaci, hlášeních chyb a revizích návrhů, kde by byly vidět artefakty JPG.

Převod HTML do PNG bez ztráty stylů a fontů

Obyčejný soubor .html často závisí na věcech uložených jinde: styly ve složce css, obrázky na původním serveru, písma z fontové služby. Když chybějí, stránka se vrátí k nestylovanému textu ve výchozím písmu. Uložením stránky v Chrome nebo Edge jako Webová stránka, jeden soubor vznikne soubor .mhtml, který styly i obrázky drží pohromadě, a to je nejspolehlivější, co můžete nahrát.

Webové fonty se řídí stejným pravidlem. Font deklarovaný pomocí @font-face se načte, jen pokud je jeho soubor dostupný; font, který existuje jen na vašem počítači, se nahradí podobným. Pokud na přesné typografii záleží, font vložte do stránky nebo si výsledek před odesláním zkontrolujte.

Pevná šířka také umožňuje porovnávat týdenní snímky sestavy vedle sebe. Když má výsledek zůstat jako vybratelný text pro tisk, použijte raději formát HTML do PDF.

Otázky k převodu HTML do PNG

Je převod HTML do PNG lepší než snímek obrazovky z vlastního prohlížeče?

Snímek obrazovky v prohlížeči zachytí jen to, co se vejde na displej, pokud nepoužijete nástroj pro snímání celé stránky, a šířka odpovídá tomu, jak velké je zrovna vaše okno. Tady je šířka číslo, které si nastavíte, takže dva snímky pořízené s odstupem týdnů na sebe přesně sedí a zahrnují celou stránku od prvního řádku po patičku.

Proč je PNG několikrát větší než stejná stránka v JPG?

PNG ukládá každý pixel bez ztráty kvality. Text a plné barvy se tak komprimují dobře, ale fotky, přechody a plakáty videí ne, takže vstupní stránka plná fotek může vytvořit velké PNG. Pro takové stránky je lehčí volbou HTML do JPG; u ukázek kódu, grafů a uživatelských rozhraní se rozmazání většinou nevyplatí.

Může mít PNG místo bílého pozadí průhledné?

Ano. Zapněte Průhledné pozadí. Projeví se jen tam, kde stránka sama žádnou barvu pozadí nenastavuje, takže web s bílou barvou těla stránky zůstane bílý. Nejlépe funguje u jednotlivé komponenty nebo odznaku vytvořeného jako samostatný soubor HTML.

Spouští převodník JavaScript na stránce?

Obsah, který skript vytvoří při otevření stránky, se zobrazit může, ale to, co čeká na kliknutí, posunutí nebo přihlášení, ne. Pokud graf nebo tabulka vznikne až po interakci, otevřete stránku v prohlížeči, počkejte na dokončení a před nahráním ji uložte jako jeden soubor.

Jak vytvořím obrázek jen z horní části dlouhé stránky?

Přepněte Obrázky na jeden na stránku a nastavte Stránky na První stránka. Dostanete první úsek o velikosti stránky místo celé délky. Pokud ho potom chcete přesně zformátovat, použijte nástroj oříznout obrázek.