Image Generation API

Image Generation API: HTML, eine URL oder JSON rein — PNG raus

Dieselbe Engine, die Ihre PDFs druckt, rendert auch Bilder. Social-Visuals, Werbebanner, OG-Bilder und personalisierte Grafiken — erzeugt aus einer Vorlage und Daten statt von Hand.

  • 50 kostenlose Renderings/Monat
  • Ohne Kreditkarte
  • PNG, JPG, WebP

Was ist eine Bildgenerierungs-API?

Eine Bildgenerierungs-API wandelt Markup und Daten per HTTP in Bilddateien um. Sie senden HTML, eine URL oder eine Vorlagen-ID zusammen mit JSON-Werten; der Dienst rendert das Ergebnis in einem echten Browser und liefert ein PNG, JPG oder WebP zurück. Er ersetzt den Headless-Browser, die Schriftverwaltung und die Bild-Pipeline, die Sie sonst selbst betreiben würden.

Die wichtigsten Fakten

EingabeHTML, eine URL oder eine gespeicherte Vorlage, befüllt mit JSON
AusgabePNG (Standard), JPEG, WebP
EndpunktePOST /v1/images/from-html, /from-url, /from-template
Standard-Viewport1280 × 720, pro Anfrage änderbar
Auflösungscale 1–3 für Retina-Ausgabe
Exakte Größenwidth und height mit fit: contain, cover oder fill
Transparenztransparent für PNG und WebP, omit_background für Screenshots
RenderzeitMedian 216 ms, p95 516 ms1
Engine2026.4 auf Chromium 153, JavaScript standardmäßig aktiv
PreisIn jedem Tarif enthalten. Ab 15 € / Monat für 3.000 Renderings, automatisches Nachladen ab 6 € je 1.000 — siehe Preise

Ein Aufruf, ein Bild

Speichern Sie ein Layout einmal und senden Sie dann die Werte, die sich ändern. Die Antwort enthält eine signierte URL — oder die Datei selbst, wenn Sie "delivery": "binary" anfordern.

curl https://api.dynamicdocumentapi.com/v1/images/from-template \
  -H "Authorization: Bearer $DYNAMIC_DOCUMENT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template_id": "tpl_summer_sale",
    "data": { "title": "Summer Sale", "discount": "40%" },
    "image": {
      "format_options": { "quality": 90 },
      "width": 1080, "height": 1080, "fit": "cover",
      "scale": 2
    },
    "delivery": "binary"
  }' \
  --output sale.png

# sale.png is 2160 x 2160 pixels: 1080 at scale 2
const res = await fetch("https://api.dynamicdocumentapi.com/v1/images/from-template", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.DYNAMIC_DOCUMENT_API_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    template_id: "tpl_summer_sale",
    data: { title: "Summer Sale", discount: "40%" },
    image: { width: 1080, height: 1080, fit: "cover", scale: 2 }
  })
});

const { files } = await res.json();
console.log(files[0].url); // signed, valid for one hour
import os, requests

res = requests.post(
    "https://api.dynamicdocumentapi.com/v1/images/from-template",
    headers={"Authorization": f"Bearer {os.environ['DYNAMIC_DOCUMENT_API_KEY']}"},
    json={
        "template_id": "tpl_summer_sale",
        "data": {"title": "Summer Sale", "discount": "40%"},
        "image": {"width": 1080, "height": 1080, "fit": "cover", "scale": 2},
    },
    timeout=60,
)
res.raise_for_status()
print(res.json()["files"][0]["url"])
<?php
$ch = curl_init("https://api.dynamicdocumentapi.com/v1/images/from-template");
curl_setopt_array($ch, [
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_HTTPHEADER => [
    "Authorization: Bearer " . getenv("DYNAMIC_DOCUMENT_API_KEY"),
    "Content-Type: application/json",
  ],
  CURLOPT_POSTFIELDS => json_encode([
    "template_id" => "tpl_summer_sale",
    "data" => ["title" => "Summer Sale", "discount" => "40%"],
    "image" => ["width" => 1080, "height" => 1080, "fit" => "cover", "scale" => 2],
  ]),
]);
$out = json_decode(curl_exec($ch), true);
echo $out["files"][0]["url"];

Die Authentifizierung läuft über ein Bearer-Token. Dieselben drei Eingänge — HTML, URL, Vorlage — gibt es für PDFs unter /v1/pdf/…: Ein Layout, das Sie schon drucken, lässt sich also auch fotografieren.

Drei Wege hinein

Aus einer Vorlage

