UltKit

HTML til PNG-konverter

Gjør en lagret nettside, en dashbordeksport eller en komponentskisse om til en PNG der hver bokstav og hver tynne linje blir nøyaktig slik nettleseren tegnet dem. Velg vindusbredden, så følger oppsettet etter.

Dokument til bilde

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

Maks 95 MB per fil· Opptil 20 filer· Slettes etter 30 minutter

Utdata

Filene behandles på serverne våre og slettes etter 30 minutter.

Slik bruker du dette verktøyet

  1. 1

    Legg til HTML-filen

    Last opp .html-, .htm- eller .mhtml-filer, opptil 20 per omgang og 95 MB per fil. En side som er lagret som én MHTML-fil, har bildene og stilene med i seg.

  2. 2

    Angi vindusbredden

    Bredde på HTML-siden starter på 1280 px. Bruk 390 px for en mobilvisning eller 1920 px for et bredt dashbord. Konverter til er allerede PNG, og Bilder er ett langt bilde.

  3. 3

    Konverter til PNG

    Trykk Konverter til PNG. Slå på Gjennomsiktig bakgrunn under Avanserte innstillinger hvis siden ikke har noen egen bakgrunnsfarge og bildet skal ligge oppå annen grafikk.

Svar

Hvordan konverterer jeg HTML til PNG?

Last opp .html- eller .mhtml-filen, sett Bredde på HTML-siden til skjermen du vil etterligne, og trykk Konverter til PNG. Hele den gjengitte siden kommer tilbake som ett tapsfritt bilde.

Konverter HTML til PNG når tekst og linjer må forbli skarpe

PNG har vært en W3C-anbefaling siden 1996 og bruker tapsfri komprimering, så de kantutjevnede kantene på brødtekst på 14 px, tabellrammer på én piksel og fargelagt kode kommer gjennom uberørt. Derfor legger utviklere ved PNG-opptak i feilrapporter, og designere deler dem i gjennomganger: ingen trenger å lure på om en uskarp kant er et CSS-problem eller en komprimeringsartefakt.

Prisen er størrelsen. En side av tekst og flate farger komprimeres godt, mens en side full av bilder ikke gjør det. Hvis opptaket skal i en chat eller en e-post der størrelsen betyr mer enn skarpe detaljer, er JPG den minste filen. For dokumentasjon, versjonsnotater, dashbord og stilguider er PNG det tryggeste valget.

Bredden avgjør utformingen. HTML har ingen fast side: den samme filen viser et tredelt skrivebordsdesign ved 1280 px og én enkelt stablet kolonne ved 390 px. Konverteren legger ut siden i den Bredde på HTML-siden du oppgir, fra 320 til 3840 px, og fanger den deretter fra første linje til bunnteksten.

Bredder i HTML til PNG-konverteren for vanlige skjermer

195:422

390 × 844 px

Mobil

CSS-visningsområdet på mange nyere iPhone-modeller; viser mobilvisningen

41:59

820 × 1180 px

Nettbrett

iPad Air stående; mange nettsteder bytter brytepunkt omtrent her

8:5

1280 × 800 px

Bærbar PC

Standardbredden i denne konverteren

16:9

1920 × 1080 px

Full HD-skjerm

Brede dashbord og administrasjonspaneler

HTML

HyperText Markup Language

HTML er nettets markeringsspråk, første gang beskrevet av Tim Berners-Lee tidlig på 1990-tallet og nå vedlikeholdt av WHATWG som en levende standard. En HTML-fil beskriver overskrifter, avsnitt, lenker, tabeller, bilder og skjemaer, mens stilen vanligvis kommer fra CSS. Alle nettlesere viser det, og det brukes også til e-postmaler og lagrede nettsider. En enkelt HTML-fil er ofte avhengig av eksterne bilder og stilark, så den kan se ødelagt ut når den flyttes alene.

Komprimering
–
Gjennomsiktighet
–
Animasjon
–
Introdusert
1993 · Tim Berners-Lee; maintained by WHATWG
HTML-konverterer

PNG

