HTML in PNG umwandeln

Q: Kann das PNG statt Weiß einen transparenten Hintergrund haben?

Ja. Aktivieren Sie **Transparenter Hintergrund**. Er scheint nur dort durch, wo die Seite selbst keine Hintergrundfarbe festlegt. Eine Website mit weißer Body-Farbe bleibt also weiß. Am besten funktioniert das bei einer einzelnen Komponente oder einem Badge, das als eigene HTML-Datei vorliegt.

Q: Wie erstelle ich ein Bild nur vom oberen Teil einer langen Seite?

Stellen Sie **Bilder** auf eines pro Seite und **Seiten** auf Erste Seite. Sie erhalten dann den ersten seitengroßen Abschnitt statt der gesamten Länge. Um ihn danach auf einen genauen Ausschnitt zuzuschneiden, nutzen Sie das Tool [Bild zuschneiden](/crop-image).

Machen Sie aus einer gespeicherten Webseite, einem Dashboard-Export oder einem Komponenten-Mockup ein PNG, in dem jeder Buchstabe und jede Haarlinie genau so bleibt, wie der Browser sie gezeichnet hat. Wählen Sie die Fensterbreite, und das Layout passt sich ihr an.

oder DOC, DOCX, DOCM …-Dateien hierher ziehen ·

Max. 95 MB pro Datei· Bis zu 20 Dateien· Gelöscht nach 30 Minuten

Ausgabe

Umwandeln in

Auflösung

Bilder

Dateien werden auf unseren Servern verarbeitet und nach 30 Minuten gelöscht.

So verwenden Sie dieses Tool

1
HTML-Datei hinzufügen
Laden Sie .html-, .htm- oder .mhtml-Dateien hoch, bis zu 20 pro Stapel und je 95 MB. Eine Seite, die als einzelne MHTML-Datei gespeichert wurde, enthält ihre Bilder und Stile bereits.
2
Fensterbreite festlegen
Die HTML-Seitenbreite beginnt bei 1280 px. Nehmen Sie 390 px für ein Smartphone-Layout oder 1920 px für ein breites Dashboard. Umwandeln in steht bereits auf PNG und Bilder auf einem langen Bild.
3
In PNG umwandeln
Klicken Sie auf In PNG umwandeln →. Aktivieren Sie unter Erweiterte Einstellungen die Option Transparenter Hintergrund, wenn die Seite keine eigene Hintergrundfarbe hat und das Bild auf anderen Grafiken liegen soll.

Antwort

Wie wandle ich HTML in PNG um?

Laden Sie die .html- oder .mhtml-Datei hoch, stellen Sie die HTML-Seitenbreite auf den Bildschirm ein, den Sie nachbilden möchten, und klicken Sie auf In PNG umwandeln →. Die gesamte gerenderte Seite kommt als ein verlustfreies Bild zurück.

HTML in PNG umwandeln, wenn Text und Linien scharf bleiben müssen

PNG ist seit 1996 eine W3C-Empfehlung und nutzt verlustfreie Kompression. Die geglätteten Kanten von 14-px-Fließtext, einen Pixel breite Tabellenrahmen und farbig hervorgehobener Code bleiben daher unverändert erhalten. Deshalb hängen Entwickler PNG-Aufnahmen an Fehlerberichte und Designer teilen sie in Reviews: Niemand muss sich fragen, ob eine unscharfe Kante ein CSS-Problem oder ein Kompressionsartefakt ist.

Der Preis ist die Dateigröße. Eine Seite aus Text und einfarbigen Flächen lässt sich gut komprimieren, eine Seite voller Fotos nicht. Wenn die Aufnahme in einen Chat oder eine E-Mail geht, wo die Größe wichtiger ist als scharfe Details, ist JPG die kleinere Datei. Für Dokumentationen, Release Notes, Dashboards und Styleguides ist PNG die sicherere Standardwahl.

Die Breite bestimmt das Layout. HTML hat keine feste Seite: Dieselbe Datei zeigt bei 1280 px ein dreispaltiges Desktop-Design und bei 390 px eine einzelne gestapelte Spalte. Der Konverter legt die Seite mit der von Ihnen eingegebenen HTML-Seitenbreite zwischen 320 und 3840 px aus und erfasst sie dann von der ersten Zeile bis zum Footer.

Breiten für HTML in PNG bei gängigen Bildschirmen

195:422

390 × 844 px

Smartphone

CSS-Viewport vieler aktueller iPhones; zeigt das mobile Layout

41:59

820 × 1180 px

Tablet

iPad Air im Hochformat; viele Websites wechseln hier die Breakpoints

8:5

1280 × 800 px

Laptop

Die Standardbreite in diesem Konverter

16:9

1920 × 1080 px

Full-HD-Monitor

Breite Dashboards und Admin-Oberflächen

HTML

HyperText Markup Language

HTML ist die Auszeichnungssprache des Webs, die Tim Berners-Lee Anfang der 1990er-Jahre erstmals beschrieben hat und die heute von der WHATWG als „Living Standard“ gepflegt wird. Eine HTML-Datei beschreibt Überschriften, Absätze, Links, Tabellen, Bilder und Formulare, während das Aussehen meist per CSS festgelegt wird. Jeder Browser stellt sie dar, und sie wird auch für E-Mail-Vorlagen und gespeicherte Webseiten verwendet. Eine einzelne HTML-Datei hängt oft von externen Bildern und Stylesheets ab und kann deshalb allein verschoben kaputt aussehen.