Das Layout einmal speichern, nur die Werte senden. Vorlagen nutzen Jinja-Syntax, formatieren Datum und Währung je Sprache über ICU, rendern QR-Codes und Barcodes und behalten jede veröffentlichte Version — so können Sie eine Version festlegen und eine Designänderung zurücknehmen.

Ideal für Kampagnengrafiken, Zertifikate und alles, was tausendfach mit anderen Daten entsteht.

Aus Ihrem HTML

Senden Sie Markup und CSS und bekommen Sie das gerenderte Ergebnis. Ihre Anwendung erzeugt das Layout schon — React, Django, Rails, Laravel —, und die API macht nur das Foto.

Schriften kommen aus dem Katalog der Engine, aus Ihren Vorlagen-Assets oder als entfernte @font-face über den Proxy.

Aus einer URL

Richten Sie die API auf eine Seite und bekommen Sie einen Screenshot. full_page erfasst über den Viewport hinaus, clip_selector beschränkt auf ein Element, und Seiten hinter einem Login erreichen Sie mit cookies, headers oder basic_auth.

Zugangsdaten werden nur an dieselbe registrierbare Domain gesendet, und bei der URL-Erfassung lässt sich kein CSS einfügen.

Größen, Skalierung und Transparenz

OptionWerteWas sie bewirkt
format_optionsquality, progressive, losslessKompression für JPEG und WebP
transparenttrue / falseTransparenter Hintergrund, nur PNG und WebP
scale1–3Geräte-Skalierungsfaktor: 2 verdoppelt die Pixel, ohne Ihr CSS anzufassen
width, heightPixelDie Ausgabe skalieren; das Seitenverhältnis bleibt, außer beide sind gesetzt
fitcontain · cover · fillWie das Rendering in diese Maße gesetzt wird
viewportStandard 1280 × 720Das Browserfenster, in dem die Seite aufgebaut wird
full_pagetrue / falseDie ganze Seite erfassen, nicht nur den Viewport
clip_selectorCSS-SelektorEin einzelnes Element erfassen
omit_backgroundtrue / falseDen Seitenhintergrund bei einem Screenshot weglassen
waitload · networkidle · selector · ready_flag · delayWann das Bild aufgenommen wird

Ein Design mit 1080 × 1080 liefert bei scale: 2 2160 × 2160 Pixel. Das Layout ändert sich nicht — nur die Zahl der Pixel. Das ist der Unterschied zwischen einem Bild, das auf einem Retina-Display besteht, und einem, das es nicht tut.

Warten, bis die Seite fertig ist

Ein zu früh aufgenommenes Bild ist schlimmer als ein langsames. Die Engine wartet immer auf das load-Ereignis, dann auf Webfonts, die Bilddekodierung und zwei gerenderte Frames. Darüber hinaus wählen Sie:

  • networkidle — 500 ms Ruhe im Netzwerk, für Seiten, die ihre Daten selbst laden.
  • selector — warten, bis ein Element existiert, mit bis zu 500 Zeichen CSS-Selektor.
  • ready_flag — Ihre Seite setzt ein Flag, wenn sie fertig ist. Die ehrliche Wahl für Diagramme und asynchrone Daten.
  • delay — eine feste Pause von 0 bis 10.000 ms, wenn nichts Besseres verfügbar ist.

Mit strict: true lässt eine Zeitüberschreitung das Rendering scheitern; mit false bekommen Sie die Warnung wait_timeout und trotzdem ein Bild. Das Zeitlimit lässt sich bis 300 Sekunden einstellen, Standard 30.

Bild-API, Headless-Browser oder Designwerkzeug?

Diese APIIhr eigenes ChromiumDesignwerkzeug mit Export
EinrichtungEin HTTP-AufrufBrowser, Schriften, Sandbox, Warteschlange, AutoscalingVon Hand, pro Bild
Kosten pro Bild bei VolumenAb 0,005 €, sinkend bis 0,0016 €Server plus die Zeit, sie am Laufen zu haltenDie Zeit einer Person
Gleiches Layout wie ein PDFJa, eine VorlageSie bauen es zweimalNein
Passt in eine PipelineJa, mit Webhooks und asynchronJa, sobald Sie es gebaut habenNein
Volle gestalterische FreiheitHTML und CSSHTML und CSSJa, aber von Hand

Wann diese API nicht das richtige Werkzeug ist

Wenn Sie ein einziges schönes Bild brauchen und nie ein weiteres, gewinnt ein Designwerkzeug — eine API lohnt sich, wenn dasselbe Layout immer wieder befüllt wird. Sind Ihre Visuals Fotos statt Layouts, passt ein Dienst zur Bildbearbeitung besser als ein Renderer. Und wenn eine Richtlinie verbietet, Inhalte an Dritte zu senden, ist selbst betriebenes Chromium die ehrliche Antwort.

