Prevod HTML na PNG

Q: Môže mať PNG namiesto bieleho priehľadné pozadie?

Áno. Zapnite **Priehľadné pozadie**. Prejaví sa len tam, kde stránka sama nenastavuje farbu pozadia, takže web s bielou farbou tela zostane biely. Najlepšie funguje pri jednom komponente alebo odznaku vytvorenom ako samostatný súbor HTML.

Q: Ako vytvorím obrázok len z hornej časti dlhej stránky?

Prepnite **Obrázky** na jeden na stranu a **Strany** nastavte na Prvá strana. Dostanete prvú časť o veľkosti jednej strany namiesto celej dĺžky. Na presné orezanie na požadovaný rámik potom použite nástroj [orezať obrázok](/crop-image).

Z uloženej webovej stránky, exportu dashboardu alebo návrhu komponentu vytvorte PNG, v ktorom každé písmeno aj tenká čiara zostanú presne také, ako ich vykreslil prehliadač. Zvoľte šírku okna a rozloženie sa jej prispôsobí.

alebo sem presuňte súbory DOC, DOCX, DOCM … ·

Max. 95 MB na súbor· Až 20 súborov· Odstránenie po 30 minútach

Výstup

Previesť na

Rozlíšenie

Obrázky

Súbory sa spracúvajú na našich serveroch a po 30 minútach sa odstránia.

Ako používať tento nástroj

1
Pridajte HTML súbor
Nahrajte súbory .html, .htm alebo .mhtml, najviac 20 v jednej dávke a každý do 95 MB. Stránka uložená ako jeden súbor MHTML obsahuje obrázky aj štýly v sebe.
2
Nastavte šírku okna
Šírka stránky HTML začína na 1280 px. Pre rozloženie na telefón použite 390 px, pre široký dashboard 1920 px. Previesť na je už nastavené na PNG a Obrázky na jeden dlhý obrázok.
3
Previesť na PNG
Stlačte Previesť na PNG. Ak stránka nemá vlastnú farbu pozadia a obrázok sa umiestni na inú grafiku, zapnite v časti Rozšírené nastavenia možnosť Priehľadné pozadie.

Odpoveď

Ako previesť HTML na PNG?

Nahrajte súbor .html alebo .mhtml, nastavte Šírku stránky HTML podľa obrazovky, ktorú chcete napodobniť, a stlačte Previesť na PNG. Celá vykreslená stránka sa vráti ako jeden bezstratový obrázok.

Prevod HTML na PNG, keď musia text a čiary zostať ostré

PNG je odporúčanie W3C od roku 1996 a používa bezstratovú kompresiu, takže vyhladené okraje 14 px textu, jednopixelové orámovania tabuliek a zvýraznený kód zostanú nedotknuté. Preto vývojári prikladajú snímky PNG k hláseniam chýb a dizajnéri ich zdieľajú pri revíziách: nikto sa nemusí pýtať, či je rozmazaný okraj problém CSS alebo artefakt kompresie.

Cenou je veľkosť. Stránka z textu a jednofarebných plôch sa komprimuje dobre, stránka plná fotiek nie. Ak snímka pôjde do chatu alebo e-mailu, kde záleží viac na veľkosti než na ostrých detailoch, JPG je menší súbor. Pre dokumentáciu, poznámky k vydaniu, dashboardy a štýlové príručky je PNG bezpečnejšou predvolenou voľbou.

Rozloženie určuje šírka. HTML nemá pevnú stránku: ten istý súbor zobrazí trojstĺpcový desktopový dizajn pri 1280 px a jeden stĺpec pod sebou pri 390 px. Konvertor stránku rozloží na Šírku stránky HTML, ktorú zadáte, od 320 do 3840 px, a potom ju zachytí od prvého riadka po pätu.

Šírky pri prevode HTML na PNG pre bežné obrazovky

195:422

390 × 844 px

Telefón

Viewport CSS mnohých novších iPhonov; zobrazí mobilné rozloženie

41:59

820 × 1180 px

Tablet

iPad Air na výšku; mnohé weby tu menia breakpointy

8:5

1280 × 800 px

Notebook

Predvolená šírka v tomto konvertore

16:9

1920 × 1080 px

Monitor Full HD

Široké dashboardy a administračné panely

HTML

HyperText Markup Language

HTML je značkovací jazyk webu, ktorý prvýkrát opísal Tim Berners-Lee na začiatku 90. rokov a dnes ho ako živý štandard spravuje WHATWG. Súbor HTML opisuje nadpisy, odseky, odkazy, tabuľky, obrázky a formuláre, zatiaľ čo vzhľad zvyčajne určuje CSS. Zobrazí ho každý prehliadač a používa sa aj pre e-mailové šablóny a uložené webové stránky. Jeden súbor HTML často závisí od externých obrázkov a štýlov, preto môže po samostatnom presune vyzerať pokazene.

