UltKit

HTML til PNG-konverter

Gør en gemt webside, en dashboard-eksport eller et komponentmockup til en PNG, hvor hvert bogstav og hver tynd streg står præcis, som browseren tegnede dem. Vælg vinduesbredden, og layoutet tilpasser sig den.

Dokument til billede

eller slip DOC, DOCX, DOCM …-filer her ·

Maks. 95 MB pr. fil· Op til 20 filer· Slettes efter 30 minutter

Output

Filer behandles på vores servere og slettes efter 30 minutter.

Sådan bruger du værktøjet

  1. 1

    Tilføj HTML-filen

    Upload .html-, .htm- eller .mhtml-filer, op til 20 pr. batch og 95 MB hver. En side gemt som én MHTML-fil har sine billeder og typografier med i filen.

  2. 2

    Angiv vinduesbredden

    HTML-sidebredde starter på 1280 px. Brug 390 px til et telefonlayout eller 1920 px til et bredt dashboard. Konvertér til er allerede PNG, og Billeder er ét langt billede.

  3. 3

    Konvertér til PNG

    Tryk på Konvertér til PNG. Slå Gennemsigtig baggrund til under Avancerede indstillinger, hvis siden ikke har sin egen baggrundsfarve, og billedet skal ligge oven på anden grafik.

Svar

Hvordan konverterer jeg HTML til PNG?

Upload .html- eller .mhtml-filen, sæt HTML-sidebredde til den skærm, du vil efterligne, og tryk på Konvertér til PNG. Hele den gengivne side kommer tilbage som ét tabsfrit billede.

Konvertér HTML til PNG, når tekst og streger skal forblive skarpe

PNG har været en W3C-anbefaling siden 1996 og bruger tabsfri komprimering, så de udjævnede kanter på 14 px brødtekst, tabelkanter på én pixel og syntaksfarvet kode bevares uberørt. Det er grunden til, at udviklere vedhæfter PNG-optagelser til fejlrapporter, og designere deler dem i gennemgange: ingen skal undre sig over, om en uskarp kant er et CSS-problem eller en komprimeringsartefakt.

Prisen er størrelsen. En side af tekst og ensfarvede flader komprimeres godt; en side fuld af fotos gør ikke. Hvis optagelsen skal ind i en chat eller en e-mail, hvor størrelsen betyder mere end skarpe detaljer, er JPG den mindre fil. Til dokumentation, udgivelsesnoter, dashboards og stilguides er PNG den sikreste standard.

Bredden afgør layoutet. HTML har ingen fast side: Den samme fil viser et tre-kolonners desktopdesign ved 1280 px og én stablet kolonne ved 390 px. Konverteren opsætter siden i den HTML-sidebredde, du angiver, fra 320 til 3840 px, og optager den derefter fra første linje til sidefoden.

Bredder i HTML til PNG-konverteren for almindelige skærme

195:422

390 × 844 px

Telefon

CSS-viewport på mange nyere iPhones; viser mobillayoutet

41:59

820 × 1180 px

Tablet

iPad Air i stående format; mange websteder skifter breakpoint omkring denne bredde

8:5

1280 × 800 px

Bærbar

Standardbredden i denne konverter

16:9

1920 × 1080 px

Full HD-skærm

Brede dashboards og adminpaneler

HTML

HyperText Markup Language

HTML er internettets opmærkningssprog, som Tim Berners-Lee først beskrev i begyndelsen af 1990'erne, og som nu vedligeholdes af WHATWG som en levende standard. En HTML-fil beskriver overskrifter, afsnit, links, tabeller, billeder og formularer, mens udseendet normalt kommer fra CSS. Alle browsere kan gengive det, og det bruges også til e-mailskabeloner og gemte websider. En enkelt HTML-fil afhænger ofte af eksterne billeder og typografiark, så den kan se ødelagt ud, hvis den flyttes alene.

Komprimering
–
Gennemsigtighed
–
Animation
–
Introduceret
1993 · Tim Berners-Lee; maintained by WHATWG
HTML-konverter

