HTML zu PNG: HTML und CSS als Bild exportieren
Sie möchten eine HTML/CSS-Karte als Bild teilen? Mit HTML to Image exportieren Sie das gerenderte Layout als PNG. Das eignet sich für Dokumentationshinweise, kleine Vergleichskarten und visuelle Updates, deren Abstände bereits per CSS festgelegt sind.
Diese Anleitung behandelt HTML zu PNG aus bereitgestelltem Quelltext. Beginnen Sie mit einem statischen, eigenständigen Ausschnitt, damit sich das Ergebnis reproduzieren und prüfen lässt.
- Öffnen Sie den HTML-Bildkonverter und fügen Sie den Quelltext samt benötigten Stilen ein.
- Stellen Sie die Bildbreite ein. Prüfen Sie die längste Überschrift und die Abstände in der Vorschau.
- Wählen Sie PNG und einen zur Anzeigegröße passenden Ausgabemaßstab.
- Öffnen Sie den Download und prüfen Sie Ränder, Text, Hintergrund und Kennzeichnung.
Bewahren Sie HTML für spätere Änderungen auf. Das Bild ist eine feste Darstellung; Links und Schaltflächen darin bleiben nicht interaktiv.
Dieses Beispiel nutzt eine gewöhnliche Schriftfamilie, einen kurzen Stilblock und keine entfernten Ressourcen. Es ist Demonstrationsmaterial, kein Kundenfall. Alle Sprachversionen verwenden dieselbe Quelle.
```html
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 32px; background: #edf2f8;
font-family: Arial, sans-serif; color: #17263c; }
.card { padding: 32px; background: white;
border: 1px solid #c9d5e4; border-radius: 12px; }
.label { margin: 0 0 12px; color: #47638c; font-size: 14px; }
h1 { margin: 0 0 16px; font-size: 32px; }
p { margin: 0; font-size: 18px; line-height: 1.5; }
</style>
<article class="card">
<p class="label">Documentation update</p>
<h1>Ready for review</h1>
<p>Check the source, review the layout, then share the image.</p>
</article>
```
Kopieren Sie nur das HTML innerhalb der Begrenzung in das Werkzeug. Die Markdown-Begrenzung dient zum Speichern und Teilen der Quelle und gehört nicht zur HTML-Eingabe.
Das vollständige PNG öffnen. Es wurde über den tatsächlichen HTML-Exportdienst der Website mit 800 px Bildbreite und 2× Ausgabe erzeugt und enthält die Kennzeichnung des kostenlosen Exports. Überschrift, Absatz, Innenabstände und Kartenrand wurden geprüft. Dies bestätigt das kleine Beispiel, nicht beliebige Websites oder interaktive Anwendungen.
| Symptom | Zuerst prüfen |
|---|---|
| Stile fehlen | Benötigtes CSS im Ausschnitt enthalten? |
| Überschrift bricht anders um | Bildbreite und verfügbare Schrift vergleichen |
| Bilder fehlen | Sind die URLs für den Rendering-Dienst erreichbar? |
| Inhalt wird abgeschnitten | Feste Höhen und Überlaufregeln prüfen |
| Eingebetteter Text ist klein | Inhalt reduzieren oder Anzeigefläche vergrößern |
Testen Sie zuerst die eigenständige Quelle, dann externe Schriften oder Bilder. Ressourcen einer angemeldeten Browsersitzung sind für einen Server nicht unbedingt erreichbar. Für eine kleine Komponente brauchen Sie normalerweise keine komplette Website samt Navigation, Skripten und fremden Stilen.
HTML eignet sich für CSS-Kontrolle über Abstände und Kartenstruktur. Für Überschriften, Fließtext, Tabellen und Code ist der Markdown-Bildeditor oft ausreichend. Der Markdown-zu-PNG-Leitfaden zeigt diesen einfacheren Weg.
HTML-Export unterscheidet sich vom Erfassen einer Website-URL. Hier wird Quelltext bereitgestellt; Anmeldungen, Anwendungszustände und sämtliche Browserinteraktionen sind nicht Teil der Demonstration.
Prüfen Sie die aktuellen Preis- und Exportregeln für kostenlose und unmarkierte Ausgaben. Das Beispiel enthält eine Kennzeichnung und belegt keine bezahlte Berechtigung.
Das Ergebnis ist ein Rasterbild. Bewahren Sie HTML oder Markdown auf und ergänzen Sie echte Links neben dem Bild. Beschreiben Sie die Aussage der Karte im Alternativtext; wichtige Informationen sollten nicht nur im Bild stehen.
Dieser Export nutzt Serververarbeitung. Entfernen Sie vertrauliche Inhalte, sofern Ihre Organisation diese Verarbeitung nicht erlaubt. Offlinebetrieb, automatische Schwärzung und eine bestimmte Aufbewahrungsdauer werden nicht zugesichert.
Beginnen Sie mit einer kurzen Karte, exportieren Sie HTML als PNG und kontrollieren Sie die Datei in der vorgesehenen Anzeigegröße. Speichern Sie die Quelle bei Ihren Inhalten, damit spätere Text- oder Layoutänderungen erneut exportiert werden können.