HTML-zu-Bild-API – Ihr HTML und CSS als Bild oder PDF rendern
Fügen Sie Ihr eigenes HTML und CSS in eine HTML-Vorlage ein, markieren Sie die sich ändernden Teile mit Platzhaltern mit doppelten Klammern, und rendern Sie es zu PNG, JPEG, WebP oder PDF mit einem API-Aufruf – gezeichnet von headless Chromium, sodass modernes CSS wie in Chrome gerendert wird.
100 renders / Monat kostenlos · keine Karte erforderlich · bezahlte Pläne werden nie blockiertKostenlos testen: Wandle HTML in deinem Browser in ein PNG um →So funktioniert es
Fügen Sie Ihr HTML ein
Erstellen Sie eine HTML-Vorlage im Editor und fügen Sie Ihr Markup und Ihre Stile ein. Eine Live-Vorschau zeigt genau, was gerendert wird.
Markieren Sie die Variablen
Wickeln Sie alles, das sich ändert, in doppelte Klammern ein – einen Titel, einen Preis, eine Bild-URL. Die Standardwerte der Vorlage füllen aus, was eine Anfrage auslässt.
Rendern Sie über API
Senden Sie die Vorlagen-ID via POST mit Ihren Werten als Änderungen und erhalten Sie eine Bild- oder PDF-URL zurück – oder fügen Sie die Werte in eine signierte URL für og:image-Tags und E-Mail ein.
Ein API-Aufruf
curl https://api.mostlyrender.com/v1/renders \
-H "Authorization: Bearer mr_test_YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{"templateId":"tpl_html_card","modifications":{"title":"Northwind Co.","subtitle":"v2.4 · 14 Oct"}}'Fragen
Kann ich mein eigenes HTML statt des Visual Editors verwenden?
Ja. Eine HTML-Vorlage behält Ihr Markup und Ihr CSS genau wie geschrieben, und jeder Platzhalter mit doppelten Klammern wird zu einem API-Parameter. HTML-Vorlagen und Vorlagen für visuelle Ebenen werden durch die gleiche API gerendert, daher können Sie beide in einem Konto verwenden.
Kann ich rohes HTML in jeder API-Anfrage senden?
Nicht direkt. Das HTML befindet sich in einer gespeicherten Vorlage und jede Anfrage sendet nur die Werte, wodurch Anfragen klein bleiben und identische Renders aus dem Cache bereitgestellt werden können. Um eine bereits online verfügbare Seite zu erfassen, senden Sie stattdessen ihre URL an den Screenshot-Endpunkt.
Wird CSS so gerendert wie in meinem Browser?
Vorlagen werden von headless Chromium gerendert, daher verhalten sich modernes CSS – flexbox, grid, benutzerdefinierte Eigenschaften – wie in Chrome.
Werden meine Werte maskiert, wenn sie einen Platzhalter ausfüllen?
Ja. Ein Platzhalter mit doppelten Klammern fügt den Wert als Text mit maskierten HTML-Zeichen ein, sodass Benutzerdaten kein Markup injizieren können. Verwenden Sie einen Platzhalter mit dreifachen Klammern nur, wenn Sie bewusst vertrauenswürdiges HTML einfügen möchten.
Welche Ausgabeformate werden unterstützt?
PNG (Standard), JPEG, WebP und PDF von derselben Vorlage. Signierte Render-URLs akzeptieren auch q (0–100) für JPEG- und WebP-Qualität und scale (1–3) für schärfere Ausgabe auf hochdichten Bildschirmen.
Wie unterscheidet es sich von HTMLCSStoImage?
Beide wandeln HTML und CSS in Bilder um. MostlyRender fügt einen visuellen Layer-Editor neben HTML-Vorlagen hinzu und rechnet Überläufe mit $3–$5 pro 1.000 gegen HCTIs $10 in unserem Bericht von Juni 2026 ab. HCTI ist der günstigere Einstieg mit $14 für 1.000 Bilder.
Wie viel kostet das HTML-zu-Bild-Rendering?
Jedes Bild oder PDF ist ein Render. Der Free Plan umfasst 100 Renders pro Monat; Starter kostet $19 für 2.000, Pro $49 für 10.000 und Scale $149 für 50.000, mit veröffentlichtem Overage statt einer harten Obergrenze bei bezahlten Plänen.