PNG

Portable Network Graphics

PNG er et tabsfrit rasterformat, som PNG Development Group udgav i 1996, og som senere blev standardiseret af W3C og ISO. Det bevarer hver pixel præcist, understøtter fuld alfagennemsigtighed og håndterer tekst, skarpe kanter og flade farver uden artefakter. Den præcision gør det ideelt til skærmbilleder, logoer, ikoner og grafik i brugerflader. Ulempen er størrelsen: fotos gemt som PNG er ofte flere gange større end det samme foto som JPEG eller WebP. Alle browsere, operativsystemer og redigeringsprogrammer åbner PNG-filer.

Komprimering
Uden tab
Gennemsigtighed
Ja
Animation
Nej
Introduceret
1996 · PNG Development Group
PNG-konverter

Folk vælger PNG, når siden mest består af tekst, kode, tabeller eller brugerfladedele: tabsfrie pixels holder tynde streger og lille skrift skarpe i dokumentation, fejlrapporter og designgennemgange, hvor JPG-artefakter ville være synlige.

Konvertér HTML til PNG uden at miste typografi eller skrifttyper

En almindelig .html-fil afhænger ofte af ting, der er gemt andre steder: et typografiark i en css-mappe, billeder på den oprindelige server, skrifttyper fra en skrifttypetjeneste. Når de mangler, falder siden tilbage til uformateret tekst i en standardskrifttype. Hvis du gemmer siden i Chrome eller Edge som Webpage, Single File, får du en .mhtml-fil, der holder typografier og billeder samlet, og det er det mest pålidelige at uploade.

Webskrifttyper følger samme regel. En skrifttype angivet med @font-face indlæses kun, hvis dens fil kan nås; en skrifttype, der kun findes på din egen computer, erstattes af en lignende. Hvis præcis typografi er vigtig, så indlejr skrifttypen eller tjek resultatet, før du sender det videre.

En fast bredde gør også ugentlige optagelser af en rapport sammenlignelige side om side. Når resultatet skal forblive markérbar tekst til udskrivning, er HTML til PDF formatet at bruge i stedet.

Spørgsmål om HTML til PNG

Er HTML til PNG bedre end et skærmbillede fra min egen browser?

Et skærmbillede i browseren fanger kun det, der er plads til på skærmen, medmindre du bruger et værktøj til fuldsideoptagelse, og bredden er den, dit vindue tilfældigvis har. Her er bredden et tal, du selv angiver, så to optagelser med ugers mellemrum passer præcist sammen, og hele siden er med fra første linje til sidefoden.

Hvorfor er PNG-filen flere gange større end samme side som JPG?

PNG gemmer hver pixel uden tab. Tekst og ensfarvede flader komprimeres godt på den måde, men fotos, farveovergange og videoplakater gør ikke, så en landingsside med mange fotos kan give en stor PNG. Til sådanne sider er HTML til JPG det lettere valg; til kodeeksempler, diagrammer og brugerflader er sløringen sjældent umagen værd.

Kan PNG-filen få en gennemsigtig baggrund i stedet for hvid?

Ja. Slå Gennemsigtig baggrund til. Den vises kun igennem, hvor siden selv ikke angiver en baggrundsfarve, så et websted med hvid body-farve bliver stadig hvidt. Det fungerer bedst til en enkelt komponent eller et badge bygget som sin egen HTML-fil.

Kører konverteren sidens JavaScript?

Indhold, som et script opbygger, når siden åbnes, kan komme med, men alt, der venter på et klik, en scrolling eller et login, kommer ikke med. Hvis et diagram eller en tabel først findes efter interaktion, så åbn siden i din browser, lad den blive færdig, og gem den som én fil, før du uploader.

Hvordan laver jeg et billede af kun den øverste del af en lang side?

Skift Billeder til ét pr. side, og sæt Sider til Første side. Så får du det første sidestore afsnit i stedet for hele længden. Hvis du bagefter vil beskære det til en præcis ramme, kan du bruge værktøjet beskær billede.