Portable Network Graphics

PNG er et tapsfritt rasterformat utgitt i 1996 av PNG Development Group og senere standardisert av W3C og ISO. Det beholder hver piksel nøyaktig, støtter full alfa-gjennomsiktighet og håndterer tekst, skarpe kanter og flate farger uten artefakter. Den presisjonen gjør det ideelt for skjermbilder, logoer, ikoner og grensesnittgrafikk. Ulempen er størrelsen: fotografier lagret som PNG er ofte flere ganger større enn samme bilde som JPEG eller WebP. Alle nettlesere, operativsystemer og redigeringsprogrammer åpner PNG-filer.

Komprimering
Tapsfri
Gjennomsiktighet
Ja
Animasjon
Nei
Introdusert
1996 · PNG Development Group
PNG-konverterer

Folk velger PNG når siden for det meste består av tekst, kode, tabeller eller deler av et grensesnitt: tapsfrie piksler holder tynne linjer og liten skrift skarpe i dokumentasjon, feilrapporter og designgjennomganger der JPG-artefakter ville synt.

Konverter HTML til PNG uten å miste stiler eller fonter

En vanlig .html-fil er ofte avhengig av ting som ligger andre steder: et stilark i en css-mappe, bilder på den opprinnelige serveren, skrifter fra en skrifttjeneste. Når disse mangler, faller siden tilbake til ustilet tekst i en standardskrift. Hvis du lagrer siden i Chrome eller Edge som Webpage, Single File, får du en .mhtml-fil som holder stiler og bilder samlet, og det er det mest pålitelige å laste opp.

Nettskrifter følger samme regel. En skrift som er deklarert med @font-face, lastes bare hvis filen kan nås, og en skrift som bare finnes på din egen datamaskin, byttes ut med en lignende. Hvis nøyaktig typografi er viktig, bør du bygge inn skriften eller sjekke resultatet før du sender det videre.

En fast bredde gjør også ukentlige opptak av en rapport sammenlignbare side ved side. Når resultatet skal beholde markérbar tekst for utskrift, er HTML til PDF formatet du bør bruke i stedet.

Spørsmål om HTML til PNG

Er HTML til PNG bedre enn et skjermbilde fra min egen nettleser?

Et skjermbilde i nettleseren fanger bare det som får plass på skjermen, med mindre du bruker et verktøy for hele siden, og bredden er den som vinduet ditt tilfeldigvis har. Her er bredden et tall du selv angir, så to opptak med ukers mellomrom passer nøyaktig over hverandre, og hele siden er med fra første linje til bunnteksten.

Hvorfor er PNG-filen flere ganger større enn samme side som JPG?

PNG lagrer hver piksel uten tap. Tekst og flate farger komprimeres godt på den måten, men bilder, fargeoverganger og videoplakater gjør ikke det, så en landingsside full av bilder kan gi en stor PNG. For slike sider er HTML til JPG det lettere valget. For kodeeksempler, diagrammer og brukergrensesnitt er uskarpheten sjelden verdt det.

Kan PNG-filen ha gjennomsiktig bakgrunn i stedet for hvit?

Ja. Slå på Gjennomsiktig bakgrunn. Den vises bare der siden selv ikke setter en bakgrunnsfarge, så et nettsted med hvit body-farge blir fortsatt hvitt. Det fungerer best for én enkelt komponent eller et merke som er laget som en egen HTML-fil.

Kjører konverteren JavaScript-koden på siden?

Innhold som et skript bygger når siden åpnes, kan komme med, men alt som venter på et klikk, en rulling eller en innlogging, kommer ikke med. Hvis et diagram eller en tabell først finnes etter interaksjon, åpner du siden i nettleseren, lar den bli ferdig og lagrer den som én fil før du laster opp.

Hvordan lager jeg et bilde av bare øverste del av en lang side?

Sett Bilder til ett per side og Sider til Første side. Da får du den første delen i sidestørrelse i stedet for hele lengden. Hvis du vil beskjære den til en nøyaktig ramme etterpå, bruker du verktøyet beskjær bilde.