Kompresia: –
Priehľadnosť: –
Animácia: –
Rok vzniku: 1993 · Tim Berners-Lee; maintained by WHATWG

Konvertor HTML

PNG

Portable Network Graphics

PNG je rastrový formát bez straty kvality publikovaný v roku 1996 skupinou PNG Development Group a neskôr štandardizovaný organizáciami W3C a ISO. Zachová každý pixel presne, podporuje plnú alfa priehľadnosť a text, ostré hrany a plné farby zvláda bez artefaktov. Vďaka tejto presnosti je ideálny pre snímky obrazovky, logá, ikony a grafiku rozhraní. Nevýhodou je veľkosť: fotografie uložené ako PNG sú často niekoľkonásobne väčšie než rovnaká fotka v JPEG alebo WebP. PNG otvoria všetky prehliadače, operačné systémy aj editory.

Kompresia: Bezstratová
Priehľadnosť: Áno
Animácia: Nie
Rok vzniku: 1996 · PNG Development Group

Konvertor PNG

PNG sa volí, keď stránka obsahuje hlavne text, kód, tabuľky alebo prvky rozhrania: bezstratové pixely zachovajú tenké čiary a malé písmo ostré v dokumentácii, hláseniach chýb a dizajnových revíziách, kde by boli artefakty JPG viditeľné.

Prevod HTML na PNG bez straty štýlov a písiem

Obyčajný súbor .html často závisí od vecí uložených inde: štýlov v priečinku css, obrázkov na pôvodnom serveri, písiem zo služby s fontmi. Keď chýbajú, stránka sa zobrazí ako text bez štýlov v predvolenom písme. Uloženie stránky v Chrome alebo Edge ako Webová stránka, jeden súbor vytvorí súbor .mhtml, ktorý drží štýly a obrázky pokope, a to je najspoľahlivejšie nahrať.

Webové písma sa riadia rovnakým pravidlom. Písmo deklarované cez @font-face sa načíta, len ak je jeho súbor dostupný; písmo, ktoré existuje len vo vašom počítači, sa nahradí podobným. Ak záleží na presnej typografii, písmo vložte alebo výsledok skontrolujte pred odoslaním.

Pevná šírka tiež umožňuje porovnávať týždenné snímky reportu vedľa seba. Ak má výsledok zostať ako vybrateľný text na tlač, použite radšej formát HTML do PDF.

Otázky o prevode HTML na PNG

Je prevod HTML na PNG lepší ako snímka obrazovky z vlastného prehliadača?

Snímka obrazovky z prehliadača zachytí len to, čo sa zmestí na obrazovku, pokiaľ nepoužijete nástroj na snímanie celej stránky, a jej šírka je taká, akú má práve vaše okno. Tu je šírka číslo, ktoré nastavíte, takže dva snímky vytvorené s odstupom týždňov na seba presne sedia a zahŕňajú celú stránku od prvého riadka až po pätu.

Prečo je PNG niekoľkonásobne väčšie ako tá istá stránka v JPG?

PNG ukladá každý pixel bez straty. Text a jednofarebné plochy sa tak komprimujú dobre, no fotky, farebné prechody a plagáty videí nie, preto môže úvodná stránka plná fotiek dať veľké PNG. Pre takéto stránky je ľahšou voľbou HTML do JPG; pri ukážkach kódu, grafoch a rozhraniach sa rozmazanie zvyčajne nevypláca.

Môže mať PNG namiesto bieleho priehľadné pozadie?

Áno. Zapnite Priehľadné pozadie. Prejaví sa len tam, kde stránka sama nenastavuje farbu pozadia, takže web s bielou farbou tela zostane biely. Najlepšie funguje pri jednom komponente alebo odznaku vytvorenom ako samostatný súbor HTML.

Spúšťa prevodník JavaScript na stránke?

Obsah, ktorý skript vytvorí pri otvorení stránky, sa môže zobraziť, ale to, čo čaká na kliknutie, posunutie alebo prihlásenie, nie. Ak graf alebo tabuľka vznikne až po interakcii, otvorte stránku v prehliadači, počkajte na dokončenie a pred nahraním ju uložte ako jeden súbor.

Ako vytvorím obrázok len z hornej časti dlhej stránky?

Prepnite Obrázky na jeden na stranu a Strany nastavte na Prvá strana. Dostanete prvú časť o veľkosti jednej strany namiesto celej dĺžky. Na presné orezanie na požadovaný rámik potom použite nástroj orezať obrázok.