Komprimierung: –
Transparenz: –
Animation: –
Eingeführt: 1993 · Tim Berners-Lee; maintained by WHATWG

HTML-Konverter

PNG

Portable Network Graphics

PNG ist ein verlustfreies Rasterformat, das die PNG Development Group 1996 veröffentlicht hat und das später von W3C und ISO standardisiert wurde. Es bewahrt jedes Pixel exakt, unterstützt volle Alpha-Transparenz und gibt Text, scharfe Kanten und einfarbige Flächen ohne Artefakte wieder. Diese Präzision macht es ideal für Screenshots, Logos, Icons und Oberflächengrafiken. Der Nachteil ist die Größe: Als PNG gespeicherte Fotos sind oft um ein Vielfaches größer als dasselbe Foto als JPEG oder WebP. Alle Browser, Betriebssysteme und Editoren öffnen PNG-Dateien.

Komprimierung: Verlustfrei
Transparenz: Ja
Animation: Nein
Eingeführt: 1996 · PNG Development Group

PNG-Konverter

PNG wählt man, wenn die Seite hauptsächlich aus Text, Code, Tabellen oder Oberflächenelementen besteht: Verlustfreie Pixel halten dünne Linien und kleine Schrift scharf, etwa in Dokumentationen, Fehlerberichten und Design-Reviews, wo JPG-Artefakte auffallen würden.

HTML in PNG umwandeln, ohne Stile oder Schriften zu verlieren

Eine einfache .html-Datei hängt oft von Dingen ab, die woanders liegen: ein Stylesheet in einem CSS-Ordner, Bilder auf dem ursprünglichen Server, Schriften von einem Schriftdienst. Fehlen sie, fällt die Seite auf unformatierten Text in einer Standardschrift zurück. Wenn Sie die Seite in Chrome oder Edge als „Webseite, einzelne Datei“ speichern, entsteht eine .mhtml-Datei, die Stile und Bilder zusammenhält. Das ist das Zuverlässigste für den Upload.

Für Webschriften gilt dasselbe. Eine mit @font-face deklarierte Schrift wird nur geladen, wenn ihre Datei erreichbar ist; eine Schrift, die nur auf Ihrem eigenen Computer existiert, wird durch eine ähnliche ersetzt. Wenn es auf die exakte Typografie ankommt, betten Sie die Schrift ein oder prüfen Sie das Ergebnis, bevor Sie es weitergeben.

Eine feste Breite macht außerdem wöchentliche Aufnahmen eines Berichts direkt vergleichbar. Soll das Ergebnis für den Druck auswählbarer Text bleiben, ist stattdessen HTML in PDF das passende Format.

Fragen zu HTML in PNG

Ist HTML in PNG besser als ein Screenshot aus dem eigenen Browser?

Ein Browser-Screenshot erfasst nur das, was auf Ihren Bildschirm passt, sofern Sie kein Tool für ganze Seiten nutzen, und seine Breite hängt von Ihrem Fenster ab. Hier legen Sie die Breite als Zahl fest. So passen zwei Aufnahmen, die Wochen auseinanderliegen, genau zueinander, und die gesamte Seite von der ersten Zeile bis zum Footer ist enthalten.

Warum ist das PNG um ein Vielfaches größer als dieselbe Seite als JPG?

PNG speichert jedes Pixel verlustfrei. Text und einfarbige Flächen lassen sich so gut komprimieren, Fotos, Verläufe und Video-Vorschaubilder dagegen nicht. Eine Landingpage mit vielen Fotos kann deshalb ein großes PNG ergeben. Für solche Seiten ist HTML in JPG die leichtere Wahl; bei Codebeispielen, Diagrammen und Oberflächen lohnt sich die Unschärfe meist nicht.

Kann das PNG statt Weiß einen transparenten Hintergrund haben?

Ja. Aktivieren Sie Transparenter Hintergrund. Er scheint nur dort durch, wo die Seite selbst keine Hintergrundfarbe festlegt. Eine Website mit weißer Body-Farbe bleibt also weiß. Am besten funktioniert das bei einer einzelnen Komponente oder einem Badge, das als eigene HTML-Datei vorliegt.

Führt der Konverter das JavaScript der Seite aus?

Inhalte, die ein Skript beim Öffnen der Seite aufbaut, können erscheinen. Alles, was auf einen Klick, einen Scroll oder eine Anmeldung wartet, erscheint nicht. Wenn ein Diagramm oder eine Tabelle erst nach einer Interaktion existiert, öffnen Sie die Seite im Browser, warten Sie, bis sie fertig geladen ist, und speichern Sie sie vor dem Hochladen als einzelne Datei.

Wie erstelle ich ein Bild nur vom oberen Teil einer langen Seite?

Stellen Sie Bilder auf eines pro Seite und Seiten auf Erste Seite. Sie erhalten dann den ersten seitengroßen Abschnitt statt der gesamten Länge. Um ihn danach auf einen genauen Ausschnitt zuzuschneiden, nutzen Sie das Tool Bild zuschneiden.