HTML naar PNG converteren

Q: Kan de PNG een transparante achtergrond krijgen in plaats van wit?

Ja. Zet **Transparante achtergrond** aan. Dit is alleen zichtbaar waar de pagina zelf geen achtergrondkleur instelt, dus een site met een witte body-kleur blijft wit. Het werkt het best voor één component of badge die als eigen HTML-bestand is gebouwd.

Q: Hoe maak ik een afbeelding van alleen het bovenste deel van een lange pagina?

Zet **Afbeeldingen** op één per pagina en **Pagina's** op Eerste pagina. U krijgt dan het eerste paginagrote deel in plaats van de hele lengte. Wilt u het daarna op een exact kader snijden, gebruik dan de tool [afbeelding bijsnijden](/crop-image).

Zet een opgeslagen webpagina, een dashboardexport of een mock-up van een component om naar een PNG waarin elke letter en elke dunne lijn precies zo blijft als de browser ze tekende. Kies de vensterbreedte en de opmaak past zich daaraan aan.

of sleep DOC, DOCX, DOCM …-bestanden hierheen ·

Max. 95 MB per bestand· Tot 20 bestanden· Verwijderd na 30 minuten

Uitvoer

Converteren naar

Resolutie

Afbeeldingen

Bestanden worden op onze servers verwerkt en na 30 minuten verwijderd.

Zo gebruikt u deze tool

1
Voeg het HTML-bestand toe
Upload .html-, .htm- of .mhtml-bestanden, maximaal 20 per batch en elk tot 95 MB. Een pagina die als één MHTML-bestand is opgeslagen, bevat de afbeeldingen en stijlen zelf.
2
Stel de vensterbreedte in
Breedte van de HTML-pagina staat standaard op 1280 px. Gebruik 390 px voor een telefoonlayout of 1920 px voor een breed dashboard. Converteren naar staat al op PNG en Afbeeldingen is één lange afbeelding.
3
Converteer naar PNG
Klik op Converteren naar PNG. Zet onder Geavanceerde instellingen Transparante achtergrond aan als de pagina zelf geen achtergrondkleur heeft en de afbeelding op ander beeldmateriaal komt te staan.

Antwoord

Hoe converteer ik HTML naar PNG?

Upload het .html- of .mhtml-bestand, stel Breedte van de HTML-pagina in op het scherm dat u wilt nabootsen en klik op Converteren naar PNG. De hele weergegeven pagina komt terug als één verliesvrije afbeelding.

HTML naar PNG converteren als tekst en lijnen scherp moeten blijven

PNG is sinds 1996 een W3C-aanbeveling en gebruikt verliesvrije compressie, dus de gladde randen van tekst van 14 px, tabelranden van één pixel en kleurgemarkeerde code blijven intact. Daarom voegen ontwikkelaars PNG-opnamen toe aan bugrapporten en delen ontwerpers ze in reviews: niemand hoeft zich af te vragen of een vage rand een CSS-probleem of een compressie-artefact is.

De prijs is de bestandsgrootte. Een pagina met tekst en egale kleuren comprimeert goed; een pagina vol foto's niet. Gaat de opname naar een chat of e-mail waar de grootte zwaarder weegt dan scherp detail, dan is JPG het kleinere bestand. Voor documentatie, releasenotes, dashboards en stijlgidsen is PNG de veiligere standaard.

De breedte bepaalt de layout. HTML heeft geen vaste pagina: hetzelfde bestand toont bij 1280 px een desktopontwerp met drie kolommen en bij 390 px één gestapelde kolom. De converter zet de pagina neer op de Breedte van de HTML-pagina die u invoert, van 320 tot 3840 px, en legt hem vast van de eerste regel tot de footer.

Breedtes voor HTML naar PNG bij gangbare schermen

195:422

390 × 844 px

Telefoon

CSS-viewport van veel recente iPhones; toont de mobiele layout

41:59

820 × 1180 px

Tablet

iPad Air in staand formaat; veel sites wisselen hier van breakpoint

8:5

1280 × 800 px

Laptop

De standaardbreedte in deze converter

16:9

1920 × 1080 px

Full HD-monitor

Brede dashboards en beheerpanelen

HTML

HyperText Markup Language

HTML is de opmaaktaal van het web, begin jaren negentig voor het eerst beschreven door Tim Berners-Lee en nu door WHATWG onderhouden als doorlopende standaard. Een HTML-bestand beschrijft koppen, alinea's, links, tabellen, afbeeldingen en formulieren, terwijl de opmaak meestal uit CSS komt. Elke browser geeft het weer, en het wordt ook gebruikt voor e-mailsjablonen en opgeslagen webpagina's. Een los HTML-bestand is vaak afhankelijk van externe afbeeldingen en stijlbladen, dus het kan er kapot uitzien als u het alleen verplaatst.