Was es kostet

Bilder sind in jedem Tarif enthalten, im selben Kontingent wie PDFs: 15 € im Monat für 3.000 Renderings, 47 € für 15.000, 119 € für 50.000, 319 € für 200.000 — bei jährlicher Abrechnung. Das sind 0,005 € pro Bild im Einstiegstarif und 0,0016 € im größten. Ein Rendering ist ein Bild in einer Ausgabegröße, egal wie viele Pixel; jedes Format dieser Größe ist inklusive.

Bezahltarife laden automatisch nach, wenn es knapp wird: 1.000 Renderings für 6 € bis 2 € je 1.000, je nach Tarif. Im Free-Tarif decken Renderings-Pakete dieselbe Arbeit ohne Abo ab: 50 € für 10.000 Renderings, 200 € für 50.000, 750 € für 250.000, 12 Monate gültig.

Für Social Cards gibt es einen günstigeren Weg, als die API für jeden Post aufzurufen: Ein signierter Render-Link (ab Starter) ist eine URL, die Sie direkt ins og:image-Tag setzen. Er rendert beim ersten Abruf und wird danach aus dem Cache bedient — er kostet also ein Rendering, egal wie oft Crawler, Chat-Apps und Timelines ihn abrufen.

Der Free-Tarif umfasst 50 Renderings im Monat ohne Kreditkarte und nutzt dieselbe Engine — ein Prototyp verhält sich also genau wie der Produktivbetrieb. Alle Zahlen stehen auf der Preisseite.

1 Median-Renderzeit 216 ms, p95 516 ms, gemessen über 1.664 erfolgreiche Renderings: Warteschlange plus Verarbeitung im Worker, ohne Netzwerkzeit und API-Overhead.

FAQ

Häufige Fragen

Was ist eine Bildgenerierungs-API?

Eine Bildgenerierungs-API wandelt Markup und Daten per HTTP in Bilddateien um. Sie senden HTML, eine URL oder eine Vorlagen-ID zusammen mit JSON-Werten, und der Dienst rendert das Ergebnis in einem echten Browser und liefert eine PNG-, JPG- oder WebP-Datei zurück. Er ersetzt den Headless-Browser und die Bild-Pipeline, die Sie sonst selbst betreiben würden.

Welche Bildformate werden unterstützt?

PNG ist der Standard. JPEG und WebP sind verfügbar, mit Einstellungen für Qualität, progressive und verlustfreie Kodierung über format_options. PNG und WebP unterstützen außerdem einen transparenten Hintergrund.

Wie bekomme ich ein Retina-Bild?

Setzen Sie scale auf 2 oder 3. Der Geräte-Skalierungsfaktor vervielfacht die Pixel, ohne Ihr CSS-Layout zu ändern — ein Design mit 1080 × 1080 liefert bei Skalierung 2 also 2160 × 2160 Pixel.

Kann ich einen Screenshot einer ganzen Webseite machen?

Ja. Senden Sie die URL an den Bild-Endpunkt und setzen Sie full_page auf true, um über den Viewport hinaus zu erfassen, oder nutzen Sie clip_selector für ein einzelnes Element. Der Viewport ist standardmäßig 1280 × 720.

Wie schnell ist ein Rendering?

Die Median-Renderzeit liegt bei 216 ms, p95 bei 516 ms, gemessen über 1.664 erfolgreiche Renderings als Warteschlange plus Verarbeitung im Worker, ohne Netzwerkzeit.

Was kostet die Bildgenerierung?

Bilder sind in jedem Tarif enthalten. Bezahltarife beginnen bei 15 € im Monat für 3.000 Renderings bei jährlicher Abrechnung, und der Free-Tarif umfasst 50 Renderings im Monat. Ein Rendering ist ein Bild in einer Ausgabegröße, und PDFs und Bilder nutzen dasselbe Kontingent. Siehe Preise.

Kann dieselbe Vorlage ein PDF und ein Bild erzeugen?

Ja. Vorlagen werden einmal gespeichert und in jede der beiden Ausgaben gerendert. Sie senden dasselbe JSON an den PDF-Vorlagen-Endpunkt oder den Bild-Endpunkt und bekommen aus demselben Layout ein Dokument oder ein Bild.

Rendern Sie Ihr erstes Bild kostenlos

50 Renderings im Monat im Free-Tarif, ohne Kreditkarte, automatisches Nachladen in Bezahltarifen, kein Browser zu betreiben.

Kostenlos starten