HTML in PNG oder JPG umwandeln

Dieses Tool rendert HTML, das Sie einfügen. Um eine Website zu erfassen, die bereits online ist, verwenden Sie das Tool für ganzseitige Screenshots. Um beides aus Code heraus zu tun, nimmt die HTML-als-Bild-API dieselbe Eingabe entgegen.

Größe: fest oder an den Inhalt angepasst

Die Breite ist das Browserfenster, in dem das HTML aufgebaut wird. Mit fester Höhe ist das Bild genau Breite mal Höhe groß, wie es eine Social Card oder ein Banner braucht; alles unterhalb der Höhe wird abgeschnitten. An Inhalt anpassen baut die Seite auf und macht das Bild so hoch wie das Dokument, bis zu 8.000 Pixel, was zu Belegen, Tickets und E-Mails passt. In diesem Modus ist das Fenster beim Aufbau der Seite nur 100 Pixel hoch, ein Layout mit vh-Einheiten fällt deshalb zu kurz aus: Geben Sie ihm stattdessen eine feste Höhe. Bei 2x Pixeldichte hat das Bild doppelt so viele Pixel in Breite und Höhe, für Bildschirme, die es sonst unscharf zeigen würden.

PNG, JPG oder WebP

• PNG ist verlustfrei: Text und flächige Farben bleiben scharf, und das Bild kann transparent sein. Die Dateien sind am größten.
• JPG ist verlustbehaftet und bei Fotos und Verläufen viel kleiner, zeichnet kleinen Text aber etwas weich und kennt keine Transparenz.
• WebP ist bei ähnlicher Qualität kleiner als beide und unterstützt Transparenz. Die meisten, aber nicht alle Stellen, die Bilder annehmen, akzeptieren es.

Ein transparenter Hintergrund entfernt das Standardweiß des Browsers, sodass nur bleibt, was das HTML zeichnet. Eigene Hintergrundfarben der Seite sind weiterhin zu sehen: Lassen Sie body ohne Hintergrund, um ein transparentes Bild zu erhalten.

Schriften und Bilder

Auf dem Renderer sind die Noto-Schriftfamilien installiert. Jede andere Schrift muss mit @font-face von einer absoluten https-Adresse geladen werden, sonst fällt der Text auf eine installierte Schrift zurück und kann anders umbrechen als in Ihrem eigenen Browser. Bilder brauchen absolute https-Adressen oder Data-URIs. Das Ergebnis kann leicht von der Anzeige in Ihrem Browser abweichen, weil Schriften und ihre Darstellung sich zwischen Systemen unterscheiden.

Sie erstellen Social Cards? Die Seite zur Open-Graph-Bild-API behandelt Vorlagen und Caching für Bilder, die Sie für jede Seite erzeugen.

Limits und Datenschutz

Das HTML wird an Ironfang gesendet und auf unseren Servern im Vereinigten Königreich gerendert. Es wird weder gespeichert noch protokolliert noch zwischengespeichert: Das Bild kommt in der Antwort zurück, und nichts wird aufbewahrt. Skripte im HTML werden ausgeführt, ohne Zugriff auf diese Website. Dokumente dürfen bis zu 256 KB groß sein, Breiten reichen von 200 bis 2.560 Pixel, und ein Rendering wird nach 30 Sekunden abgebrochen. Pro Adresse sind 20 Renderings pro Stunde möglich, gemeinsam mit den kostenlosen Tools für Screenshots und HTML zu PDF. Hier erstellte Bilder tragen in der unteren Ecke eine kleine Ironfang Render-Markierung; Bilder, die Sie mit Ihrem eigenen Konto über die API erstellen, tragen keine.