Compressie: –
Transparantie: –
Animatie: –
Geïntroduceerd: 1993 · Tim Berners-Lee; maintained by WHATWG

HTML-converter

PNG

Portable Network Graphics

PNG is een rasterformaat zonder kwaliteitsverlies, in 1996 gepubliceerd door de PNG Development Group en later gestandaardiseerd door W3C en ISO. Het behoudt elke pixel exact, ondersteunt volledige alfatransparantie en geeft tekst, scherpe randen en egale kleuren weer zonder artefacten. Door die precisie is het ideaal voor screenshots, logo's, pictogrammen en interfacegrafieken. De keerzijde is de omvang: foto's die als PNG zijn opgeslagen, zijn vaak meerdere keren groter dan dezelfde foto als JPEG of WebP. Alle browsers, besturingssystemen en bewerkingsprogramma's openen PNG-bestanden.

Compressie: Zonder verlies
Transparantie: Ja
Animatie: Nee
Geïntroduceerd: 1996 · PNG Development Group

PNG-converter

Mensen kiezen PNG als de pagina vooral uit tekst, code, tabellen of interface-onderdelen bestaat: verliesvrije pixels houden dunne lijnen en kleine letters scherp in documentatie, bugrapporten en designreviews waar JPG-artefacten zichtbaar zouden zijn.

HTML naar PNG converteren zonder stijlen of lettertypen te verliezen

Een gewoon .html-bestand is vaak afhankelijk van dingen die elders staan: een stylesheet in een css-map, afbeeldingen op de oorspronkelijke server, lettertypen van een fontdienst. Ontbreken die, dan valt de pagina terug op tekst zonder opmaak in een standaardlettertype. Sla de pagina in Chrome of Edge op als Webpagina, enkel bestand: dat levert een .mhtml-bestand op waarin stijlen en afbeeldingen bij elkaar blijven, en dat is het betrouwbaarst om te uploaden.

Weblettertypen volgen dezelfde regel. Een lettertype dat met @font-face is gedeclareerd, laadt alleen als het bestand bereikbaar is; een lettertype dat alleen op uw eigen computer staat, wordt vervangen door een vergelijkbaar exemplaar. Is exacte typografie belangrijk, sluit het lettertype dan in of controleer het resultaat voordat u het doorstuurt.

Met een vaste breedte zijn wekelijkse opnamen van een rapport ook naast elkaar te vergelijken. Moet het resultaat selecteerbare tekst blijven voor afdrukken, gebruik dan liever HTML naar PDF.

Vragen over HTML naar PNG

Is HTML naar PNG beter dan een schermafbeelding uit mijn eigen browser?

Een schermafbeelding in de browser legt alleen vast wat op uw scherm past, tenzij u een tool voor volledige pagina's gebruikt, en de breedte hangt af van uw venster. Hier stelt u de breedte zelf in als getal, dus twee opnamen met weken ertussen sluiten exact op elkaar aan, en de hele pagina wordt meegenomen, van de eerste regel tot de footer.

Waarom is de PNG enkele keren groter dan dezelfde pagina als JPG?

PNG slaat elke pixel zonder verlies op. Tekst en egale kleuren comprimeren zo goed, maar foto's, kleurverlopen en video-posters niet, dus een landingspagina vol foto's kan een groot PNG-bestand opleveren. Voor zulke pagina's is HTML naar JPG de lichtere keuze; voor codevoorbeelden, grafieken en interfaces is de onscherpte meestal niet de moeite waard.

Kan de PNG een transparante achtergrond krijgen in plaats van wit?

Ja. Zet Transparante achtergrond aan. Dit is alleen zichtbaar waar de pagina zelf geen achtergrondkleur instelt, dus een site met een witte body-kleur blijft wit. Het werkt het best voor één component of badge die als eigen HTML-bestand is gebouwd.

Voert de converter de JavaScript op de pagina uit?

Inhoud die een script opbouwt bij het openen van de pagina kan verschijnen, maar alles wat op een klik, scroll of login wacht niet. Bestaat een grafiek of tabel pas na interactie, open de pagina dan in uw browser, laat alles laden en sla hem op als één bestand voordat u uploadt.

Hoe maak ik een afbeelding van alleen het bovenste deel van een lange pagina?

Zet Afbeeldingen op één per pagina en Pagina's op Eerste pagina. U krijgt dan het eerste paginagrote deel in plaats van de hele lengte. Wilt u het daarna op een exact kader snijden, gebruik dan de tool afbeelding bijsnijden.